k8s 部署Ruoyi-Vue-Plus之vue打包镜像

在这里插入图片描述

在这篇文章中，解释如何通过容器化（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>

优点:

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

缺点:

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

4.部署yaml

创建nginx-deploy.yaml

apiVersion: v1
kind: Service
metadata:labels:app: nginx-servicename: nginx-servicenamespace: ruoyi
spec:ports:- nodePort: 30088port: 80protocol: TCPtargetPort: 80selector:app: nginx-podtype: NodePort
---
apiVersion: apps/v1
kind: Deployment
metadata:labels:app: nginx-deployname: nginx-deploynamespace: ruoyi
spec:replicas: 1selector:matchLabels:app: nginx-podstrategy: {}template:metadata:labels:app: nginx-podnamespace: ruoyispec:nodeSelector:node-role.kubernetes.io/worker: workercontainers:- image: biasoo/ruoyi-ui:4.8.5name: nginxports:- containerPort: 80env:- name: TZvalue: Asia/Shanghai