Docker deploys VUE front-end project and mirror version deployment project through nginx (intranet and extranet steps)

1: Front-end deployment process

1. Preparation materials:

Put the following (except nginx image) into a new folder

1. front-end dist package
2. default.conf configuration file
3. docker-compose.yml configuration
4. Dockerfile packaging configuration
5. nginx mirror

default.conf

Note:
proxy_pass http://192.168.1.166:9999;
address must be a hardcoded server address

server {
    
    
    listen 80;
    server_name localhost;

    client_max_body_size 5M;

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

    # 后端服务入口：注意维护新增微服务，gateway 路由前缀
    location ~* ^/(code|auth|admin|gen|inst|order|project) {
    
    
       proxy_pass http://192.168.1.166:9999;
       #proxy_set_header Host $http_host;
       proxy_connect_timeout 60s;
       proxy_send_timeout 60s;
       proxy_read_timeout 60s;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
       proxy_set_header X-Forwarded-Proto http;
    }
    # 避免端点安全问题
    if ($request_uri ~ "/actuator"){
    
    
        return 403;
    }

}

docker-compose.yml

version: '3'
services:

  admin-ui:
    image: admin-ui #镜像名称
    privileged: true
    restart: always
    container_name: admin-ui #容器名称
    networks:
      - pig_default
    external_links:
      - pig-gateway
    ports:
      - 80:80

# 加入到后端网络， 默认为 pig_default  | docker network ls   查看
networks:
  pig_default:
    external: true

Dockerfile

Note:
FROM admin-nginx:latest
must be the nginx mirror name

FROM admin-nginx:latest
MAINTAINER admin # 维护者信息

# 将项目根目录下dist文件夹下的所有文件复制到镜像中 /usr/share/nginx/html/ 目录下
COPY admin-ui/ /usr/share/nginx/html/
COPY default.conf /etc/nginx/conf.d/default.conf

2. Start deployment

1. Enter the folder

cd /home/hc

2. Package the front-end image

docker build -t admin-ui .

3. Start the container

docker run -d -p 80:80 --name admin-ui admin-ui

4. Start successfully

Reference: Docker image + Nginx configuration deployment Vue project

Mirror version deployment process:

Reference: Mirror packaging

1. The original server image packaging:

1. Prepare the images and folders that need to be packaged.
2. Package: docker save -o admin-ui.tar admin-ui (nginx needs to be packaged and put on it if deployed through nginx)

2. Just put the packaged image on the new server

By decompressing the image command docker load <

3. Mirror deployment