起因:
最近遇到一个问题,在前端用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
标签:vue,http,header,部署,server,nginx,set,proxy From: https://www.cnblogs.com/hanjun0612/p/18533138