如何在 Nginx 上面部署 React App

發表於 | 分類於 | |

Nginx 是常見的網頁伺服器
預設的情況下會將客戶端的所有請求轉發到後端的真實路徑
部署多頁式的網頁應用並沒有什麼問題 但是如果是單頁式應用呢

React 是典型的單頁式應用 SPA (Single App Application)
React Router 提供多種類型的路由 如 BrowserRouter, HashRouter, MemoryRouter etc.
其中 React Router 官方最推薦的 Router 就是 BrowserRouter

BrowserRouter 會根據每次路徑的變化都和後端發送請求

但實際上 React 只會有一個 index.html 位於 Nginx 的網站根目錄
此時如果 Nginx 嘗試將每個前端路由的的請求都轉發到後端的真實路徑
就會因為找不到實際的檔案可以回傳 而發生 404 Not Found

底下就來說明如何解決這個問題

  • nginx 設定檔配置

nginx 設定檔配置

Nginx 的配置檔案預設位置為：
/etc/nginx/conf.d/default.conf

內容如下：

1
2
3
4
5
6
7
8
9
10
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }
}

需要將 try_files 加入 location / 下
代碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        # url 切換時始终返回index.html
        try_files $uri /index.html;
    }
}

此時你在馬上打開網站
你會發先還是 404 Not Found

記得當修改完配置要在執行

1
nginx -s reload

這樣才能重新讀取並套用新的配置
然後在開網站 就正常囉～

另外如果發現 React 有些頁面抓不到靜態資源
可以檢查專案下的 package.json
並確認 homepage 設定是否正確
如果專案是部署在網站根目錄下 設定如下

1
"homepage": "/"

以上就是將 React App 部署在 Nginx 網頁伺服器的方法哩

本文作者： David Huang
本文地址： https://davidblog.github.io/2023/07/11/nginx/

0%