服务器上一个域名对应多个前端项目的nginx转发配置

2023-09-13 15:38:04

场景:

当有两个前端项目A,B的时候,项目A(对应端口8000)和项目B(对应端口8001)分别部署在服务器的不同位置,通过服务器ip+端口都能正常访问单独的项目A和项目B;现在要求两个项目共用一个域名~~也就是说访问http://10.111.182.xxx:8000的时候默认访问项目A的资源,访问http://10.111.182.xxx:8000/pages的时候自动代理到项目B的资源

业务场景:h5嵌入原生开发,有多套独立的h5,要求嵌入原生的域名不分不变,但是路由发生变化的时候代理到不同的独立h5项目,也就是2个前端项目,如何通过一个端口来访问

服务器配置

部署单个项目并为其配置单独的ngx转发

1.将打包后的静态资源放置服务器上,位置自己选择但是记住路径

2.配置nginx;通常在服务器上的/etc/nginx/conf.d

新建一个后缀为.conf的文件

server {
    #指定服务器监听的端口号,这里是 8001
    listen 8001;
    #定义服务器名称,在这里是 localhost。
    server_name localhost;
    # 根请求会指向的页面,指定服务器的根目录,将请求映射到该目录下的文件。
    root /home/wwwroot/testB; 
    #在响应头中添加跨域请求的允许访问源。这里的配置允许来自任何来源的请求。
    add_header 'Access-Control-Allow-Origin' '*'; 
    # 根请求会指向的页面定义请求路径为根路径时的处理逻辑。使用 try_files 指令尝试按照顺序查找            
     对应的文件,如果找不到则返回 index.html。
	location / {
            try_files $uri $uri/ /index.html;	    
        }
     # 开启gzip 压缩
    gzip on;
    # 设置gzip所需的http协议最低版本 (HTTP/1.1, HTTP/1.0)
    gzip_http_version 1.1;
    # 设置压缩级别,压缩级别越高压缩时间越长  (1-9)
    gzip_comp_level 4;
    # 设置压缩的最小字节数, 页面Content-Length获取
    gzip_min_length 1000;
    # 设置压缩文件的类型  (text/html)
    gzip_types text/plain application/javascript text/css;

}

 到此B项目的部署完成可以用ip+端口进行访问

接下来要在A项目的ngxin配置文件中进行代理的转发,使在访问A项目的遇到/pages就将资源代理到B项目

server {
    listen 8000;
    server_name localhost;

    root /home/wwwroot/test-A;
 #遇到、pages转项目B
    location ~ ^/pages/.  {
        proxy_buffer_size                       128k;
        proxy_buffers                           32 32k;
        proxy_busy_buffers_size                 128k;
        proxy_set_header   X-Forwarded-Proto    $scheme;
        proxy_set_header   Host                 $http_host;
        proxy_set_header   X-Real-IP            $remote_addr;
        proxy_pass                                      
   http://1xx.1xx.1.xx:8001$1$is_args$args;
    }
#核心对项目B的静态资源的代理
   location ~ ^/static/  {
        proxy_buffer_size                       128k;
        proxy_buffers                           32 32k;
        proxy_busy_buffers_size                 128k;
        proxy_set_header   X-Forwarded-Proto    $scheme;
        proxy_set_header   Host                 $http_host;
        proxy_set_header   X-Real-IP            $remote_addr;
        proxy_pass                              http://1xx.1xx.1.xx:8001$request_uri;
    }
      
#默认访问项目A
        location / {
	
	       try_files $uri $uri /index.html$is_args$query_string;

    }
}
   

资源目录如上。当在进行转发的时候会发现nginx代理转发后报错,无法显示页面。原因是指找到了index.html文件,没有对静态资源js,css等进行匹配,所以这部分资源并没有代理到,所以访问不了。出现在配置nginx的时候,proxy_pass 单独访问可以访问,配置后代理不过去报错 Unexpected token '<'。

解决办法是找到没有代理到的资源将其加入ngx代理匹配;例如

 location ~ ^/static/  {
        proxy_buffer_size                       128k;
        proxy_buffers                           32 32k;
        proxy_busy_buffers_size                 128k;
        proxy_set_header   X-Forwarded-Proto    $scheme;
        proxy_set_header   Host                 $http_host;
        proxy_set_header   X-Real-IP            $remote_addr;
        proxy_pass                              http://1xx.1xx.1.xx:8001$request_uri;
    }

如果资源目录是其他的情况的就看是什么资源没有代理到,就去配置一个

核心调试:浏览器打开,看资源请求是否成功,未成功的是什么资源分析未成功原因,是为代理到还是资源本身不存在,一般来说是没有请求到资源,然后对对应的资源进行代理配置

tip:参数详解

在 Nginx 的配置文件中,location ~ ^/pages/. 是一个正则表达式匹配规则,它匹配以 “/pages/” 开头的 URL 路径。

而 proxy_pass http://1xx.1xx.1.xxx:8001$1$is_args$args; 是将匹配到的请求代理到目标服务器的指令。其中的 $1$is_args$args 是一个变量,表示将匹配到的路径传递给代理服务器。

具体解释如下:

  • $1 表示正则表达式 ^/pages/(.*) 中的捕获组,即匹配到的路径片段。
  • $is_args 表示一个内置变量,如果请求包含参数则值为 “?”,否则为空。
  • $args 表示一个内置变量,保存请求中的参数部分(例如 ?key=value)。

所以,proxy_pass 配置中的 $1$is_args$args 的作用是将匹配到的路径片段、参数部分传递给代理目标的 URL。最终形成类似 http://1xx.1xx.1.xxx:8001/pages/abc?key=value 的代理请求。

如果在 proxy_pass 配置中没有 $1,则代表没有使用正则表达式捕获组来获取匹配到的路径片段。在这种情况下,proxy_pass 配置将直接代理原始请求的完整 URL(包括路径、参数、协议等)到目标服务器。

例如,假设原始请求的 URL 是 http://example.com/pages/abc?key=value,而 proxy_pass 配置为 proxy_pass http://1xx.1xx.1.xxx:8001;,那么代理服务器将会将请求发送到 http://1xx.1xx.1.xxx:8001,并保留原始的路径和参数。

需要注意的是,如果没有使用正则表达式捕获组来获取路径片段,那么目标服务器将无法获取和处理原始请求的路径信息。

在 Nginx 中,$request_uri 是一个变量,它包含了当前请求中的完整原始 URI,包括路径和参数。当使用 proxy_pass 指令进行代理时,可以将 $request_uri 添加到目标 URL 中,以便将完整的原始 URI 发送到目标服务器。

在你提供的配置中,proxy_pass 指令使用了 http://192.168.1.252:8002$request_uri; 这个目标 URL。这意味着对于每个请求,Nginx 会将完整的原始 URI 添加到目标 URL 后面,以便代理服务器可以接收完整的请求路径和参数。

例如,如果发起的请求是 http://your-domain.com/static/js/app.js?key=value,那么 proxy_pass 将会将请求代理到 http://192.168.1.252:8002/static/js/app.js?key=value

通过使用 $request_uri 变量,可以确保代理请求中包含原始 URI 的所有信息,以便目标服务器正确处理和响应请求。

更多推荐

Golang使用Channel

1.使用协程packagemain//使用协程import("fmt""strconv""time")functest(){fori:=1;i<=10;i++{fmt.Println("test()helloworld"+strconv.Itoa(i))time.Sleep(time.Second)}}//主线程和te

开源与区块链:去中心化的未来

🌷🍁博主猫头虎带您GotoNewWorld.✨🍁🦄博客首页——猫头虎的博客🎐🐳《面试题大全专栏》文章图文并茂🦕生动形象🦖简单易学!欢迎大家来踩踩~🌺🌊《IDEA开发秘籍专栏》学会IDEA常用操作,工作效率翻倍~💐🌊《100天精通Golang(基础入门篇)》学会Golang语言,畅玩云原生,走遍大

ddns有什么作用?无公网IP怎么将内网IP端口映射外网访问

DDNS是什么?DDNS英文全称DynamicDomainNameServer,中文含义是指动态域名服务。很多普通路由器或者智能路由器设置中,都可以找到DDNS(动态DNS)功能。上面的解释可能过于专业,其实DDNS通俗点说,它是一种将用户的动态IP地址映射到一个固定的域名解析服务上的功能,因为现在目前大多数路由器拨号

如何将内网ip映射到外网?快解析内网穿透

关于内网ip映射到外网的问题,就是网络地址转换,私网借公网。要实现这个,看起来说得不错,实际上是有前提条件的。要实现内网ip映射到外网,首先要有一个固定的公网IP,可以从运营商那里得到。当你得到公网IP后,你的私网有可能有多台主机,都要挂到公网上,这时候会用到DMZ。比如,你有一个公网IP,也可能是通过快解析等得到,你

R语言绘制PCA双标图、碎石图、变量载荷图和变量贡献图

1、原论文数据双标图代码:setwd("D:/Desktop/0000/R")#更改路径#导入数据df<-read.table("Inputdata.csv",header=T,sep=",")#-----------------------------------#所需的包:packages<-c("ggplot2"

网络监控应用程序

在过去的几十年中,网络监控应用稳步发展,以适应不断变化的市场需求和期望。多年来,停机成本飙升,客户对停机的耐心比以往任何时候都低,不仅仅是正常运行时间,正常运行时间的质量也变得很重要。另一个发展是网络的复杂性日益增加。现代网络监控应用程序必须优化云原生、基于云的和整合环境的性能。对现代网络监控软件的期望网络监控工具有望

数据结构和算法(7):图应用

双连通分量:判定准则考查无向图G。若删除顶点v后G所包含的连通域增多,则v称作切割节点或关节点。不含任何关节点的图称作双连通图。任一无向图都可视作由若干个极大的双连通子图组合而成,这样的每一子图都称作原图的一个双连通域。如何才能找出图中的关节点呢?1.蛮力算法首先,通过BFS或DFS搜索统计出图G所含连通域的数目;然后

C++基础-类和对象(上)

文章目录前言一、面向对象和面向过程1.面向对象(OOP)概述2.面向对象和面向过程的区别二、类的引入和定义1.类的引入2.类的基本思想和定义1.类的思想2.封装概念1.概念:2.作用:1.类的定义三、类的特性1.访问限定符及作用域1.类的访问限定符2.类的作用域2.类的实例化及大小1.类的实例化2.类的大小3.this

javabasic

JAVABasic一、计算机基础1.计算机组成2.进制的概念2.1二进制的存储计算机不管是内存还是硬盘,都是以二进制的形式存储。如同一张巨大的表格,里面都是由0和1组成。二进制:逢2进1基数为2,数值部分用不同的数字,0、1来表示。(逢2进1便是没有2的概念,遇到2就像前面进一位)比如2,看到2向前进1,2用二进制表示

nginx配置指南

nginx.conf配置找到Nginx的安装目录下的nginx.conf文件,该文件负责Nginx的基础功能配置。配置文件概述Nginx的主配置文件(conf/nginx.conf)按以下结构组织:配置块功能描述全局块与Nginx运行相关的全局设置events块与网络连接有关的设置http块代理、缓存、日志、虚拟主机等

OpenCV实战(32)——使用SVM和定向梯度直方图执行目标检测

OpenCV实战(32)——使用SVM和定向梯度直方图执行目标检测0.前言1.HOG图像特征2.交通标志分类2.1SVM模型2.2SVM原理3.HOG可视化4.人物检测5.完整代码小结系列链接0.前言本节中,我们将介绍机器学习方法支持向量机(SupportVectorMachine,SVM),它可以根据训练数据得到准确

热文推荐