React創建build生產構建，使用Nginx伺服器部署及報500錯誤的解決方法

2019 年 11 月 13 日
筆記

今天嘗試使用 Nginx 伺服器跑 React build 生產構建，結果報錯「500 Internal Server Error」。查了些資料，最後解決了，順便記錄一下。

Nginx 環境配置我就不寫了，我之前整理過一篇文章，詳細的介紹了亞馬遜AWS伺服器CentOS/Linux系統Shell安裝Nginx及配置自啟動

添加網站

因為我伺服器上之前有一個網站，需要再加一個，找到 Nginx 的配置文件 **/nginx/conf/nginx.conf （該文件和您的 Nginx 安裝目錄有關），在 http { . . . } 內添加下面一行程式碼：

server {      listen  3000; // 埠號      root	/root/build; // 網站目錄      index index.html index.htm; // 默認首頁文件      location / {          try_files $uri $uri/ /index.html;      }  }

這裡要詳細介紹一下：

try_files

找指定路徑下文件，如果不存在，則轉給哪個文件執行

語法：

try_files file1 [file2 ... filen] fallback

默認值：無

作用域：location

當用戶請求 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 。

Nginx location的匹配規則

~ 表示執行一個正則匹配，區分大小寫

~* 表示執行一個正則匹配，不區分大小寫

^~ 表示普通字元匹配，如果該選項匹配，只匹配該選項，不匹配別的選項，一般用來匹配目錄

= 進行普通字元精確匹配

@ 定義一個命名的 location，使用在內部定向時，例如 error_page , try_files

location 匹配優先順序

= 精確匹配會第一個被處理。如果發現精確匹配，nginx 停止搜索其他匹配。

普通字元匹配，正則表達式規則和長的塊規則將被優先和查詢匹配，也就是說如果該項匹配還需去看有沒有正則表達式匹配和更長的匹配。

^~ 則只匹配該規則，nginx 停止搜索其他匹配，否則 nginx 會繼續處理其他 location 指令。

最後匹配理帶有"~"和"~*"的指令，如果找到相應的匹配，則 nginx 停止搜索其他匹配；當沒有正則表達式或者沒有正則表達式被匹配的情況下，那麼匹配程度最高的逐字匹配指令會被使用。

示例：

location  = / {    # 只匹配"/".    [ configuration A ]   }  location  / {    # 匹配任何請求，因為所有請求都是以"/"開始    # 但是更長字元匹配或者正則表達式匹配會優先匹配    [ configuration B ]   }  location ^~ /images/ {    # 匹配任何以 /images/ 開始的請求，並停止匹配 其它location    [ configuration C ]   }  location ~* .(gif|jpg|jpeg)$ {    # 匹配以 gif, jpg, or jpeg結尾的請求.     # 但是所有 /images/ 目錄的請求將由 [Configuration C]處理.       [ configuration D ]   }

Nginx 報錯 500 Internal Server Error

一般報錯 403 或 500 錯誤，大多是因為用戶許可權不一致。

修改 **/nginx/nginx.conf ，將原來的 user nobody 或者 user nginx 改為 root

# user nobody; // 默認  user root; // 改為 root  worker_processes auto;

至此，react build 生產構建就可以通過 nginx 部署成功了。

聲明：本文由w3h5原創，轉載請註明出處：《React創建build生產構建，使用Nginx伺服器部署及報500錯誤的解決方法》 https://www.w3h5.com/post/416.html