26、K8S实战：布署前端项目（上）-程序员快看-教程，程序员编程资料站

一，前言

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

本篇，开始介绍前端项目的部署；

二，创建前端项目

前端是一个简单的 react 项目

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

项目入口：

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'antd/dist/antd.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Dockerfile

// Dockerfile

FROM 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

备注：安装依赖包时，可能需要编译代码，会用到 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，完成前端项目的部署；