起因:
最近遇到一个问题,在前端用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