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文件内查看 关联路径,可修改
(Reac
t:修改package.json
文件内的homepage
:可更改路径
))下的图片会被 location ^~ /images/ 处理,因为 ^~ 的优先级更高,所以到达不了这一条正则