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.htmllocation / {root   html;index  index.html index.htm Default.aspx; proxy_pass http://merchantsweb;}#移动端 页面地址带有/mobileApp--http://172.17.0.100:8078/mobileApp/index.htmllocation /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.jslocation ~ .*\.(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/ 处理，因为 ^~ 的优先级更高，所以到达不了这一条正则