Cloudflare Workers 入門指南：前端也能架設後端的輕量伺服器服務

更新日期： 2025 年 5 月 27 日

在過去，想要建立一個 Web API 或後端功能，通常需要租一台伺服器、設定作業系統、部署應用程式，甚至還得處理流量擴展與安全性問題。

但現在，有了 Cloudflare Workers，這一切都變得更簡單。

Cloudflare Workers 是 Cloudflare 推出的一種 無伺服器（serverless）運算平台，讓開發者能夠直接在 Cloudflare 的邊緣節點（Edge Locations）上運行 JavaScript 程式。

不需要部署實體主機，也不需要維護伺服器，甚至幾秒鐘就能上線，適合用來：

• 架設 API
• 攔截與轉發請求
• 客製化 CDN 邏輯
• 優化網站載入效能

基本概念與架構

使用 Cloudflare Workers 之前，我們需要先掌握幾個核心概念，這些是它與傳統後端架構最大的差異，也是它能快速、穩定、高效運作的關鍵。

Edge Computing 是什麼？—讓你的程式「離使用者更近」

在傳統架構中，網站或 API 會部署在某個固定地區的伺服器上（例如台灣的台北、AWS 的東京區域）。

當用戶來自地球另一端，例如倫敦或紐約，他們發出的請求必須跨越數千公里，經過多個網路節點，才能抵達該伺服器，延遲自然較高。

Edge Computing（邊緣運算） 的概念就是：

把程式碼部署到「全球上百個節點」，讓它在最接近使用者的地點執行。

Cloudflare 擁有超過 300 個節點分佈在世界各地，當你使用 Workers 時，Cloudflare 會將你的程式部署到這些節點中，當使用者發出請求，最近的節點就會立即處理，實現「極低延遲」的效果。

📌 優勢總結：

• 🚀 快速反應：用戶不必等待遠端伺服器回應
• 🌐 全球可用：自動分發程式碼到世界各地
• 🔐 安全穩定：利用 Cloudflare 的 DDoS 保護與快取機制

無伺服器（Serverless）模式—你只要寫程式，其它都自動搞定

Serverless 並不是真的沒有伺服器，而是你不需要自己維護伺服器。

傳統開發時，我們要：

1. 租用雲端主機（如 EC2、VPS）
2. 安裝作業系統、Runtime、部署應用
3. 管理 CPU/記憶體資源分配
4. 自行監控流量、壓力測試、擴充負載

而在 Serverless 架構下：

• 你只需要寫好處理請求的程式
• Cloudflare 自動幫你在用戶發出請求時「即時運行這段程式碼」
• 無須考慮機器配置或流量擴充問題
• 以執行次數計費，不執行就不花錢

這種模式適合：

• 不固定高流量的 API（突發性請求）
• 想快速推出 MVP（最小可行產品）的新創團隊
• 不想花時間處理伺服器設定的前端工程師

📌 舉個例子：

以往你可能要花 2 小時架設一個 Node.js API，現在只要幾分鐘撰寫一段 JS，Cloudflare 幫你搞定部署與全球佈署。

使用語言—JavaScript 為主，也支援 TypeScript 與 WebAssembly

Cloudflare Workers 的設計初衷就是讓「前端也能寫後端」。因此：

• 使用者最常用的語言就是 JavaScript（與瀏覽器一致）
• 若你偏好類型安全，也支援 TypeScript
• 如果你是效能狂人，也可以使用 WebAssembly（支援 Rust、C、Go 編譯）

📌 舉例：

你平常會寫這樣的 JS：

document.querySelector('button').addEventListener('click', () => {
  alert('clicked!');
});

那麼你可以很快學會這樣的 Workers 程式碼：

addEventListener("fetch", event => {
  event.respondWith(new Response("Hello from Workers!"));
});

語法熟悉、上手快，不用學新語言、不用架環境，這是 Cloudflare Workers 特別適合初學者的原因之一。

總結來說，Cloudflare Workers 的整體概念是：

用最少的設定、最快的速度，把你寫的 JavaScript 程式碼發送到全球節點，在使用者最接近的地方執行，實現超快速、免維護、高穩定的 Web 應用。

Hello World：打造你的第一支 Worker（非 modules 模式）

Cloudflare Workers 的開發流程其實非常簡單，尤其在非模組（non-modules）模式下，只需少量 JavaScript，就能建立出一個能回應請求的伺服器端程式。

本章將帶你從零開始，完成「Hello World」的 Worker 應用，體驗邊緣運算的魅力。

安裝開發工具 wrangler

Cloudflare 提供一套官方指令工具 wrangler，專門用來初始化、模擬、本地測試與部署 Workers 專案。

📋 安裝方式（需先安裝 Node.js）：

npm install -g wrangler

安裝完畢後，你可以透過以下指令確認版本：

wrangler --version

建立一個新專案（非 modules 模式）

wrangler init my-worker

初始化過程中系統會問你幾個問題：

• 你要用 JavaScript 還是 TypeScript？
• 要不要建立 Git 儲存庫？
• 選擇 “no” 使用模組格式？👉 這裡請選擇「no」，我們要使用非模組格式（service-worker 格式）。

這樣會產生以下幾個檔案：

my-worker/
├── wrangler.toml        # 專案設定檔
├── index.js             # 主程式碼（非模組格式）
└── package.json         # Node 專案資訊

編輯程式碼（index.js）

在 index.js 中編寫你第一支 Worker 程式：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  return new Response("Hello from Cloudflare Workers!", {
    headers: { "content-type": "text/plain" },
  });
}

這段程式碼的意思是：

• addEventListener("fetch", ...)：攔截所有進來的 HTTP 請求
• event.respondWith(...)：回應這個請求
• handleRequest：你可以自訂的處理邏輯，例如要回傳文字、JSON，或做轉發等操作

本地開發與測試

Cloudflare 提供一個模擬環境，讓你可以在本機快速測試你的 Worker 程式。

wrangler dev

執行後會顯示：

⬣ [my-worker] Listening on http://127.0.0.1:8787

打開瀏覽器前往 http://127.0.0.1:8787，你就會看到：

Hello from Cloudflare Workers!

如果你修改了程式，儲存後會自動重新載入，方便反覆測試與調整。

部署到線上

當你測試沒問題後，可以用一行指令部署上 Cloudflare：

wrangler publish

執行後會顯示：

✨ Success! Uploaded my-worker (version x.x.x)
Your worker is deployed at https://my-worker.<your-subdomain>.workers.dev

這個網址就是你部署後的雲端服務，全球使用者皆可透過最近的節點連線。

附註：wrangler.toml 設定說明

name = "my-worker"
type = "javascript"  # 非 modules 模式關鍵設定

account_id = "<你的 Cloudflare 帳戶 ID>"
workers_dev = true    # 是否使用 workers.dev 的子網域
compatibility_date = "2025-05-22"

成功！你已完成第一支 Cloudflare Worker

你現在已經具備：

• 建立本機開發環境的能力
• 撰寫並測試邏輯程式碼
• 快速上傳部署至全球節點

接下來你可以：

• 回傳 JSON、建立 API
• 結合第三方 API、驗證 Token
• 實作 Proxy、CORS、中介邏輯

常用功能範例

建立 API 服務

Cloudflare Workers 最基礎的用途之一就是建立 Web API，讓你可以快速回應前端請求，無需佈署傳統伺服器。

📌 實際用途：

• 建立登入驗證、表單提交等後端邏輯
• 產生動態內容（例如根據 query 參數輸出不同資料）
• 對接第三方 API，作為中繼處理站

📋 範例程式：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const data = { message: "Hello from the Edge!" };
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
}

這樣就建立了一個可以回傳 JSON 的簡單 API，不需伺服器、不需部署基礎設施。

攔截 HTTP 請求與回應

你可以攔截所有經過的請求與回應，在它們傳送到使用者或伺服器之前，進行修改與控制。

📌 可應用於：

• 客製化 Header（如自動加上權限 Token）
• 檢查來源 IP 或 User-Agent，實作地區封鎖或機器人過濾
• 實作安全檢查與驗證邏輯

📋 範例程式：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const modifiedHeaders = new Headers(request.headers);
  modifiedHeaders.set("X-Worker-Intercepted", "true");

  const newRequest = new Request(request.url, {
    method: request.method,
    headers: modifiedHeaders,
  });

  return fetch(newRequest);
}

這段程式碼示範如何攔截並修改請求 Header。

當作 Proxy 使用（反向代理）

Cloudflare Workers 可以作為一個 Proxy 中繼站，將請求轉發到其他 API 或伺服器上，並處理跨網域（CORS）或認證等邏輯。

📌 常見用途：

• 將來自前端的 API 請求導向第三方平台（例如 OpenAI、Stripe 等）
• 為限制來源的 API（如僅允許某個 IP）提供代理管道
• 解決瀏覽器的跨域限制（CORS）

📋 範例程式：

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const targetUrl = "https://api.example.com/data";
  const response = await fetch(targetUrl, {
    headers: {
      "Authorization": "Bearer your_token_here"
    }
  });
  return response;
}

這可用於前端與第三方服務之間建立中繼站，避免直接暴露密鑰給使用者。

頁面優化與個人化

因為 Workers 運行於 Edge，可以根據使用者位置、裝置類型、語言設定等資訊，在第一時間動態調整回應內容。

📌 常見情境：

• 顯示符合使用者所在地區語言的版本（如中文/英文切換）
• 根據裝置大小（手機、桌機）調整初始載入內容
• 記錄並分析使用者行為，用於後續 A/B 測試或追蹤

📋 實作方式：

可以透過 request.headers.get("User-Agent")、request.headers.get("Accept-Language") 或使用 Cloudflare 提供的 Geolocation 資訊。

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request));
});

async function handleRequest(request) {
  const country = request.cf?.country || "TW";
  const lang = request.headers.get("Accept-Language")?.split(",")[0] || "en";

  const message = country === "JP" ? "こんにちは" :
                  lang.startsWith("zh") ? "你好" : "Hello";

  return new Response(`${message} from ${country}`, {
    headers: { "Content-Type": "text/plain" },
  });
}

Cloudflare Workers 的優點與限制

使用 Cloudflare Workers 有很多好處，但同時也要注意它設計上的特性與限制。

以下為完整解析：

優點

限制

建議用在哪些場景？

Cloudflare Workers 非常適合：

• 建立輕量級 API（如表單回應、Webhook 處理、Token 驗證）
• 前後端之間的 Proxy 或中繼伺服器
• A/B 測試、地區導向、語言切換等前端客製化處理
• 部署靜態網站的 API 配套方案

結語：讓你的程式離用戶更近一步

Cloudflare Workers 改變了我們部署後端邏輯的方式，不再需要傳統伺服器、不再受限於單一地區部署。

無論你是前端工程師還是架站新手，只要會 JavaScript，就能開始打造屬於自己的後端服務。

現在就試試吧，用 Workers 架一個自己的 API，讓全世界的人 100 毫秒內就能連到！