忘記之前部署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
開始部署專案。
步驟
- 用 Netlify cli 部署時,用上下左右鍵移動、並用Enter點選選項。
- 建立部署專案的過程會問網站名稱、部署資料夾(build) ...
- 前面步驟完成後,正式部署前會給你一串專案草稿的網址(草稿專案應該是檢查部署網站用?),然後最後一行會有一串指令
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