nginx 適配react-router browserRoute 路由問題

nginx 適配react-routerbrowserRoute 路由問題

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

本文環境比較複雜，首先兩層nginx轉發，而且訪問路徑也不是根路徑。加上對nginx只知其一;不知其二，各路搜索一看，全程懵逼。最終沒有一個能用的。最後仍是靠同事幫助，文檔大法結束加班。本文知識點：location優先級，nginx資源文件尋找方式，rewrite 重定向問題。

location 優先級

• = 開頭表示精確匹配
• ^~ 開頭表示uri以某個常規字符串開頭，理解爲匹配 url路徑便可。nginx不對url作編碼，所以請求爲/static/20%/aa，能夠被規則^~ /static/ /aa匹配到（注意是空格）。以xx開頭
• ~ 開頭表示區分大小寫的正則匹配                     以xx結尾
• ~* 開頭表示不區分大小寫的正則匹配                以xx結尾
• !~和!~*分別爲區分大小寫不匹配及不區分大小寫不匹配 的正則
• / 通用匹配，任何請求都會匹配到。

try_file 使用

當用戶請求 http://localhost/example 時，這裏的 $uri 就是 /example。
try_files 會到硬盤裏嘗試找這個文件。若是存在名爲 /$root/example（其中 $root 是項目代碼安裝目錄）的文件，就直接把這個文件的內容發送給用戶。
顯然，目錄中沒有叫 example 的文件。而後就看 $uri/，增長了一個 /，也就是看有沒有名爲 /$root/example/ 的目錄。
又找不到，就會 fall back 到 try_files 的最後一個選項 /index.php，發起一個內部 「子請求」，也就是至關於 nginx 發起一個 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;
        }

    }

錯誤點

錯誤現象是index.html能夠找到，可是index.html中的js寫的是相對路徑，致使全部的靜態資源文件也進入了第二個location，致使頁面白屏。
分析以下。

1.優先級問題

首先匹配 =，其次匹配^~, 其次是按文件中順序的正則匹配，最後是交給 / 通用匹配。當有匹配成功時候，中止匹配，按當前匹配規則處理請求。
~* 的優先級低於 ^~因此第一個配置靜態資源文件雖然寫在前面，仍是不會進去的。

2. server root 配置錯誤

解決優先級問題後，問題依然存在。緣由就是這個。root 在server和location中都有，都是配置文件開始尋找的根路徑，若是url是https://xxxx:8084/app/screen，location中的配置優先級高於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優先級，再加一個 = /app/screen 的location 。

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

可是到此還沒結束。由於業務須要，本層nginx前面還有一層Nginx。因此301 重定向的時候，會帶上端口號。致使找不到請求。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;
        }
    }