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

本文介绍: 2个前端项目，如何通过一个端口来访问，8001 端口代理 A项目，8002代理B项目。访问8001,匹配到/app–h5 这个路径，就自动转发到8002 的B项目。剩余的所有路径，默认走8001的A项目。

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

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

服务器配置

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

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;

}

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;

    }
}

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

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

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

所以，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，并保留原始的路径和参数。