nginx + 前后端分离 负载均衡

背景:项目是前后端分离,单节点状态下用nginx挂载前端,前端通过vue里的baseUrl访问后端。考虑对前端和后端都使用负载均衡,部署两套nginx+vue+后端单节点,用一台独立的nginx做代理+负载均衡。

实验环境nginx版本1.18,环境配置:

192.168.1.104:8801 和 192.168.1.104:8802 是两套单节点服务,通过8801或者8802都可以正确访问到应用,
通过192.168.1.104:8888服务,用8888端口进行统一代理和负载均衡。
存在问题:
1、缺省的轮询没有效果,多次刷新页面后才会切换服务,感觉是随机,不知道是否有配置或者操作上的问题。
2、火狐浏览器经常会出现“Uncaught SyntaxError: expected expression, got '<'”的错误,然后页面无法打开,发现是无法加载静态资源。
   谷歌浏览器也出现过同样的问题“Uncaught SyntaxError: Unexpected token '<'”,后来莫名的消失。  
3、谷歌和火狐浏览器通过单节点访问都正常。一旦两个浏览器通过代理8888端口访问后出现Uncaught SyntaxError: Unexpected token '<'错误,就会一直访问异常。
问题已经解决:原因是前端页面打包了两次进行部署,打包文件是以hash值命名的,所以两个前端的静态资源(js,css)文件名不同,
而nginx在轮询的状态下访问资源就会出现找不到的情况,然后目标js被当做text/html来处理,所以出现错误。
定位到错误后,解决方式就比较多了,最容易的方式是采用ip_hash的均衡策略。
#user  nobody;
worker_processes  1;


#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;
   
    keepalive_timeout  65;
      

    upstream balancer {    
ip_hash; server 192.168.1.104:8801 weight=1 max_fails=2 fail_timeout=30s; server 192.168.1.104:8802 weight=1 max_fails=2 fail_timeout=30s; } server { listen 8888; server_name 192.168.1.104; location / { proxy_pass http://balancer; proxy_http_version 1.1; proxy_next_upstream http_502 http_504 error timeout invalid_header; } } server { listen 8801; server_name 192.168.1.104; location / { root html/dist8001; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } server { listen 8802; server_name 192.168.1.104; location / { root html/dist8002; index index.html index.htm; try_files $uri $uri/ /index.html; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }