使用 Cloudflare Workers 託管靜態網站

1

關鍵要點

  • 研究顯示，Cloudflare Workers 能通過直接提供靜態資源來託管靜態網站，但相較於專為靜態網站設計的 Cloudflare Pages，其設置更為複雜。
  • 證據表明，Cloudflare Workers 更適合需要自定義邏輯的靜態網站，而 Cloudflare Pages 對於傳統靜態託管更為簡單。
  • 對於基本的靜態網站，您需要設置 Wrangler CLI，配置資源目錄並部署，可能還需添加 Worker 程式碼以實現進階路由，這似乎是合理的做法。

直接回答

要使用 Cloudflare Workers 託管靜態網站，首先在 cloudflare.com 註冊一個 Cloudflare 帳戶。使用命令 npm install -g wrangler 或 pnpm install wrangler 安裝 Wrangler CLI。創建一個項目目錄，將您的靜態文件（如 HTML、CSS 和圖片）放入一個文件夾（例如 “public”），並配置 wrangler.toml 文件以指向該文件夾。使用 wrangler deploy 部署您的網站，部署後可通過類似 https://your-worker-name.yourusername.workers.dev/ 的 URL 訪問。

若需乾淨的 URL 或單頁應用（SPA），可能需要添加基本的 Worker 程式碼來處理路由，這對於期望簡單設置的用戶可能有些意外。雖然 Cloudflare Pages 對於靜態網站更簡單，但 Workers 提供了自定義邏輯的靈活性，若您計劃日後添加動態功能，這可能是一個優勢。

詳細分析：使用 Cloudflare Workers 託管靜態網站

本分析探討如何使用 Cloudflare Workers 託管靜態網站。Cloudflare Workers 主要設計於邊緣運算，但也能服務靜態資源。目前時間為 2025 年 3 月 18 日星期二上午 07:26（太平洋夏令時），所有信息均與最新發展一致。本指南旨在為用戶提供詳盡的步驟，參考官方文件和社群見解，同時指出相較於 Cloudflare Pages 的複雜性。

使用 Cloudflare Workers 託管靜態網站概述

託管靜態網站通常涉及提供 HTML、CSS、JavaScript 等資源，無需伺服器端處理。Cloudflare Workers 以邊緣運算聞名，但也能通過其基礎設施託管靜態資源，提供全球分發和低延遲。這與專為靜態網站設計的 Cloudflare Pages 不同。該過程涉及使用 Wrangler CLI 部署資源，並可選擇使用 Worker 程式碼處理請求，這可能增加對期望簡單設置的用戶的複雜性。

使用 Cloudflare Workers 託管的逐步指南

以下是使用 Cloudflare Workers 託管靜態網站的詳細步驟：

  1. 設置 Cloudflare 帳戶：

    • 訪問 cloudflare.com 並註冊帳戶，這是使用 Workers 和管理部署的必要步驟。

  2. 安裝 Wrangler CLI：

    • Wrangler 是用於部署 Cloudflare Workers 的命令行工具。使用 Node.js 套件管理器以 npm install -g wrangler 或 pnpm install wrangler 安裝，需確保系統已安裝 Node.js。

  3. 創建項目目錄：

    • 使用 mkdir my-static-site 創建新目錄，例如 “my-static-site”，並以 cd my-static-site 進入該目錄。

  4. 準備靜態文件：

    • 創建一個用於存放靜態資源的目錄，通常命名為 “public”（也可自定義名稱，如 “assets” 或 “content”）。將所有靜態文件（例如 index.html、styles.css、圖片等）放入此目錄。例如，要服務 https://example.com/index.html，請確保 index.html 位於該目錄根部。

  5. 配置 wrangler.toml：

    • 在項目目錄中創建 wrangler.toml 文件，內容如下：
      name = "my-static-site"
compatibility_date = "2024-09-25"
assets = {
  directory = "public"
}
    • 將 "my-static-site" 替換為您想要的 Worker 名稱。compatibility_date 確保與最新 Workers 功能兼容，assets 部分指向您的靜態文件目錄。

  6. 可選：添加 Worker 程式碼以實現進階路由：

    • 默認情況下，若請求的 URL 與資源目錄中的文件匹配，則直接提供該文件，無需運行 Worker 程式碼。但對於不匹配的請求（例如 /about 無 about.html），則執行 Worker 程式碼。對於有多個 HTML 文件的傳統靜態網站，確保所有頁面都存在。對於單頁應用（SPA）或乾淨 URL，可創建 worker.js 文件，程式碼如下：
      export default {
  async fetch(request) {
    const url = new URL(request.url);
    const file = await env.ASSETS.fetch(request);
    return file;
  },
};
    • 這確保資源正常提供，但可能需額外邏輯處理 404 或為 SPA 路由服務 index.html。

  7. 部署 Worker：

    • 在終端運行 wrangler deploy，這會將您的靜態資源和 Worker 程式碼上傳至 Cloudflare 的基礎設施，並在全球網絡中部署。

  8. 訪問您的網站：

    • 部署後，您的網站將可通過類似 https://my-static-site.yourusername.workers.dev/ 的 URL 訪問，其中 yourusername 是您的 Cloudflare 帳戶用戶名。在瀏覽器中測試此 URL。

  9. 可選：設置自定義域名：

    • 若需使用自定義域名（例如 www.example.com），請參考 Cloudflare 文件為 Workers 添加自定義域名。這涉及添加指向 Worker 子域的 DNS 記錄（CNAME）並在 Cloudflare 控制面板中配置。

與 Cloudflare Pages 的比較分析

雖然 Cloudflare Workers 能託管靜態網站，但 Cloudflare Pages 專為此目的設計，提供 Git 集成和自動構建。以下表格比較兩者在靜態網站託管上的差異：

功能 Cloudflare Workers Cloudflare Pages
主要用途 邊緣運算，動態邏輯 靜態網站託管，JAMstack
Git 集成 無（需手動使用 Wrangler 部署） 有（從 GitHub/GitLab 自動構建）
靜態網站易用性 較複雜，需 CLI 設置 較簡單，提供圖形界面與構建設置
自定義邏輯 支持，可混合靜態資源與程式碼 有限，主要針對靜態資源
免費層 有，使用限制 有，每月 500 次構建，無限頻寬
資源服務 匹配 URL 直接提供，其他運行程式碼 直接服務，構建流程處理

注意事項與意外細節

一個意外細節是，雖然 Cloudflare Pages 因其簡單性常被推薦用於靜態網站，但 Workers 允許混合靜態資源與動態功能（如 WebSockets 或 Durable Objects），這是 Pages 無法實現的。這種靈活性可能吸引計劃未來增強功能的用戶，但對於基本靜態託管增加了複雜性。此外，Wrangler CLI 和可能的路由程式碼需求，可能讓期望即插即用解決方案的用戶感到意外。

結論與建議

研究表明，使用 Cloudflare Workers 託管靜態網站是可行的，特別適合熟悉 CLI 工具並需要自定義邏輯的用戶。證據顯示，Workers 適合預期動態功能的場景，而 Cloudflare Pages 更適合傳統靜態託管。對於基本靜態網站，遵循上述步驟，確保資源目錄涵蓋所有頁面。對於進階路由，考慮添加 Worker 程式碼，並認識到相較於 Pages 的額外複雜性。

關鍵參考資料