怎麼在nginx中部署一個react項目

測試項目react-demo

將您的react-demo專案複製到伺服器(預設情況下，Github用於管理我們的專案)

如有需要，請安裝專案環境，如node.js、紗線等。

進入專案目錄，執行npm運行構建，並開始構建專案

成功建置後，將產生一個dist資料夾(取決於您的專案配置)，該資料夾中的靜態文件將成為我們專案的存取文件。

要設定Nginx，Linux伺服器輸入：/etc/nginx/sites-enabled，然後作為管理員，為您的react專案建立一個新的設定文件，如react-demo.conf，然後編輯該檔案：

伺服器{

listen8080

# server  _ name  your  . domain.com;

#root/home/root/react-demo/dist ;

indexindex.htmlindex.htm;

位置/

try  _ files  $ uri  $ uri//index  . html;

#}

#}

location^~/assets/{

gzip  _ staticon

#expiresmax

add  _ header  cache-control  public;

}

}

#error  _ page  500502503504/500 . html;

client  _ max  _ body  _ size20M

keepalive  _ timeout10##udox; 。

存取項目，http://IP:8080/

注意事項：

1.如果您設定一個域名，您需要80個連接埠。成功後，您只需要存取網域就可以存取項目

2.如果您使用反應路由器的瀏覽器故事模式，請將以下設定新增至Nginx設定：

位置/

try  _ files  $ uri  $ uri//index  . html;

###}原則，因為我們的專案只有一個根條目，輸入像/home這樣的url就找不到這個頁面。這是因為nginx會嘗試載入index.html，載入index.html後，react-router會工作並匹配我們輸入的/home路由，從而顯示正確的主頁。如果瀏覽器故事模式中的項目沒有配置上述內容，將會出現404的情況。 ###

以上是怎麼在nginx中部署一個react項目的詳細內容。更多資訊請關注PHP中文網其他相關文章！