Contents
Cloudflare Workers とエッジコンピューティングの基礎
Cloudflare Workers は、世界中に分散したエッジロケーションで JavaScript（または TypeScript） を直接実行できるサーバーレス環境です。この章では Workers の基本概念と、エッジコンピューティングがもたらす「低遅延」・「高可用性」のメリットを整理します。まず、従来のリージョン型クラウドと比較した際の実装上の違いに注目し、その後具体的なユースケースを示します。
エッジでコードを走らせるメリット
エッジ実行はリクエストがユーザーに最も近い PoP（ポイント・オブ・プレゼンス）で処理されるため、往復遅延が大幅に削減されます。
- 低遅延 – Cloudflare のネットワークは 2026 年時点で 約 350 カ所のデータセンター を有し、平均レイテンシは 30 ms 前後と報告されています【1】。
- 自動スケーリング – エッジノードはトラフィックに応じて自律的に負荷分散するため、サーバー側で個別にインスタンスを増減させる必要がありません。
これらの特性は、フロントエンド機能や API ゲートウェイなど「ユーザー体験」が鍵となるサービスに最適です。
無料プランと料金体系、アカウント作成手順
Cloudflare Workers は無料枠が充実しているため、個人開発者でもコストをかけずにエッジコードの検証が可能です。このセクションでは 2026 年最新版 のプラン内容と、実際にアカウントを取得する手順をご紹介します。
無料プランの概要
無料プラン（Workers Free）は開発・テスト向けに設計されており、以下のリソースが月間で利用できます。
| 項目 | 仕様（2026 年時点） |
|---|---|
| 月間リクエスト上限 | 10 万 リクエスト*【2】 |
| スクリプトサイズ | 最大 1 MB |
| KV ストア容量 | 合計 5 GB（読み取り 100 k 回/日まで無料） |
| Durable Objects | 3 個（実験的） |
| ログ保持期間 | 24 時間 |
*※月間リクエスト上限は「10 万回」ではなく「1 日あたり 10 万回」（≈ 300 万回/月）に変更されています。超過分は従量課金（$0.50 / 1M リクエスト、KV 読み取り $0.05 / 100k 回）となります【2】。
無料枠の活用ポイント
- 小規模なデモや学習用途であれば ほぼ制限なく 動作確認が可能。
- 超過した場合は自動的に従量課金へシフトするため、サービス停止のリスクが低い。
アカウント登録とダッシュボード操作
Cloudflare のアカウント作成は数分で完了し、取得直後から Workers の UI にアクセスできます。以下の手順に従ってください。
- 公式サイト https://dash.cloudflare.com に移動し「Sign Up」
- メールアドレスとパスワードを入力 → 送信された認証メールをクリック
- 任意で 二要素認証（2FA） を有効化（推奨）
- ダッシュボード左メニューの 「Workers」→「Overview」 を選択
UI が表示されたら、まずは「Create a Worker」からサンプルコードを試すと、CLI に移行する前に概念を視覚的に把握できます。
開発環境構築：Wrangler CLI のインストールとプロジェクト作成
ローカルで Workers を開発・テストするには公式ツール wrangler が必須です。本節では推奨インストール方法と、生成されるディレクトリ構造を解説します。
Wrangler のインストール（npm 推奨）
| 環境 | インストールコマンド |
|---|---|
| npm | npm install -g wrangler |
| Homebrew | brew install cloudflare/cloudflare/wrangler |
| Cargo (Rust) | cargo install wrangler --locked |
インストール後はバージョンを確認しましょう（2026 年 4 月時点で v3.14.0 が最新）【3】。
|
1 2 |
wrangler --version # → v3.14.0 |
なぜ npm が最適か
npm は Node.js エコシステムの中心に位置し、バージョン管理や自動アップデートが容易です。Homebrew や Cargo でも利用可能ですが、追加の依存関係が必要になるケースがあります。
プロジェクト初期化とディレクトリ構成
wrangler init <project-name> を実行すると、ベストプラクティスに沿った雛形が自動生成されます。主な構造は次の通りです。
|
1 2 3 4 5 6 |
my-worker/ ├─ src/ # エントリポイント (index.js / index.ts) │ └─ index.js ├─ wrangler.toml # デプロイ設定ファイル └─ package.json # npm パッケージ（必要に応じて） |
wrangler.toml の最小例は以下です。compatibility_date は必ず最新の日付を指定してください。
|
1 2 3 4 5 6 7 8 |
name = "my-worker" main = "./src/index.js" compatibility_date = "2026-07-01" [env.staging] route = "staging.example.com/*" zone_id = "<YOUR_ZONE_ID>" |
生成されたファイルはすべて Git 管理下に置くことを推奨します。設定ミスが起きた際のロールバックが容易になるためです。
Hello World Worker の実装・ローカルテスト、デプロイ手順
最初の Workers は「Hello World」だけでも十分学習効果があります。この章ではコード例、ローカル検証方法、ステージングと本番へのデプロイフローを具体的に示します。
Hello World スクリプト
src/index.js に次のコードを書き込みます。Fetch API をそのまま利用できる点が特徴です。
|
1 2 3 4 5 6 7 8 |
export default { async fetch(request) { return new Response("Hello World from Cloudflare Workers!", { headers: { "content-type": "text/plain" }, }); }, }; |
ポイント：1 行の
new Responseで完結するため、学習コストが極めて低くなります。
ローカルテスト（wrangler dev）
以下のコマンドでローカルサーバーを起動し、実際にリクエストを送ってみましょう。
|
1 2 |
wrangler dev # → http://127.0.0.1:8787 でプレビュー開始 |
ターミナルまたは curl で確認します。
|
1 2 3 |
curl http://127.0.0.1:8787 # => Hello World from Cloudflare Workers! |
wrangler dev はエッジランタイムと同等のヘッダー処理や環境変数注入をシミュレートするため、本番デプロイ前の検証に最適です【4】。
ステージング・本番へのデプロイ
-
ステージング
bash
wrangler publish --env staging
wrangler.tomlの[env.staging]が自動的に適用され、指定した Route に配備されます。 -
本番
bash
wrangler publish
デプロイ後はダッシュボードの Workers → Overview でリクエスト数やエラーレートを確認できます。ステージングで問題がなければ、同一コードを本番にプッシュするだけで安全にリリース完了です。
便利機能・デバッグ・よくあるエラー対策
Workers はシンプルな Hello World を超えて、Routes の絞り込みや KV / Durable Objects といった永続化機能を提供します。ここでは実務で頻出する設定例と、トラブルシューティングの手順をまとめます。
Routes 設定と KV／Durable Objects の基本
Routes は特定 URL パスだけに Worker を適用できるため、不要なリクエストへの余計な処理を防げます。KV と Durable Objects はエッジ上で軽量データ永続化が可能です。
設定例（Dashboard）
| 項目 | 値 |
|---|---|
| Pattern | example.com/api/* |
| Action | Worker を適用 |
KV カウンタのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 |
export default { async fetch(request, env) { const url = new URL(request.url); if (url.pathname === "/counter") { const hits = Number(await env.COUNTER_KV.get("hits") || "0") + 1; await env.COUNTER_KV.put("hits", String(hits)); return new Response(`Hit count: ${hits}`); } return new Response("Not a counter endpoint"); }, }; |
Durable Objects のシンプル実装
|
1 2 3 4 5 6 7 8 9 10 |
export class Counter { constructor(state) { this.state = state; } async fetch(request) { const current = (await this.state.storage.get("count")) || 0; await this.state.storage.put("count", current + 1); return new Response(`Durable count: ${current + 1}`); } } |
要点：Routes による対象限定と KV／DO の組み合わせで、エッジ側のキャッシュやセッション管理が容易になります。
ログ取得とデバッグ手法
| 方法 | 説明 |
|---|---|
wrangler tail |
CLI からリアルタイムに JSON 形式でログをストリーム。--env production で環境指定可能【5】 |
| Dashboard → Workers → Logs | UI 上で過去 24 時間分のリクエストとスタックトレースを閲覧 |
|
1 2 |
wrangler tail --format json # ローカル端末にリアルタイムログ出力 |
CLI と UI の併用で、ローカルテストだけでなく本番環境でも迅速な問題切り分けが実現します。
典型的なエラーと対処法
| エラー例 | 主な原因 | 推奨対策 |
|---|---|---|
ビルド失敗 (npm run build がエラー) |
wrangler.toml の構文ミス、依存パッケージ未インストール |
Linter で TOML 検証 → npm ci 再実行 |
| CORS エラー | Access-Control-Allow-Origin ヘッダー欠如 |
レスポンスヘッダーに "*"（または許可ドメイン）を追加 |
| リクエストサイズ超過 (1 MB) | 大容量ペイロードの直接送信 | 受信したデータはバックエンドへ転送、もしくは KV に分割保存 |
| KV バインディング未設定 | wrangler.toml の [kv_namespaces] が欠如 |
名前空間を定義し、コード内で env.<NAME> を使用 |
ポイント：ほとんどのエラーは「設定ミス」や「リソース上限」のため、公式エラーメッセージに沿って即座に修正できることが多いです。
次のステップ
本記事で Workers の概念、無料プランの実際、開発環境構築からデプロイまでを体験しました。ここからは以下のような応用テーマに挑戦してみましょう。
- API プロキシ – 外部 API へリクエスト転送し、KV にキャッシュを保存するパターン
- 画像最適化 –
@cloudflare/kv-asset-handlerと組み合わせてオンデマンドでサイズ変更・圧縮 - 認証ミドルウェア – エッジ上で JWT を検証し、アクセス制御を実装
最新情報や高度なユースケースは Cloudflare 公式ドキュメント（Developers → Workers）で随時更新されています【6】。ぜひ自分のプロジェクトに合わせてカスタマイズし、エッジコンピューティングの真価を体感してください。
サンプルコードとコマンドまとめ（コピー＆ペースト可）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
# 1. Wrangler のインストール (npm 推奨) npm install -g wrangler # 2. プロジェクト作成 mkdir hello-worker && cd hello-worker wrangler init . # 3. src/index.js に貼り付けるコード cat > src/index.js <<'EOF' export default { async fetch(request) { return new Response("Hello World from Cloudflare Workers!", { headers: { "content-type": "text/plain" }, }); }, }; EOF # 4. ローカルテスト wrangler dev # http://127.0.0.1:8787 で確認 # 5. ステージングデプロイ（事前に env.staging を wrangler.toml に設定） wrangler publish --env staging # 6. 本番デプロイ wrangler publish |
この手順を実行すれば、数分で Hello World Worker がエッジ上に公開されます。ぜひ試してみてください。
参考リンク・出典
- Cloudflare Network Overview – https://www.cloudflare.com/network/ (2026 年 3 月閲覧)
- Workers Pricing – https://developers.cloudflare.com/workers/platform/pricing/ (2026 年 5 月更新)
- Wrangler Release Notes – https://github.com/cloudflare/wrangler/releases/tag/v3.14.0 (2026 年 4 月)
- Local Development with wrangler dev – https://developers.cloudflare.com/workers/cli-wrangler/dev/ (2026 年 2 月閲覧)
- Real‑time Logs – https://developers.cloudflare.com/workers/platform/logs/ (2026 年 1 月更新)
- Workers Documentation Home – https://developers.cloudflare.com/workers/ (2026 年 7 月現在)