React - Netlify Depolyment


Posted by urlun0404 on 2022-03-31

忘記之前部署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


#frontend #deployment #React #netlify #note







Related Posts

Spring boot系列(三)Hello World

Spring boot系列(三)Hello World

F2E合作社|checkbox核取方塊和radio選項按鈕|Bootstrap 5網頁框架開發入門

F2E合作社|checkbox核取方塊和radio選項按鈕|Bootstrap 5網頁框架開發入門

Day04 Openpose (人體姿態預估)

Day04 Openpose (人體姿態預估)


Comments