nginx部署vue页面

创建docker容器

docker-compose.yml

version: '3'
services:
  canteennginx:
    image: nginx:1.17.2
    container_name: canteennginx
    volumes:
      - ./nginx/mysite.template:/etc/nginx/conf.d/mysite.template
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./nginx/log/:/var/log/nginx
      - ./nginx/html/:/usr/share/nginx/html
      - /etc/localtime:/etc/localtime:ro
    restart: always
    ports:
      - "8282:8282"
    environment:
      - NGINX_HOST=foobar.com
      - NGINX_PORT=80
    command: /bin/bash -c "envsubst < /etc/nginx/conf.d/mysite.template > /etc/nginx/conf.d/default.conf && exec nginx -g 'daemon off;'"

添加nginx配置

events {
    #注意：在使用debug_connection前，需确保在执行configure时已经加入了--with-debug参数，否则不会生效。
	worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen 8282;
        charset utf-8;
        server_name canteenSystem;

        location  /  {
            #当前vue项目根目录
            root     /usr/share/nginx/html/canteenpage;
            index    index.html  index.htm;
            try_files  $uri  $uri/  /index.html;
        }
        #添加代理
        location  /prod-api  {
            client_max_body_size  20m;
            proxy_read_timeout  20000;
            proxy_pass_header  Server;
            proxy_set_header  Host  $http_host;
            proxy_redirect  off;
            proxy_set_header  X-Real-IP  $remote_addr;
            proxy_set_header  X-Scheme  $scheme;
            #后台代理地址
            proxy_pass  http://192.168.1.148:8686/;
            rewrite ^/prod-api/(.*) /$1 break;
        }

    }
}

打包好dist下文件更新到挂载目录下/nginx/html/canteenpage中即可