nginx 適配react-router browserRoute 路由問題

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

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

nginx 適配react-routerbrowserRoute 路由問題

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

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

location 優(yōu)先級

= 開頭表示精確匹配

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

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

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

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

/ 通用匹配，任何請求都會(huì)匹配到。

try_file 使用

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

適配react-router browserrouter配置

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

錯(cuò)誤的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;
        }

    }

錯(cuò)誤點(diǎn)

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

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

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

2. server root 配置錯(cuò)誤

解決優(yōu)先級問題后，問題依然存在。原因就是這個(gè)。root 在server和location中都有，都是配置文件開始尋找的根路徑，如果url是https://xxxx:8084/app/screen，location中的配置優(yōu)先級高于server。首先會(huì)進(jìn)入第二個(gè)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.當(dāng)然找不到，報(bào)404錯(cuò)誤。

正確的配置

    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重定向問題

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

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

但是到此還沒結(jié)束。因?yàn)闃I(yè)務(wù)需要，本層nginx前面還有一層Nginx。所以301 重定向的時(shí)候，會(huì)帶上端口號。導(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;
        }
    }

GPU云服務(wù)器云服務(wù)器適配問題 ios10的適配問題 browserRoute react-router

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/106915.html

發(fā)表評論

登陸后可評論

0條評論

codeGoogle

男|高級講師

我要關(guān)注我要私信

TA的文章

#干貨盤點(diǎn)#JSON-C API

閱讀 2338·2021-11-24 09:38
小馬哥Java項(xiàng)目實(shí)戰(zhàn)訓(xùn)練營極客大學(xué)

閱讀 2736·2021-11-22 14:44
George Datacenter：E3-1220 V5/16G/1T HDD/10T/1Gbps/

閱讀 1185·2021-07-29 13:48
CSS揭秘之《多重邊框》

閱讀 2642·2019-08-29 13:20
字體顯示方案

閱讀 1142·2019-08-29 11:08
nginx 適配react-router browserRoute 路由問題

閱讀 2092·2019-08-26 10:58
Session ,Cookie ,webStorage的區(qū)別

閱讀 1291·2019-08-26 10:55
Number( )、parseInt( )、parseFloat( )的用法及區(qū)別

閱讀 3184·2019-08-26 10:39

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

nginx 適配react-router browserRoute 路由問題

相關(guān)文章

**項(xiàng)目實(shí)踐：從react-router v3遷移到v4**

**[ 一起學(xué)React系列 -- 11 ] React-Router4 (1)**

react-router v5.x 源碼分析和理解 SPA router 的原理

React-router v4 路由配置方法

Router入門0x204: react-route簡單栗子

發(fā)表評論

0條評論

codeGoogle

男|高級講師

TA的文章

#干貨盤點(diǎn)#JSON-C API

小馬哥Java項(xiàng)目實(shí)戰(zhàn)訓(xùn)練營極客大學(xué)

George Datacenter：E3-1220 V5/16G/1T HDD/10T/1Gbps/

CSS揭秘之《多重邊框》

字體顯示方案