nginx 適配react-router browserRoute 路由問題

codeGoogle 發(fā)布于2019-08-26 10:58 / 2045人閱讀

摘要：適配路由問題絕對能用的一篇配置，文末直接有文件，伸手黨直接拿走本文環(huán)境比較復(fù)雜，首先兩層轉(zhuǎn)發(fā)，并且訪問路徑也不是根路徑。不對做編碼，因此請求為，可以被規(guī)則匹配到注意是空格。配置錯誤解決優(yōu)先級問題后，問題依然存在。導(dǎo)致找不到請求。

nginx 適配react-routerbrowserRoute 路由問題

絕對能用的一篇nginx配置，文末直接有文件，伸手黨直接拿走

本文環(huán)境比較復(fù)雜，首先兩層nginx轉(zhuǎn)發(fā)，并且訪問路徑也不是根路徑。加上對nginx一知半解，各路搜索一看，全程懵逼。最終沒有一個能用的。最后還是靠同事幫助，文檔大法結(jié)束加班。本文知識點：location優(yōu)先級，nginx資源文件尋找方式，rewrite 重定向問題。

location 優(yōu)先級

= 開頭表示精確匹配

^~ 開頭表示uri以某個常規(guī)字符串開頭，理解為匹配 url路徑即可。nginx不對url做編碼，因此請求為/static/20%/aa，可以被規(guī)則^~ /static/ /aa匹配到（注意是空格）。以xx開頭

~ 開頭表示區(qū)分大小寫的正則匹配???????????????????? 以xx結(jié)尾

~* 開頭表示不區(qū)分大小寫的正則匹配??????????????? 以xx結(jié)尾

!~和!~*分別為區(qū)分大小寫不匹配及不區(qū)分大小寫不匹配的正則

/ 通用匹配，任何請求都會匹配到。

try_file 使用

當用戶請求 http://localhost/example 時，這里的 $uri 就是 /example。
try_files 會到硬盤里嘗試找這個文件。如果存在名為 /$root/example（其中 $root 是項目代碼安裝目錄）的文件，就直接把這個文件的內(nèi)容發(fā)送給用戶。
顯然，目錄中沒有叫 example 的文件。然后就看 $uri/，增加了一個 /，也就是看有沒有名為 /$root/example/ 的目錄。
又找不到，就會 fall back 到 try_files 的最后一個選項 /index.php，發(fā)起一個內(nèi)部 “子請求”，也就是相當于 nginx 發(fā)起一個 HTTP 請求到 http://localhost/index.php。

適配react-router browserrouter配置

首先文件存放路徑是子目錄 /usr/local/services/app_logical_server-1.0/bin/app/screen
訪問路徑是 https://example.com/app/screen/

錯誤的nginx 配置

    server {
        listen       8080;
        root  /usr/local/services/app_logical_server-1.0/bin/app/screen;
        location ~* .(gif|jpg|png|js|css)$ {
          root /usr/local/services/app_logical_server-1.0/bin/app/screen/;
        }
        location ^~ /app/screen {
          root   html;
          index  index.html;
          try_files $uri $uri/ /index.html;
        }

    }

錯誤點

錯誤現(xiàn)象是index.html可以找到，但是index.html中的js寫的是相對路徑，導(dǎo)致所有的靜態(tài)資源文件也進入了第二個location，導(dǎo)致頁面白屏。
分析如下。

1.優(yōu)先級問題

首先匹配 =，其次匹配^~, 其次是按文件中順序的正則匹配，最后是交給 / 通用匹配。當有匹配成功時候，停止匹配，按當前匹配規(guī)則處理請求。
~* 的優(yōu)先級低于 ^~所以第一個配置靜態(tài)資源文件雖然寫在前面，還是不會進去的。

2. server root 配置錯誤

解決優(yōu)先級問題后，問題依然存在。原因就是這個。root 在server和location中都有，都是配置文件開始尋找的根路徑，如果url是https://xxxx:8084/app/screen，location中的配置優(yōu)先級高于server。首先會進入第二個location中,尋找文件，文件路徑是root和域名后面的路徑的拼接，例如：訪問路徑是 https://example.com/app/screen/umi.js，server root 為 /usr/local/services/app_logical_server-1.0/bin/app/screen。 nginx尋找文件的地址為/usr/local/services/app_logical_server-1.0/bin/app/screen/app/screen/umi.js.當然找不到，報404錯誤。

正確的配置

    server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location ~* .(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }

不帶/的url重定向問題

當前配置還有個問題，就是末尾不帶斜杠時，index.html可以加載到，但是html中的資源文件寫的相對路徑，當url 為https://example/app/screen時，相對路徑為https://example/app，以js為例，https://example/app/umi.js,所以報404錯誤。
解決方案為，利用location優(yōu)先級，再加一個 = /app/screen 的location 。

    location = /sa/screen {
        rewrite ^([^.]*[^/])$ $1/ permanent;
        port_in_redirect off;
    }

但是到此還沒結(jié)束。因為業(yè)務(wù)需要，本層nginx前面還有一層Nginx。所以301 重定向的時候，會帶上端口號。導(dǎo)致找不到請求。port_in_redirect off; 配置可以解決此問題

最終版完美配置

server {
        listen       8084;
        root  /usr/local/services/app_logical_server-1.0/bin/;
        location = /sa/screen {
            rewrite ^([^.]*[^/])$ $1/ permanent;
            port_in_redirect off;
        }
        location ~* .(gif|jpg|png|js|css)$ {
            root  /usr/local/services/app_logical_server-1.0/bin;
        }
        location ~* /app/screen {
          #try_files $uri $uri/ /usr/local/services/app_logical_server-1.0/bin/app/screen/index.html;
          root  /usr/local/services/app_logical_server-1.0/bin;
          try_files /app/screen/index.html =404;
        }
    }