Lun's Blog

React: Depolyment - Netlify

You-Lun Lin's photo
You-Lun Lin
·

1 min read

忘記之前部署React專案到Netlify的設定，來完整記錄一下。

React

建立部署資料夾 部署 React 專案要用 npm run build 建立build資料夾管理部署檔案。

Router 接下來在 public 資料夾，新增名為 _redirects (沒有附檔名)的檔案，並在檔案中寫入以下路徑：

/* /index.html 200

原本React專案中的主要檔案 (像是 index.html ) 都放在 public 資料夾，這個設定是React用來將 public 資料夾的內容作為部署輸出用。

Netlify

這裡使用 Netlify 部署專案，其他 HTTP Server 的部署設定可詳閱 React Deployment 官方文件。

第一次部署 電腦第一次部署在 CMD 介面輸入 npm install netlify-cli -g 指令引入Netlify的部署套件。

之後部署 之後的部署直接在 CMD 介面輸入指令 netlify deploy 開始部署專案。

步驟

  1. 用 Netlify cli 部署時，用上下左右鍵移動、並用Enter點選選項。
  2. 建立部署專案的過程會問網站名稱、部署資料夾(build) ...
  3. 前面步驟完成後，正式部署前會給你一串專案草稿的網址(草稿專案應該是檢查部署網站用?)，然後最後一行會有一串指令 netlify deploy--prod，要輸入指令後才會正式上線部署的內容。

GitHub CI設定 因為我有連線GitHub Repository，會在Netlify部署設定頁面的 Build command 欄位設定 CI= npm run build，這樣確保每次push新的版本到GitHub Repository時一併整合更新Netlify上面的內容。

基本上部署都會需要一段等待時間，可以趁等待的空檔去做其他事情再回來檢查。

另外，官方文件大概只提到前面事項，因為之前部署有碰到其他問題，相關資訊放在其他設定

其他設定

Netlify 專案重新部署設定 Netlify 預設會自動部署GitHub上最新的commit (Auto Publishing)，如果部署後發現路由設定跑不出來等問題，可以試試看重新佈署，忘記在哪邊文章看到的方法，簡言之他的重新部署方法就是先部署歷史版本，再回來部署最新版本。

如下圖，先去部署的歷史紀錄查看，找一個歷史版本。

進入歷史版本的部署設定部署這個版本。

然後重複上述步驟部署最新版本，部署需要等一段時間，就完成重新部署了。

Node版本問題 解決Node版本不相容問題可以在Netlify的環境設定(Environment)，在環境變數(Environment Varibles)設定Node的版本。 題外話，這裡也可以設定比較隱私的個人金鑰，但是國外網友好像不是很建議這麼做就是了🤔

References

React