# 如何透過 CI 自動將靜態網頁發佈到免費的 Cloudflare Pages 服務

我這幾天花了點時間發佈 [dev.angular.tw](https://dev.angular.tw/) 新版 Angular 正體中文官網，大幅改善了原本的翻譯品質，而且新版網站非常美觀，甚至可以透過 [StackBlitz](https://stackblitz.com/) 獨家的 [WebContainers](https://webcontainers.io/) 技術，線上編輯 Angular 的範例程式碼，並且即時預覽結果。重點是，我這次將網站部署到 [Cloudflare Pages](https://pages.cloudflare.com/) 靜態網頁部署服務，這個服務不僅免費，還能提供全球 CDN 加速，讓網站的載入速度更快。這篇文章我打算用最短的篇幅，記錄一下整個網站發佈的過程。

![Image](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/65b9488aa50521d387ab-f7d929df-d4a9-44d2-b1de-5b31f2cc44e5.webp)

### 1\. 申請 Cloudflare 帳號 & 取得帳戶 ID

首先，您需要一個 Cloudflare 帳號。帳號是免費的，並且可以用來管理您的網域和靜態網站。請前往 [Cloudflare 官網](https://www.cloudflare.com/) 註冊一個帳號。

由於我買的 [angular.tw](https://angular.tw/) 網域本來就是代管在 [Cloudflare DNS](https://www.cloudflare.com/zh-tw/application-services/products/dns/) 服務，所以設定 Cloudflare Pages 的時候，會更加簡便。

要能透過 CI 自動化部署網頁，您需要取得 Cloudflare 帳戶 ID 和 API Token，我們首先可以在登入 Cloudflare 帳號後，點擊「帳戶名稱」右邊的「三的點」並點擊「複製帳戶 ID」就可以取得帳戶 ID。

![複製帳戶 ID](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/4e02aabab384c30c035a-8a24c0b3-b780-41af-aa44-b1ceb86cef31.png)

### 2\. 申請 Cloudflare 的 API Token

你可以從 Cloudflare 帳戶頁面的左側，找到「管理帳號」下的「帳戶 API 權杖」，建立一個新的 Token：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/b7525acc32f6abd9a06a-5f280aeb-8195-4e52-8068-19fd1256e6fd.png)

在這裡，我們可以選擇「編輯 Cloudflare Workers」範本，這個範本的權限已經足夠用於部署 Pages。

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/e5e31c4753b1b767225b-1b46579f-da19-4ad0-8562-68eb5de96ff2.png)

您可以根據需求限制 Token 的帳號資源存取範圍與有效期限。然後在「區域資源」選擇你想要綁定的網域。（在 Cloudflare 的繁體中文介面翻譯為**區域**）

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/4c182cfb2d12c0ed7561-b369cff1-0e19-4531-9bbc-333e7395d2c7.png)

最後按下「建立 Token」，並複製產生的 Token，因為它只會顯示一次。

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/952e5579642f3d4d2e24-daf892c2-1f2d-4df9-aeb8-9451dc241713.png)

> 注意: Token 名稱是可以編輯的，如果建立時忘記調整，建議事後還是可以調整成好記的名稱。

### 3\. 建立 Cloudflare Pages 專案

由於您已經取得了 Cloudflare 的 API Token 和帳戶 ID，接下來可以使用 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) 工具來建立 Cloudflare Pages 專案。

首先，請先準備好環境變數，我以 PowerShell 為例：

```powershell
$env:CLOUDFLARE_ACCOUNT_ID = "xxxxxx"
$env:CLOUDFLARE_API_TOKEN = "MuUP2MEoxxxxxN2l12"
```

然後，不用登入，直接可以使用以下指令來建立 Cloudflare Pages 專案：

```powershell
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 的運作方式。

1.  Cloudflare Pages 是一個靜態網站託管服務，專為前端開發者設計。
    
2.  它支援 Git 儲存庫的自動部署，並且可以與 CI/CD 流程整合。
    
    預設 Cloudflare Pages 可以跟 GitHub 或 GitLab 自動連結，並且會自動偵測 Git 儲存庫的變更，並將這些變更部署到指定的分支。
    
3.  部署時，Cloudflare Pages 有兩種部署環境：`Preview` (預覽環境) 與 `Production` (生產環境)
    
    因為我們在 Cloudflare Pages 建立專案時，需要指定一個**生產環境**的分支名稱，如果你設定為 `main` 的話，使用 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) 部署網頁時，當下工作目錄的分支為 `main` 的話，意味著這個網頁會被部署到 Cloudflare Pages 的**生產環境**。
    
    相對的，任何不是在 `main` 分支的變更，部署的時候都會被歸類到 Cloudflare Pages 的**預覽環境**。
    
    部署時，無論任何環境，都會提供你一個臨時的網址，讓你可以在正式發佈之前，先預覽這個網頁的樣子。
    

好的，在瞭解上述的運作方式之後，我們就可以開始部署網頁了，一個命令就可以搞定：

```powershell
npx -y wrangler pages deploy '.' --project-name 'my-site'
```

這個指令會將**當前目錄**的檔案部署到 Cloudflare Pages 的 `my-site` 專案中，部署完畢後會跟你說網址是什麼：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/82031f74c0714eb2c29c-299e1dec-8892-474a-8af5-d87b857329fe.png)

上面用命令列部署的過程，就是 CI 腳本的執行過程，非常簡單好上手啊！👍

然而你透過 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) 建立的資源，每次的部署記錄，也都可以從 Cloudflare Pages 的儀表板中看到：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/github.com/81dbe8084634d744146b-14a45c34-6a31-4f66-8fbc-c362f4c89271.png)

### 總結

長話短說，整篇文章就三個重點：

1.  設定環境變數
    
    ```powershell
    $env:CLOUDFLARE_ACCOUNT_ID = "xxxxxx"
    $env:CLOUDFLARE_API_TOKEN = "MuUP2MEoxxxxxN2l12"
    ```
    
2.  使用 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) 建立 Cloudflare Pages 專案
    
    ```powershell
    npx -y wrangler pages project create 'my-site' --production-branch=main
    ```
    
3.  使用 [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/) 部署靜態網頁到 Cloudflare Pages 專案
    
    ```powershell
    npx -y wrangler pages deploy '.' --project-name 'my-site'
    ```
    
    > 注意: Cloudflare Pages 部署時有些限制，每個專案最大檔案數 20,000 個檔案，單一檔案最大限制為 25MB，每個帳戶可自訂域名 100 個，靜態檔案請求次數則為**無限制**(Unlimited)。
    

這樣就完成了！

[Cloudflare Pages](https://pages.cloudflare.com/) 的能力遠大於 [GitHub Pages](https://pages.github.com/) 與 [Azure Static Web Apps](https://azure.microsoft.com/en-us/products/app-service/static?WT.mc_id=DT-MVP-4015686)，它可以設定自訂網域、設定 Redirects 規則、自訂特定頁面的 Headers，甚至還可以綁定 [Pages Functions](https://developers.cloudflare.com/pages/functions/) 去執行 [Cloudflare Workers](https://developers.cloudflare.com/workers/)，功能強大到爆炸，非常厲害的玩意，我有點相見恨晚的感覺！😄

總之，有興趣深入研究的人，建議可以多看 [Cloudflare Pages](https://developers.cloudflare.com/pages/) 的官方文件。

### 相關連結

-   [Cloudflare Pages](https://pages.cloudflare.com/)
-   [Cloudflare Pages docs](https://developers.cloudflare.com/pages/)
-   [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/)