大學時期的開發很少考慮 Deliver 這塊,交件即結案往往不會有動力將 Push 之後的動作自動化, 不過將部署環境遷移到雲端並打算長期經營網站後,自動化直接變成功能性需求 (因為懶惰的工程師是無法忍受推送新版本後部署這麼機械式的動作要手動操作)。
過去實作 CI/CD 就直接在本地架 Server 跑 Pipeline,不過雲端計算平台的服務越來越多元,
相較本地部署,都給雲端無伺服器架構的優勢更大一點,當然要來嘗試一下(我絕對不是在擔心畢業後沒有機器可以用),
實作完發現流程比想像中簡單很多,那就順便加一篇來介紹這個庫東西,跑簡單的 CI 不一定要花時間在本地架完整的 Server,
雲端可以省事很多。
平台 #
提示 #
下面教學專注在部署,對於框架打包必要檔案過程細節不會多做介紹, 目前有使用的工具為:
不過不了解這些框架不影響閱讀後續內容,因為雲端平台將流程做很大程度的簡化, 你可以等到要實作再深入就可以。
在這期間我試過蠻多家的平台,下面是我最後採用的方案。
Cloudflare Pages #
這邊簡單介紹一下 Cloudflare Pages 優勢:
- 無限網站
- 無限流量、頻寬
- CI/CD 完全交給 Cloudflare
- 網站將部署至 Cloudflare 全球網路
這個是免費方案就享有的,大概是目前還在推廣期,很難找到其他家有這種優惠的。 它內建部署流程提供的效能不差,跟 Github Action 免費方案那個慢慢的 runner 不一樣喔! 然後它會將你網站的檔案散佈到全球伺服器上,好處是降低國外連線的延遲, 如果是 AWS,這是要啟用 CloudFront 才有的待遇。
當然它也有一些限制:
- 每月 500 個建置工作
- 每個網站 asset 最大上限 25 MB
- 全球分散式網路保留最多 20000 個檔案
Azure Static Web Application #
另一個是 Azure 平台有針對靜態網站提供無伺服器託管服務的方案, 其他家是要用 Block Storage 存部署檔案再額外啟用靜態網站功能, Storage 跟網路進出單獨計費,反之 Azure 在額度內是完全不會有費用 (當然 Azure 本身也可以拿 Blob Storage 用相同方式部署,兩者唯一差別是能否自訂 error page)
這邊列一下免費方案裡比較重要的限制:
- 包含頻寬 100 GB
- 自訂網域 2 個
- 每個帳戶最多 10 個應用程式
- 部署大小上限 250 MB
這邊有個小坑是頻寬限制的解釋有點模糊,我個人的猜測是,免費方案最多就是進出 100 GB (該帳號), 超過要繼續用的話,要嘛升級標準方案,或是前面左轉別家。
以上是我比較各家最後挑出相對 CP 值高的平台方案,兩家限制給的上限以個人服務來說要用滿理論上是蠻難的, 這樣的限制會超額你應該要算大戶了,建議直接走計費制會比較划算。
部署 #
Pages 部署流程 #
進到 Cloudflare Pages,點右上角建立網站
連結到 Git,我這邊是選連接 Github,你有其他支援的儲存庫也可以用, 然後選擇你的專案。
選擇分支跟框架,如果上面沒有你使用的框架,就選 None,然後自己指定編譯指令、root 資料夾、 和輸出位置。
設定完點選下面儲存和部署,然後就完成了!對,超快XD
等待一陣子後,它會自動幫你建立一個預覽的網站,從連結點進去看成品,如果你沒有自己的網域的話,預設的網域自帶 SSL 可以直接用。
如果要用自己的網域就選自訂網域,到你網域供應商加入一個新的 CNAME 紀錄,把 子網域
指向 page 網址
,
驗證完就可以從自己的網址進去。
Azure Static Page 部署流程 #
Azure 的流程差不多,進入控制面板,在建立資源,選 Web
-> 靜態 Web 應用程式
連結專案,選項跟 Pages 差不多,唯一差別是這邊多一個環境區域,我是選最靠近台灣的東亞 (實體應該在香港)。
Azure 台北資料中心可能2025會完工,可以期待一下
設定完按 建立
Azure 預設使用 Github 內建的 Runner 去跑編譯跟部署,可以先切過去看執行的狀況, 這邊需要一點時間。
Action Runner 可以自架,架設步驟官網蠻清楚的,這邊就不放了
流程沒有遇到問題就會顯示綠勾勾。
下面的警告是因為當時執行的 Node.js 版本是 16,一個快要停止支援的版本, 所以才會有警告,後來我 ckeckout 版本改成 v4 就不會有提示了
這時你在回去 Azure 裡面,應該就會看到部署完成提示。
這時候你已經可以用它給你的網址看部署完的結果,Azure 也是自帶 SSL, 所以沒域名的可以直接公開這個網址,只是它的不像 Cloudflare 的比較簡潔。
要用自訂域名也很簡單,點旁邊的 自訂網域
,選 其他DNS
(除非直接跟 Azure 買域名才選第一個)
一樣填上 CNAME 就可。
附註 #
Azure 靜態網頁過 Cloudflare 的話,網域驗證不會過,建議改 DNS only。