前端容器化部署三件套(vue3)

nginx.conf

user  root;
worker_processes  auto;

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


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    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;

    sendfile        on;
   
    keepalive_timeout  65;

    #注意这句话一定要注释掉,否则vue history路由会导致刷新的时候提示404页面找不到
    #include /etc/nginx/conf.d/*.conf;

   server {
        listen       80;
        server_name  localhost;

        gzip on;
        gzip_min_length 100;
        gzip_types text/plain text/css application/xml application/javascript;
        gzip_vary on;

        #charset koi8-r;
        access_log  /var/log/nginx/host.access.log ;
        error_log  /var/log/nginx/error.log;

        location / {
           root /usr/share/nginx/html; #配置Vue项目根路径,与
           index index.html index.html; #配置首页
           #vue history模式专用
           try_files $uri $uri/ /二级目录名/index.html; 
        }

        
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
 }
}

Dockerfile

FROM nginx

# 创建/usr/share/nginx/html/二级目录
RUN mkdir -p /usr/share/nginx/html/二级目录

# 将dist目录复制到 Docker容器中的/usr/share/nginx/html/目录下
COPY . /usr/share/nginx/html/二级目录

# 将nginx.conf文件复制到/etc/nginx/nginx.conf
COPY nginx.conf /etc/nginx/nginx.conf

RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
RUN echo 'Asia/Shanghai' >/etc/timezone

docker-compose.yml

version: "3.9"

services:
  服务名:
    build:
      context: ./
      dockerfile: Dockerfile
    image: 镜像名:latest
    ports:
      - "8041:80"
    networks:
      - abcnetwork
networks:
  abcnetwork:
    external: false
    name: abcnetwork

jenkins脚本

cd /var/lib/jenkins/workspace/命名空间/项目名
rm -rf dist/
npm install
npm run build
cp nginx.conf Dockerfile docker-compose.yml dist
cd dist
docker-compose -f docker-compose.yml  up -d --build

vite.config.js

base: '/二级目录'

router配置

history: createWebHistory("/二级目录"),