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;
        }
    }    

}