React nginx配置,一个端口代理多个项目（转发后找不到CSS，JS及图片资源问题解决）

场景：
nginx 配置负载均衡，甲方只提供一个端口，一个域名地址
方法：
一个端口一个域名匹配多个应用

方法一：
依靠设备浏览器区分:
使用UserAgent头来识别用户的客户端,
CDN监测vary头的信息，如果内容不一致就缓存不同的内容，如果头信息一致才会缓存覆盖

vary头需要在源站添加，即在nginx中配置代理时进行添加，配置语句如下：

add_header Vary "Accept-Encoding, User-Agent";

根据头信息区分跳转
已经携带了请求头，对头信息的终端类型进行判断即可，如果符合终端类型则跳转到手机页面，不符合则跳转到PC页面

if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry|iPhone|Android))  {
      root /xxxxxx;
}

详情讲解-链接
如下，案例：

    #PC端
    upstream merchantsweb{
			 server 172.17.x.11:8096 weight=20;
			 server 172.17.x.22:8096 weight=1;
        }
    #移动端
    upstream merchantswebapp{
			 server 172.17.x.11:8094 weight=20;
             server 172.17.x.22:8094 weight=1;
        }    
    server {
        listen       8078;
        server_name  172.17.0.100;
       
        #方法一
        location / {
            root   html;
            index  index.html index.htm Default.aspx; 
            add_header Vary "Accept-Encoding, User-Agent";
            #判断是否为手机端
              if ($http_user_agent ~* (mobile|nokia|iphone|ipad|android|samsung|htc|blackberry|iPhone|Android))  {
                  proxy_pass http://merchantswebapp;
               }
            proxy_pass http://merchantsweb;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

方法二：
使用正则区分

    #PC端
    upstream merchantsweb{
			 server 172.17.x.11:8096 weight=20;
			 server 172.17.x.22:8096 weight=1;
        }
    #移动端
    upstream merchantswebapp{
			 server 172.17.x.11:8094 weight=20;
             server 172.17.x.22:8094 weight=1;
        }    
    server {
        listen       8078;
        server_name  172.17.0.100;

        #方法二
        #判断路径  所有
        # pc端 http://172.17.0.100:8078
        # 移动端 http://172.17.0.100:8078/mobileApp/index.html
        location / {
            root   html;
            index  index.html index.htm Default.aspx; 
            proxy_pass http://merchantsweb;
        }
        
        #移动端 页面地址带有/mobileApp--http://172.17.0.100:8078/mobileApp/index.html
        location /mobileApp {
            root   html;
            index  index.html index.htm Default.aspx; 
            proxy_pass http://merchantswebapp;
        }
        
        # pc端 资源文件路径带有/merchants.ams.web--http://172.17.0.100:8078/merchants.ams.web/static/xxxx.js
        # ^~ 优先级高于~ .*
        location ^~ /merchants.ams.web {
           expires 12h;
           proxy_pass http://merchantsweb;
        }
        
        #所有
        # 设置js css和图片代理路径，否则前端访问找不到
        #移动端http://172.17.0.100:8078/static/xxxx.js
        location ~ .*\.(js|css)?$ {
        expires 12h;
        #移动端（根据需求来--标识）
        proxy_pass http://merchantswebapp; 
        }
        
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)?$ {
        expires 12h;
        #移动端（根据需求来--标识）
        proxy_pass http://merchantswebapp;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

正则区分-案例

Nginx配置——区分PC或手机访问不同域名以及http跳转https

重要

1、项目地址匹配了（资源文件需要查看，能否匹配）
方法：
对应不同的应用–（nginx:一个端口对应不同应用判断）
location ^~ /images/ {}
location ~* .(gif|jpg|jpeg)$ {}

• 匹配所有以 gif、jpg或jpeg 结尾的请求
  然而，所有请求 /images/ (资源文件路径，项目打包后index.html文件内查看 关联路径，可修改（React:修改package.json 文件内的homepage:可更改路径）)下的图片会被 location ^~ /images/ 处理，因为 ^~ 的优先级更高，所以到达不了这一条正则