Cloudflare Workers 入門教學：邊緣運算的第一步

Cloudflare Workers 讓你可以在 Cloudflare 全球 300+ 個邊緣節點上執行 JavaScript，延遲極低，無需管理伺服器。無論是 API Gateway、請求轉換、A/B 測試，還是簡單的靜態回應，Workers 都能輕鬆勝任。

什麼是邊緣運算

傳統架構中，所有請求都要跑回你在某個地區的伺服器。邊緣運算將程式碼部署到離使用者最近的節點，大幅降低網路延遲。

傳統架構：用戶（台北）→ 美西伺服器（150ms 延遲）
邊緣運算：用戶（台北）→ 台北邊緣節點（5ms 延遲）

快速開始

安裝 Wrangler CLI

npm install -g wrangler
wrangler login  # 使用瀏覽器授權

建立第一個 Worker

npm create cloudflare@latest my-first-worker
cd my-first-worker

生成的 src/index.ts：

export default {
  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
    const url = new URL(request.url)
    
    if (url.pathname === '/hello') {
      return new Response('Hello from the Edge!', {
        headers: { 'Content-Type': 'text/plain' }
      })
    }
    
    return new Response('Not Found', { status: 404 })
  }
}

# 本地開發
npx wrangler dev

# 部署
npx wrangler deploy

路由與請求處理

export default {
  async fetch(request: Request, env: Env): Promise<Response> {
    const url = new URL(request.url)
    const method = request.method

    // 路由分派
    if (method === 'GET' && url.pathname === '/api/users') {
      return handleGetUsers(request, env)
    }
    
    if (method === 'POST' && url.pathname === '/api/users') {
      return handleCreateUser(request, env)
    }

    return new Response(JSON.stringify({ error: 'Not Found' }), {
      status: 404,
      headers: { 'Content-Type': 'application/json' }
    })
  }
}

async function handleGetUsers(request: Request, env: Env): Promise<Response> {
  // 從 KV 儲存讀取資料
  const users = await env.USERS_KV.get('all_users', 'json')
  
  return new Response(JSON.stringify(users ?? []), {
    headers: {
      'Content-Type': 'application/json',
      'Cache-Control': 'public, max-age=60'
    }
  })
}

KV 儲存：輕量級鍵值資料庫

Workers KV 是全球分散的鍵值儲存，適合讀多寫少的場景：

# wrangler.toml
[[kv_namespaces]]
binding = "USERS_KV"
id = "your-kv-namespace-id"

// 寫入
await env.USERS_KV.put('user:123', JSON.stringify({ name: 'Alice' }), {
  expirationTtl: 3600  // 1 小時後過期
})

// 讀取
const user = await env.USERS_KV.get('user:123', 'json')

// 刪除
await env.USERS_KV.delete('user:123')

// 列表
const list = await env.USERS_KV.list({ prefix: 'user:' })

D1 資料庫：邊緣端 SQLite

Cloudflare D1 是建立在 SQLite 之上的 SQL 資料庫，可在 Worker 中直接執行 SQL：

[[d1_databases]]
binding = "DB"
database_name = "my-database"
database_id = "your-database-id"

async function handleGetUser(request: Request, env: Env): Promise<Response> {
  const url = new URL(request.url)
  const userId = url.searchParams.get('id')
  
  const result = await env.DB.prepare(
    'SELECT * FROM users WHERE id = ?'
  ).bind(userId).first()
  
  if (!result) {
    return new Response('User not found', { status: 404 })
  }
  
  return Response.json(result)
}

環境變數與機密

# wrangler.toml（非機密設定）
[vars]
API_VERSION = "v2"
ENVIRONMENT = "production"

# 機密變數（不寫入 wrangler.toml）
npx wrangler secret put API_SECRET_KEY
# 輸入機密值...

export interface Env {
  API_VERSION: string
  API_SECRET_KEY: string  // 自動注入
  USERS_KV: KVNamespace
  DB: D1Database
}

實戰：CORS Proxy

一個常見的 Workers 應用場景是解決前端跨域問題：

export default {
  async fetch(request: Request): Promise<Response> {
    // 處理 preflight
    if (request.method === 'OPTIONS') {
      return new Response(null, {
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE',
          'Access-Control-Allow-Headers': 'Content-Type, Authorization',
        }
      })
    }

    // 轉發請求到目標 API
    const targetUrl = new URL(request.url).searchParams.get('url')
    if (!targetUrl) {
      return new Response('Missing url parameter', { status: 400 })
    }

    const response = await fetch(targetUrl, {
      method: request.method,
      headers: request.headers,
      body: request.body
    })

    // 複製回應並加上 CORS 標頭
    const newResponse = new Response(response.body, response)
    newResponse.headers.set('Access-Control-Allow-Origin', '*')
    return newResponse
  }
}

費用與限制

Cloudflare Workers 免費方案提供每天 100,000 次請求，每次最多 10ms CPU 時間。對多數小型應用已足夠。付費方案（$5/月）解除大部分限制並提供更長的 CPU 時間。

總結

Cloudflare Workers 是現代邊緣運算的最佳入門選擇之一，部署簡單、延遲極低、生態豐富（KV、D1、R2、Queues）。對於 API 代理、靜態內容個人化、認證層等場景，Workers 往往比傳統伺服器方案更快更省錢。