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;#负载vueupstream vueapp {server 127.0.0.1:81 weight=1;server 127.0.0.1:82 weight=1;}    # 负载 后端apiupstream k2_api {ip_hash;# gateway 地址server localhost:9600;}#节点1server {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 路径}}#节点2server {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