【Kubernetes】第二十六篇 - 布署前端项目(上)
创始人
2024-06-02 23:03:00
0

一,前言

上一篇,创建 Deployment、Service 完成后端项目布署;

本篇,开始介绍前端项目的部署;


二,创建前端项目

前端是一个简单的 react 项目

// package.json"scripts": {"start": "craco start","build": "craco build"}

项目入口:

// src/index.jsimport React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'antd/dist/antd.css';
import App from './App';ReactDOM.render(, document.getElementById('root'));

Dockerfile

// DockerfileFROM nginx:1.15-alpine
COPY build /etc/nginx/html // 将 build 目录中的打包编译后的文件,拷贝到 nginx 镜像目录 /etc/nginx/html 中
COPY conf /etc/nginx/  // 将conf目录下的 nginx 配置文件,拷贝到 nginx 配置文件目录 /etc/nginx/ 中
WORKDIR /etc/nginx/html

nginx 配置:
conf/nginx.conf

#user  nobody;
worker_processes  1;
events {worker_connections  1024;use epoll;
}
http {include mime.types;default_type  application/octet-stream;client_max_body_size  2048m;client_body_buffer_size 256k;client_header_buffer_size 1k;proxy_connect_timeout 90;proxy_read_timeout 90;proxy_buffer_size 4k;proxy_buffers 6 32k;proxy_busy_buffers_size 64k;proxy_temp_file_write_size 64k;log_format main     '$remote_addr - $remote_user [$time_local] "$host:$server_port" "$request" ''$status $body_bytes_sent "$request_body" "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for" "$request_time"';sendfile        on;tcp_nopush on;tcp_nodelay on;keepalive_timeout  65;gzip  on;gzip_min_length  1000;gzip_buffers  16  8k;gzip_http_version  1.1;gzip_comp_level  6;gzip_proxied any;gzip_types text/plain application/javascript text/css application/xml text/javascript application/json application/x-javascript text/xml application/xml+rss;gzip_vary  off;gzip_disable  "MSIE [1-6].";open_file_cache max=100000 inactive=20s;open_file_cache_valid 30s;open_file_cache_min_uses 2;open_file_cache_errors on;map $sent_http_content_type $expires {default                    off;text/html                  epoch;text/css                   max;application/javascript     max;application/font-woff      max;~image/                    max;}// 反向代理配置// service-cicd-backend 是后端项目的服务名upstream backend {server service-cicd-backend:7001;}server {listen 80;server_name  _;root /etc/nginx/html/;charset utf-8;proxy_redirect off;proxy_connect_timeout   10;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;location /index.html {#expires -1;add_header Cache-Control "no-store, must-revalidate";}location / {try_files $uri /index.html;}location ^~ /api/ {proxy_pass http://backend/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_http_version 1.1;}}}

安装依赖,启动运行项目

// 安装依赖
npm install

image.png

备注:安装依赖包时,可能需要编译代码,会用到 c++编译器

yum -y install gcc gcc-c++ kernel-devel[root@k8s-node ~]# yum -y install gcc gcc-c++ kernel-devel

创建 git 仓库,提交代码(略):

git@gitee.com:BraveWangDev/cicd-frontend.git


三,创建 jenkins 任务

为前端项目创建 jenkins 任务:cicd-frontend

添加 git 地址:

构建环境添加环境变量,登录 docker 仓库的用户名和密码:

构建环境添加 node 依赖

添加构建脚本

#!/bin/sh -l
time=$(date "+%Y%m%d%H%M%S")
npm install --registry=https://registry.npm.taobao.org
npm run build
docker build -t 47.94.92.122:8082/cicd-frontend:$time .
docker login -u $DOCKER_LOGIN_USERNAME -p $DOCKER_LOGIN_PASSWORD 47.94.92.122:8082
docker push 47.94.92.122:8082/cicd-frontend:$time

测试构建

备注:node-pre-gyp是一个构建工具,这里需要使用 c++编译

构建成功:

镜像地址:47.94.92.122:8082/cicd-frontend:20220112231457


四,结尾

本篇,完成了前端项目的创建和 jenkins 配置;

下一篇,创建 Deployment、Service,完成前端项目的部署;

相关内容

热门资讯

新还珠格格,欣荣和永琪有个孩子... 新还珠格格,欣荣和永琪有个孩子?不是说永琪从来都没碰过她吗?绵忆到底是他和小燕子的还是欣荣的啊求正解...
中级会计怎么备考?今年几月考试... 中级会计怎么备考?今年几月考试?您好,很高兴为您解答中级会计师考试,教材是根本和基础,所有的题目都是...
继兴业、招商、中信后,邮储银行... (来源:现代商业银行杂志)金融资产投资公司(AIC)队伍再添新员。邮储银行近日发布公告称,该行拟以自...
中央巡视组对陕西开展两个半月常... 转自:北京日报客户端日前,中央第十五巡视组进驻陕西省,将开展为期两个半月左右的常规巡视,并会同陕西省...
柳州幻境空间在哪里 柳州幻境空间在哪里柳州幻境空间是位于广西柳州市城中区华联商闷郑城4楼的室内主题乐园,提供了各种游戏和...
中央巡视组进驻山东 联动巡视济... 转自:央视新闻客户端经党中央批准,二十届中央第六轮巡视将对16个省(自治区、直辖市)开展常规巡视,并...
继续发布暴雨蓝色预警!北京等地... 转自:央视新闻客户端中央气象台19日早6时继续发布暴雨蓝色预警。预计,19日早8时至20日早8时,青...
降妖伏魔篇演员有哪些 降妖伏魔篇演员有哪些文章舒淇程小东黄勃
晚上十一点在河边抓鱼听到有人叫... 晚上十一点在河边抓鱼听到有人叫我小名声音跟我一个朋友一样,电筒照却没有发现有人而且我女朋友也听见了不...
属猴的为什么吸引属狗的人 属猴的为什么吸引属狗的人属相狗虽不善甜言蜜语,为人多有情感之被捉,然其铅轮内心却多有向往甜蜜幸福之生...