場景：

當(dāng)有兩個前端項目A,B的時候，項目A（對應(yīng)端口8000）和項目B（對應(yīng)端口8001）分別部署在服務(wù)器的不同位置，通過服務(wù)器ip+端口都能正常訪問單獨的項目A和項目B；現(xiàn)在要求兩個項目共用一個域名~~也就是說訪問http://10.111.182.xxx:8000的時候默認(rèn)訪問項目A的資源，訪問http://10.111.182.xxx:8000/pages的時候自動代理到項目B的資源

業(yè)務(wù)場景：h5嵌入原生開發(fā)，有多套獨立的h5，要求嵌入原生的域名不分不變，但是路由發(fā)生變化的時候代理到不同的獨立h5項目，也就是2個前端項目，如何通過一個端口來訪問

服務(wù)器配置

部署單個項目并為其配置單獨的ngx轉(zhuǎn)發(fā)

1.將打包后的靜態(tài)資源放置服務(wù)器上，位置自己選擇但是記住路徑

2.配置nginx;通常在服務(wù)器上的/etc/nginx/conf.d

新建一個后綴為.conf的文件

server {
    #指定服務(wù)器監(jiān)聽的端口號，這里是 8001
    listen 8001;
    #定義服務(wù)器名稱，在這里是 localhost。
    server_name localhost;
    # 根請求會指向的頁面，指定服務(wù)器的根目錄，將請求映射到該目錄下的文件。
    root /home/wwwroot/testB; 
    #在響應(yīng)頭中添加跨域請求的允許訪問源。這里的配置允許來自任何來源的請求。
    add_header 'Access-Control-Allow-Origin' '*'; 
    # 根請求會指向的頁面定義請求路徑為根路徑時的處理邏輯。使用 try_files 指令嘗試按照順序查找            
     對應(yīng)的文件，如果找不到則返回 index.html。
	location / {
            try_files $uri $uri/ /index.html;	    
        }
     # 開啟gzip 壓縮
    gzip on;
    # 設(shè)置gzip所需的http協(xié)議最低版本 （HTTP/1.1, HTTP/1.0）
    gzip_http_version 1.1;
    # 設(shè)置壓縮級別，壓縮級別越高壓縮時間越長  （1-9）
    gzip_comp_level 4;
    # 設(shè)置壓縮的最小字節(jié)數(shù)， 頁面Content-Length獲取
    gzip_min_length 1000;
    # 設(shè)置壓縮文件的類型  （text/html)
    gzip_types text/plain application/javascript text/css;

}

?到此B項目的部署完成可以用ip+端口進(jìn)行訪問

接下來要在A項目的ngxin配置文件中進(jìn)行代理的轉(zhuǎn)發(fā)，使在訪問A項目的遇到/pages就將資源代理到B項目

server {
    listen 8000;
    server_name localhost;

    root /home/wwwroot/test-A;
 #遇到、pages轉(zhuǎn)項目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的靜態(tài)資源的代理
   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;
    }
      
#默認(rèn)訪問項目A
        location / {
	
	       try_files $uri $uri /index.html$is_args$query_string;

    }
}
   

資源目錄如上。當(dāng)在進(jìn)行轉(zhuǎn)發(fā)的時候會發(fā)現(xiàn)nginx代理轉(zhuǎn)發(fā)后報錯，無法顯示頁面。原因是指找到了index.html文件，沒有對靜態(tài)資源js，css等進(jìn)行匹配，所以這部分資源并沒有代理到，所以訪問不了。出現(xiàn)在配置nginx的時候，proxy_pass 單獨訪問可以訪問，配置后代理不過去報錯 Unexpected token '<'。

解決辦法是找到?jīng)]有代理到的資源將其加入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;
    }

如果資源目錄是其他的情況的就看是什么資源沒有代理到，就去配置一個

核心調(diào)試：瀏覽器打開，看資源請求是否成功，未成功的是什么資源分析未成功原因，是為代理到還是資源本身不存在，一般來說是沒有請求到資源，然后對對應(yīng)的資源進(jìn)行代理配置

tip：參數(shù)詳解

在 Nginx 的配置文件中，location ~ ^/pages/.?是一個正則表達(dá)式匹配規(guī)則，它匹配以 “/pages/” 開頭的 URL 路徑。

而?proxy_pass http://1xx.1xx.1.xxx:8001$1$is_args$args;?是將匹配到的請求代理到目標(biāo)服務(wù)器的指令。其中的?$1$is_args$args?是一個變量，表示將匹配到的路徑傳遞給代理服務(wù)器。

具體解釋如下：

• $1?表示正則表達(dá)式?^/pages/(.*)?中的捕獲組，即匹配到的路徑片段。
• $is_args?表示一個內(nèi)置變量，如果請求包含參數(shù)則值為 “?”，否則為空。
• $args?表示一個內(nèi)置變量，保存請求中的參數(shù)部分（例如??key=value）。

所以，proxy_pass?配置中的?$1$is_args$args?的作用是將匹配到的路徑片段、參數(shù)部分傳遞給代理目標(biāo)的 URL。最終形成類似?http://1xx.1xx.1.xxx:8001/pages/abc?key=value?的代理請求。

如果在?proxy_pass?配置中沒有?$1，則代表沒有使用正則表達(dá)式捕獲組來獲取匹配到的路徑片段。在這種情況下，proxy_pass?配置將直接代理原始請求的完整 URL（包括路徑、參數(shù)、協(xié)議等）到目標(biāo)服務(wù)器。

例如，假設(shè)原始請求的 URL 是?http://example.com/pages/abc?key=value，而?proxy_pass?配置為?proxy_pass http://1xx.1xx.1.xxx:8001;，那么代理服務(wù)器將會將請求發(fā)送到?http://1xx.1xx.1.xxx:8001，并保留原始的路徑和參數(shù)。

需要注意的是，如果沒有使用正則表達(dá)式捕獲組來獲取路徑片段，那么目標(biāo)服務(wù)器將無法獲取和處理原始請求的路徑信息。

在 Nginx 中，$request_uri?是一個變量，它包含了當(dāng)前請求中的完整原始 URI，包括路徑和參數(shù)。當(dāng)使用?proxy_pass?指令進(jìn)行代理時，可以將?$request_uri?添加到目標(biāo) URL 中，以便將完整的原始 URI 發(fā)送到目標(biāo)服務(wù)器。

在你提供的配置中，proxy_pass?指令使用了?http://192.168.1.252:8002$request_uri;?這個目標(biāo) URL。這意味著對于每個請求，Nginx 會將完整的原始 URI 添加到目標(biāo) URL 后面，以便代理服務(wù)器可以接收完整的請求路徑和參數(shù)。

例如，如果發(fā)起的請求是?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 的所有信息，以便目標(biāo)服務(wù)器正確處理和響應(yīng)請求。文章來源地址http://www.zghlxwxcb.cn/news/detail-752974.html

到了這里，關(guān)于服務(wù)器上一個域名對應(yīng)多個前端項目的nginx轉(zhuǎn)發(fā)配置的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！