nginx 部署2个相同的vue

起因：

最近遇到一个问题，在前端用nginx 部署 vue，

发现如果前端有改动，如果不适用热更新，而是直接复制项目过去，会404

因此想到用nginx 负载两套相同vue项目，然后一个个复制vue项目就可以了。

 

废话不多：

一 在nginx下创建两个vue的路径

 

二 修改nginx的配置文件

worker_processes  1;
 
#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;
 
    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;
 
    #负载vue
    upstream vueapp {
        server 127.0.0.1:81 weight=1;
        server 127.0.0.1:82 weight=1;
    }    
 
    # 负载 后端api
    upstream k2_api {
        ip_hash;
        # gateway 地址
        server localhost:9600;
    }
 
    #节点1
    server {
        listen       81;
        server_name  127.0.0.1;
        location / {
            root /usr/local/nginx/html;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
        location /prod-api/ {
            proxy_set_header Host $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;
            # websocket参数
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://k2_api/;         # java api 路径
        }
    }
   
    #节点2
    server {
        listen       82;
        server_name  127.0.0.1;
        location / {
            root /usr/local/nginx/html2;
            try_files $uri $uri/ /index.html index  index.html index.htm;
        }
        location /prod-api/ {
            proxy_set_header Host $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;
            # websocket参数
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://k2_api/;         # java api 路径
        }
    }
 
 
    #反向代理负载均衡
    server {
        listen       80;
        server_name  127.0.0.1;
        location / {
            proxy_pass http://vueapp/;
            proxy_set_header    Host                $http_host;
            proxy_set_header    X-Real-IP           $remote_addr;
            proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
            proxy_set_header    X-NginX-Proxy       true;
        }
    }
}

总结：

① 配置2个server节点，

listen 分别为 81,82

root 分别为： /usr/local/nginx/html; /usr/local/nginx/html2;

 

② 配置upstream vueapp

负载2个server节点

 

③ 配置反向代理80端口

通过80端口，反向代理vueapp

 

④ /nginx/sbin目录下

运行：./nginx -s reload