Nginx+Docker部署vue的dist

编写nginx配置

server {
    listen       80;
    server_name  localhost;
    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        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;
   # }
    location /api/ {  # 匹配api接口，进行转发配置
        #rewrite  /api/(.*)  /$1  break;
        proxy_pass http://45.647.88.99:8000;  #这是重点，转发到你的后端接口
    }

}

编写dockerfile

# 设置基础镜像
FROM nginx
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
#用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

docker-compose.yml

version: "3"
services:
  zero_nginx:
    container_name: my_nginx_image
    build: .
    volumes:
      - /home/projects/vul_dashboard/new_nainx/nginx.conf:/etc/nginx/conf.d/default.conf
      - /home/projects/vul_dashboard/new_nainx/dist/:/usr/share/nginx/html/
    ports:
      - '9002:80'
    networks:
      - zero_network
    environment:
      TZ: "Asia/Shanghai"
    restart: always

networks:
    zero_network:
      external: true

参考链接：https://www.jianshu.com/p/b8b85527be17
https://www.cnblogs.com/skyflask/p/10068420.html
配置参考https://www.nginx.cn/76.html

补充：

配置访问静态资源  
 location  ~ .*\.(gif|jpg|jpeg|png|css|js)$ {
            root  /home/filterable-gallery/;#指定图片存放路径
        }