在这里插入图片描述

在这篇文章中，解释如何通过容器化（Docker）来打包和部署前端项目，替代之前手动维护版本的方式

1.nginx配置

在 ruoyi-ui 项目的根目录下创建一个 nginx.conf 文件, 我没有使用monitor-admin和xxljob-admin模块的配置, 也可以直接使用script目录下的

worker_processes  auto;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
  worker_connections  1024;
}

http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  # 限制body大小
  client_max_body_size 100m;

  # Gzip 压缩
  gzip  on;
  gzip_min_length  1k;
  gzip_buffers     4 16k;
  gzip_http_version 1.1;
  gzip_comp_level 9;
  gzip_types       text/plain application/x-javascript text/css application/xml text/javascript application/javascript application/json;
  gzip_disable "MSIE [1-6]\.";
  gzip_vary on;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  access_log  /var/log/nginx/access.log  main;

  upstream server {
    ip_hash;
    server ruoyi-service:8080;
  }

  server {
    listen       80;
    server_name  localhost;

    #https配置参考 start
    # listen       444 ssl;

    # 证书直接存放 /docker/nginx/cert/ 目录下即可 更改证书名称即可 无需更改证书路径
    # ssl on;
    # ssl_certificate      /etc/nginx/cert/origin.pem; # /etc/nginx/cert/ 为docker映射路径 不允许更改
    # ssl_certificate_key  /etc/nginx/cert/originPrivate.pem; # /etc/nginx/cert/ 为docker映射路径 不允许更改
    # ssl_session_timeout 5m;
    # ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    # ssl_prefer_server_ciphers on;
    # https配置参考 end

    # 演示环境配置 拦截除 GET POST 之外的所有请求
    # if ($request_method !~* GET|POST) {
    #     rewrite  ^/(.*)$  /403;
    # }

    # location = /403 {
    #     default_type application/json;
    #     return 200 '{"msg":"演示模式，不允许操作","code":500}';
    # }

    # 限制外网访问内网 actuator 相关路径
    location ~ ^(/[^/]*)?/actuator(/.*)?$ {
      return 403;
    }

    location / {
      root   /usr/share/nginx/html;
      try_files $uri $uri/ /index.html;
      index  index.html index.htm;
    }

    location /prod-api/ {
      proxy_set_header Host $http_host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_pass http://server/;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
      root   html;
    }
  }
}

2.Dockerfile配置

在 ruoyi-ui 项目的根目录下创建一个 Dockerfile 文件：

FROM node:16 AS frontend-builder 
WORKDIR /build-app
COPY . .     
RUN npm install
RUN npm run build:prod  #package.json配置的命令, 运行打包 


FROM nginx:1.23 # nginx版本
EXPOSE 80   #没有配置证书, 只需要80端口
WORKDIR /app
COPY nginx.conf /etc/nginx/nginx.conf #使用刚刚配置的nginx.conf覆盖默认的

RUN rm -rf /usr/share/nginx/html #避免默认文件干扰
RUN mkdir /usr/share/nginx/html
COPY --from=frontend-builder /build-app/dist /usr/share/nginx/html

# 运行
CMD ["nginx", "-g", "daemon off;"]

3.ruoyi-ui.run.xml

使用 IDEA 的 Docker 运行配置，在 .run 目录下创建一个 ruoyi-ui.run.xml 文件，以便快速构建镜像：

<component name="ProjectRunConfigurationManager">
    <configuration default="false" name="ruoyi-ui" type="docker-deploy" factoryName="dockerfile" server-name="Docker">
        <deployment type="dockerfile">
            <settings>
                <!-- 设置镜像标签，修改为合适的名称和版本 -->
                <option name="imageTag" value="xxx/ruoyi-ui:4.8.2" />
                <!-- 设置为仅构建镜像，不部署 -->
                <option name="buildOnly" value="true" />
                <!-- 指定 Dockerfile 的路径 -->
                <option name="sourceFilePath" value="ruoyi-ui/Dockerfile" />
            </settings>
        </deployment>
        <method v="2" />
    </configuration>
</component>

优点:

1. 使用最新依赖
2. 方便 CI/CD
3. 版本管理简单
4. 环境一致性

缺点:

1. 构建时间增加
2. 对机器性能要求高
   

4.部署yaml

创建nginx-deploy.yaml

apiVersion: v1
kind: Service
metadata:
  labels:
    app: nginx-service
  name: nginx-service
  namespace: ruoyi
spec:
  ports:
    - nodePort: 30088
      port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: nginx-pod
  type: NodePort
---
apiVersion: apps/v1
kind: Deployment
metadata:
  labels:
    app: nginx-deploy
  name: nginx-deploy
  namespace: ruoyi
spec:
  replicas: 1
  selector:
    matchLabels:
      app: nginx-pod
  strategy: {}
  template:
    metadata:
      labels:
        app: nginx-pod
      namespace: ruoyi
    spec:
      nodeSelector:
        node-role.kubernetes.io/worker: worker
      containers:
        - image: biasoo/ruoyi-ui:4.8.5
          name: nginx
          ports:
            - containerPort: 80
          env:
            - name: TZ
              value: Asia/Shanghai

部署该服务

kubectl apply -f nginx-deploy.yaml