6. 選擇適合的部署方式


特別講這部分在於很多人會忽略部署的層面
一般來說,前端工程師不用太去管部署層面的事情
不過現在斜槓是很平常的事,前端去部署也是很正常的!

這邊提供幾種常見的部署方式給大家參考
可以根據需求決定要用哪種方式

伺服器上部署

這種方式一般是有後端工程師的公司常見的部署方式
使用 Nginx/Apache 作為 Http Server
將請求導到特定的資料夾進行渲染

作法:
是由前端工程師 push 到 remote repo 後
使用 jenkins 之類的自動化工具進行 pull & build(若沒有可能就是人工)

優點:彈性大,可以輕鬆做 Prerender 相關功能
缺點:部署較為麻煩,要設定自動化工具等等

雲端服務上部署

AWS S3 或其他 Cloud Storage

如果熟悉 Cloud 架構的人,可能會採取此方式
因為 Storage 便宜,所以常會這樣選擇

作法:
在 local 端先 build 好之後,在 upload 到 Cloud Storage

優點:簡單白話
缺點:缺乏自動化,需要自行編譯後上傳,prerender 無法使用,無法快速回朔版本

Netlify

超好用的靜態網頁平台,常接案的人首選

作法:
在 Netlify 上面創建專案,綁定 Repo 即可

優點:免費!push 後自動編譯部署,還支援 Prerender 功能
缺點:彈性小,若是有大量專案同時編譯時要等(只有 500 分鐘的編譯時數)

GitHub Page

算是介於 Netlify 與 Cloud Storage 之間
還是需要自行編譯,但是可以輕鬆的版本回朔

作法:
在 GitHub 上面設定 github page,程式碼編譯後 push 到指定 branch 即可

優點:免費!可以進行版本回朔
缺點:無法綁定自己的網域,prerender 無法使用

結語

如果大家是專注於前端的工程師,這邊首推 Netlify 沒有之一
Netlify 對於前端工程師實在是幫助太大了
免費的就超級好用(我們喜歡到願意付費)
而且使用 Cloudflare 來綁定 Netlify 超簡單,之後找時間來分享這部分

如果你們公司有後端或是 DevOps 的工程師
那麼部署在伺服器上面也是個不錯的選擇
希望大家能找到適合的方式

七天真的好難,開始越寫越短了... 剩最後一篇了QQ

Typescript 開發 React 的寫法百百種,提供讀者較佳的程式撰寫方式以及專案架構。






Related Posts

Day03 : HTML 混合 JS-JSX

Day03 : HTML 混合 JS-JSX

如何在 Windows 安裝 OpenPose 跟使用 Python API 來偵測人體姿態

如何在 Windows 安裝 OpenPose 跟使用 Python API 來偵測人體姿態

每日心得筆記 2020-06-20(六)

每日心得筆記 2020-06-20(六)



Comments