我這幾天花了點時間發佈 dev.angular.tw 新版 Angular 正體中文官網，大幅改善了原本的翻譯品質，而且新版網站非常美觀，甚至可以透過 StackBlitz 獨家的 WebContainers 技術，線上編輯 Angular 的範例程式碼，並且即時預覽結果。重點是，我這次將網站部署到 Cloudflare Pages 靜態網頁部署服務，這個服務不僅免費，還能提供全球 CDN 加速，讓網站的載入速度更快。這篇文章我打算用最短的篇幅，記錄一下整個網站發佈的過程。
1. 申請 Cloudflare 帳號 & 取得帳戶 ID
首先，您需要一個 Cloudflare 帳號。帳號是免費的，並且可以用來管理您的網域和靜態網站。請前往 Cloudflare 官網 註冊一個帳號。
由於我買的 angular.tw 網域本來就是代管在 Cloudflare DNS 服務，所以設定 Cloudflare Pages 的時候，會更加簡便。
要能透過 CI 自動化部署網頁，您需要取得 Cloudflare 帳戶 ID 和 API Token，我們首先可以在登入 Cloudflare 帳號後，點擊「帳戶名稱」右邊的「三的點」並點擊「複製帳戶 ID」就可以取得帳戶 ID。
2. 申請 Cloudflare 的 API Token
你可以從 Cloudflare 帳戶頁面的左側，找到「管理帳號」下的「帳戶 API 權杖」，建立一個新的 Token：
在這裡，我們可以選擇「編輯 Cloudflare Workers」範本，這個範本的權限已經足夠用於部署 Pages。
您可以根據需求限制 Token 的帳號資源存取範圍與有效期限。然後在「區域資源」選擇你想要綁定的網域。（在 Cloudflare 的繁體中文介面翻譯為區域）
最後按下「建立 Token」，並複製產生的 Token，因為它只會顯示一次。
注意: Token 名稱是可以編輯的，如果建立時忘記調整，建議事後還是可以調整成好記的名稱。
3. 建立 Cloudflare Pages 專案
由於您已經取得了 Cloudflare 的 API Token 和帳戶 ID，接下來可以使用 Wrangler CLI 工具來建立 Cloudflare Pages 專案。
首先，請先準備好環境變數，我以 PowerShell 為例：
$env:CLOUDFLARE_ACCOUNT_ID = "xxxxxx"
$env:CLOUDFLARE_API_TOKEN = "MuUP2MEoxxxxxN2l12"
然後，不用登入，直接可以使用以下指令來建立 Cloudflare Pages 專案：
npx -y wrangler pages project create 'my-site' --production-branch=main
這個指令會在 Cloudflare Pages 上建立一個名為 my-site 的專案，並且將 main 分支設為生產環境的預設分支。
我第一次實作到這裡的時候，突然覺得有點怪，為什麼我只是要上傳靜態網頁，卻要指定一個「分支」？難道部署到 Cloudflare Pages 的時候跟我的 Git 有關係？
還真的！Cloudflare Pages 預設就假設了你「一定」有做 Git 版控，而你在上傳檔案時，當下的分支名稱會直接決定你的檔案會發佈到哪個環境！🔥
4. 準備部署網頁到 Cloudflare Pages 專案
部署之前，你要先瞭解 Cloudflare Pages 的運作方式。
-
Cloudflare Pages 是一個靜態網站託管服務，專為前端開發者設計。
-
它支援 Git 儲存庫的自動部署，並且可以與 CI/CD 流程整合。
預設 Cloudflare Pages 可以跟 GitHub 或 GitLab 自動連結，並且會自動偵測 Git 儲存庫的變更，並將這些變更部署到指定的分支。
-
部署時，Cloudflare Pages 有兩種部署環境：Preview (預覽環境) 與 Production (生產環境)
因為我們在 Cloudflare Pages 建立專案時，需要指定一個生產環境的分支名稱，如果你設定為 main 的話，使用 Wrangler CLI 部署網頁時，當下工作目錄的分支為 main 的話，意味著這個網頁會被部署到 Cloudflare Pages 的生產環境。
相對的，任何不是在 main 分支的變更，部署的時候都會被歸類到 Cloudflare Pages 的預覽環境。
部署時，無論任何環境，都會提供你一個臨時的網址，讓你可以在正式發佈之前，先預覽這個網頁的樣子。
好的，在瞭解上述的運作方式之後，我們就可以開始部署網頁了，一個命令就可以搞定：
npx -y wrangler pages deploy '.' --project-name 'my-site'
這個指令會將當前目錄的檔案部署到 Cloudflare Pages 的 my-site 專案中，部署完畢後會跟你說網址是什麼：
上面用命令列部署的過程，就是 CI 腳本的執行過程，非常簡單好上手啊！👍
然而你透過 Wrangler CLI 建立的資源，每次的部署記錄，也都可以從 Cloudflare Pages 的儀表板中看到：
總結
長話短說，整篇文章就三個重點：
-
設定環境變數
$env:CLOUDFLARE_ACCOUNT_ID = "xxxxxx"
$env:CLOUDFLARE_API_TOKEN = "MuUP2MEoxxxxxN2l12"
-
使用 Wrangler CLI 建立 Cloudflare Pages 專案
npx -y wrangler pages project create 'my-site' --production-branch=main
-
使用 Wrangler CLI 部署靜態網頁到 Cloudflare Pages 專案
npx -y wrangler pages deploy '.' --project-name 'my-site'
注意: Cloudflare Pages 部署時有些限制，每個專案最大檔案數 20,000 個檔案，單一檔案最大限制為 25MB，每個帳戶可自訂域名 100 個，靜態檔案請求次數則為無限制(Unlimited)。
這樣就完成了！
Cloudflare Pages 的能力遠大於 GitHub Pages 與 Azure Static Web Apps，它可以設定自訂網域、設定 Redirects 規則、自訂特定頁面的 Headers，甚至還可以綁定 Pages Functions 去執行 Cloudflare Workers，功能強大到爆炸，非常厲害的玩意，我有點相見恨晚的感覺！😄
總之，有興趣深入研究的人，建議可以多看 Cloudflare Pages 的官方文件。
相關連結