iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0
Modern Web

React前端開發 - 安裝,coding ,架設 - ver. React 17以下系列 第 10

Ch.10 部屬一個會自動更新的React網站

  • 分享至 

  • xImage
  •  

部屬專案常常讓許多前端頭痛,因為這真的是應證了術業有專攻,部屬是個大麻煩,
而且最重要的是要把握機會偷懶,所以還要加上自動部屬新版本的功能

發佈部屬前提條件:

  1. react專案,至少可以正常運行測試 npm start
  2. 有gitHub帳號
  3. 建立好repository 放入內容
  4. 確認好你的主要分支是正確網站內容
    沒有的話,翻一下前面的章節,或是別人的文章準備一下

這邊推薦 vercel 因為我不知道其他的。

1. 註冊會員

2. 新建Project

https://ithelp.ithome.com.tw/upload/images/20230919/20158340GDruBO4E6o.jpg

一個是Import Git Repository 這是我們這次的目標
另一個是用預設模板,不少種,我自己有偷用,基礎東西改一改,算能頂著用
綁定github帳號好專案後,就可以點選 "import" 導入

https://ithelp.ithome.com.tw/upload/images/20230919/20158340qfeCp018Xx.jpg

3.設定部屬

如果沒有特別調整你的package.json檔,通常保持預設。
https://ithelp.ithome.com.tw/upload/images/20230919/20158340Zq3po5x6eg.jpg

另外補充 我當時找不到React怎麼部屬,直接 npm run build
直接把build好的檔案拿來架設(基本上跟靜態網站部屬類似),
後來才發現部屬React 要選擇 Create React App,看到時傻眼

4.等待建立

因為我不是擅長部屬的前端,這邊我推薦增加祈禱的動作
https://ithelp.ithome.com.tw/upload/images/20230919/20158340xWsZB7TL3B.jpg

5. 完成 並 測試網址

撒花 完結
https://ithelp.ithome.com.tw/upload/images/20230919/20158340xt8Vmr0TCL.jpg

這邊如果操作快可能幾分鐘就好了,之後只要更新到Git的綁定分支上,就會自動部屬,超級超級方便!!

補充: 如果要真的拿來用記得 要檢查是不是在Production模式
Dashboard > project你的專案 > Build Logs > 在Visit按鈕旁邊的buger button
確認Promte to Production
https://ithelp.ithome.com.tw/upload/images/20230919/20158340Vk5qfrxrEx.jpg


上一篇
Ch9. 專案Git管理
下一篇
Ch11. 假裝像是後端建置環境 Laravel
系列文
React前端開發 - 安裝,coding ,架設 - ver. React 17以下14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言