やりたかったこと

Cloudflare Workersでサーバーレスな関数を作りたかった。 サーバーを用意せずにAPIエンドポイントやリダイレクト処理を実装できる。

環境

  • Cloudflare Workers
  • Wrangler CLI

Cloudflare Workersとは

  • サーバーレスの実行環境
  • 世界中のCloudflareエッジサーバーで動く
  • 無料枠：1日10万リクエストまで
  • コールドスタートがほぼない

手順

1. Wranglerをインストール

npm install -g wrangler
wrangler --version

2. Cloudflareにログイン

wrangler login

3. プロジェクトを作成

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

4. Workerのコード（src/index.js）

export default {
  async fetch(request) {
    const url = new URL(request.url);

    if (url.pathname === '/api/hello') {
      return new Response(JSON.stringify({ message: 'Hello from Worker!' }), {
        headers: { 'Content-Type': 'application/json' },
      });
    }

    return new Response('Not Found', { status: 404 });
  },
};

5. ローカルで動作確認

wrangler dev

http://localhost:8787 で確認できる。

6. デプロイ

wrangler deploy

よくある使い方

リダイレクト処理

export default {
  async fetch(request) {
    const url = new URL(request.url);
    if (url.pathname === '/old-page') {
      return Response.redirect('https://example.com/new-page', 301);
    }
    return fetch(request);
  },
};

CORSヘッダーを追加

export default {
  async fetch(request) {
    const response = await fetch(request);
    const newHeaders = new Headers(response.headers);
    newHeaders.set('Access-Control-Allow-Origin', '*');
    return new Response(response.body, {
      status: response.status,
      headers: newHeaders,
    });
  },
};

ハマったポイント

  • Workersは Node.js ではなくWeb標準APIを使う
  • wrangler dev でローカルテストができる
  • 無料枠でも十分な用途が多い

関連記事