Cloudflare Workers入門：エッジ関数の基本とデプロイ手順

2026年5月20日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 1. エッジコンピューティングと Workers の概要
- 1.1 1‑1. エッジで得られる遅延削減
- 1.2 1‑2. Workers のアーキテクチャとスケール特性
2 2. 開発環境の構築と Hello World デプロイ
3 3. エッジ向けフレームワークとサービスの実装例
4 4. ローカル開発・デバッグ・運用ベストプラクティス
5 5. 料金プランと導入シナリオ（2026 年版）
- 5.1 5‑1. 典型的なユースケース別概算（月額）
- 5.2 5‑2. 学習ロードマップと次のステップ

スポンサードリンク

1. エッジコンピューティングと Workers の概要

エッジコンピューティングは、ユーザーに最も近いデータセンターでコードを実行し、ネットワーク往復時間（RTT）を短縮するアーキテクチャです。Workers は Cloudflare が提供するサーバーレスプラットフォームで、世界 300 以上のエッジロケーション（※2026 年 3 月時点の公式ドキュメント）に自動展開されます。本セクションでは 遅延削減効果 と スケーリング特性 を具体的に示し、従来型クラウドと比較したメリットを整理します。

1‑1. エッジで得られる遅延削減

実測データ（Cloudflare Network Analytics）によると、日本国内から東京エッジへリクエストを送った場合、米国リージョン経由に比べ 約 30 ms のレイテンシー低減が確認されています。この数値は平均的な HTTP GET（サイズ 1 KB）の測定結果です。※出典：https://developers.cloudflare.com/network/analytics/

1‑2. Workers のアーキテクチャとスケール特性

Workers は「リクエストごとに軽量 V8 インスタンスを生成し、処理完了後に破棄」する設計です。これにより次の３点が実現します。

特徴	説明
低遅延	ユーザーに最も近いロケーションで即時実行
自動スケーリング	トラフィック増加時はオンデマンドでインスタンスが生成、容量計画不要
グローバル展開のシンプルさ	コードを一度デプロイすれば 300+ エッジに瞬時に配布

結論：Workers は「高速」＋「スケーラブル」なエッジサーバーレスとして、実務で最も汎用性が高い選択肢です。

2. 開発環境の構築と Hello World デプロイ

この章では Cloudflare アカウント作成から wrangler CLI のインストール、最小構成の Hello World をデプロイする手順を順に解説します。5 分以内でエッジ関数が公開できること が本章のゴールです。

2‑1. アカウント作成と Workers の有効化

Cloudflare ダッシュボード（https://dash.cloudflare.com）にアクセスし、Sign Up → メール認証でアカウントを作成。
左メニューの Workers → Create a Service をクリックすると無料枠（10 M リクエスト／月）が自動付与されます。

2‑2. Wrangler CLI のインストールと初期化

# 前提：Node.js (v20 以上) がインストール済み
npm install -g wrangler

# Cloudflare アカウントにログイン（ブラウザが起動）
wrangler login

# プロジェクト作成（JavaScript テンプレート）
mkdir cf-hello &amp;&amp; cd cf-hello
wrangler init --type javascript .

# 前提：Node.js (v20 以上) がインストール済み

npm install -g wrangler

# Cloudflare アカウントにログイン（ブラウザが起動）

wrangler login

# プロジェクト作成（JavaScript テンプレート）

mkdir cf-hello && cd cf-hello

wrangler init --type javascript .

wrangler.toml が自動生成され、以下のような基本設定が記述されています。

name = &quot;cf-hello&quot;
compatibility_date = &quot;2024-01-01&quot;
main = &quot;./src/index.js&quot;

# Workers のプレビュー環境（ローカル dev）で利用する場合は有効化
[dev]
port = 8787

name = "cf-hello"

compatibility_date = "2024-01-01"

main = "./src/index.js"

# Workers のプレビュー環境（ローカル dev）で利用する場合は有効化

[dev]

port = 8787

2‑3. Hello World ハンドラ（JavaScript）

// src/index.js
export default {
  async fetch(request, env) {
    return new Response(&quot;Hello from Cloudflare Workers! &#x1f30e;&quot;, {
      headers: { &quot;Content-Type&quot;: &quot;text/plain&quot; },
    });
  },
};

// src/index.js

export default {

async fetch(request, env) {

return new Response("Hello from Cloudflare Workers! 🌎", {

headers: { "Content-Type": "text/plain" },

});

};

2‑4. デプロイ手順

# ローカルで動作確認（オプション）
wrangler dev

# 本番環境へデプロイ
wrangler publish

# ローカルで動作確認（オプション）

wrangler dev

# 本番環境へデプロイ

wrangler publish

デプロイ完了後、https://cf-hello.<your-subdomain>.workers.dev/ にアクセスすると上記メッセージが表示されます。

ポイント：wrangler dev はローカルで Cloudflare のエッジ環境をエミュレートし、デプロイ前に即座にテストできます。

3. エッジ向けフレームワークとサービスの実装例

2026 年現在、Cloudflare が提供するエッジライブラリは多数ありますが、本節では Hono（軽量ルーティング）、D1（SQLite互換 DB）、R2（オブジェクトストレージ）、そして Workers AI (Kimi L2.5) の組み合わせを実務で使える形にまとめます。

3‑1. Hono によるルーティングとミドルウェア

Hono は Express ライクな API をエッジ上で高速に提供します。公式ドキュメント（https://hono.dev/）に基づき、以下の構成を示します。

npm add hono   # npm 7+ でインストール

1 2	npm add hono # npm 7+ でインストール

// src/hono.ts
import { Hono } from &quot;hono&quot;;
import { logger } from &quot;hono/logger&quot;;

const app = new Hono();

// ロギングミドルウェア（全リクエストに適用）
app.use(&quot;*&quot;, logger());

app.get(&quot;/&quot;, (c) =&gt; c.text(&quot;Welcome to Hono on Workers!&quot;));
app.post(&quot;/echo&quot;, async (c) =&gt; {
  const payload = await c.req.json();
  return c.json({ received: payload });
});

export default app;

// src/hono.ts

import { Hono } from "hono";

import { logger } from "hono/logger";

const app = new Hono();

// ロギングミドルウェア（全リクエストに適用）

app.use("*", logger());

app.get("/", (c) => c.text("Welcome to Hono on Workers!"));

app.post("/echo", async (c) => {

const payload = await c.req.json();

return c.json({ received: payload });

});

export default app;

wrangler.toml のエントリポイントを変更します。

main = &quot;./src/hono.ts&quot;
type = &quot;javascript&quot;   # ESモジュール方式（Webpack 不要）

main = "./src/hono.ts"

type = "javascript" # ESモジュール方式（Webpack 不要）

3‑2. D1 データベースの接続と CRUD 実装

D1 は SQLite 互換のサーバーレス DB です。公式ガイド（https://developers.cloudflare.com/d1/）を参照し、以下の手順でデータベースを作成・バインディングします。

wrangler d1 create mydb

1 2	wrangler d1 create mydb

wrangler.toml にバインディング情報を追加：

[[d1_databases]]
binding = &quot;DB&quot;
database_name = &quot;mydb&quot;
database_id = &quot;&lt;generated-id&gt;&quot;

[[d1_databases]]

binding = "DB"

database_name = "mydb"

database_id = "<generated-id>"

CRUD ハンドラ（Hono と組み合わせ）

// src/d1.ts
import { Hono } from &quot;hono&quot;;

type Bindings = {
  DB: D1Database;
};

const app = new Hono&lt;{ Bindings: Bindings }&gt;();

app.get(&quot;/init&quot;, async (c) =&gt; {
  await c.env.DB.prepare(`
    CREATE TABLE IF NOT EXISTS notes (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      title TEXT,
      content TEXT,
      created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
    )
  `).run();
  return c.text(&quot;Table ready&quot;);
});

app.post(&quot;/notes&quot;, async (c) =&gt; {
  const { title, content } = await c.req.json();
  const res = await c.env.DB.prepare(
    &quot;INSERT INTO notes (title, content) VALUES (?, ?)&quot;
  ).bind(title, content).run();
  return c.json({ id: res.lastInsertRowId });
});

app.get(&quot;/notes/:id&quot;, async (c) =&gt; {
  const { id } = c.req.param();
  const row = await c.env.DB.prepare(&quot;SELECT * FROM notes WHERE id = ?&quot;)
    .bind(id)
    .first();
  return c.json(row);
});

export default app;

// src/d1.ts

import { Hono } from "hono";

type Bindings = {

DB: D1Database;

};

const app = new Hono<{ Bindings: Bindings }>();

app.get("/init", async (c) => {

await c.env.DB.prepare(`

CREATE TABLE IF NOT EXISTS notes (

id INTEGER PRIMARY KEY AUTOINCREMENT,

title TEXT,

content TEXT,

created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP

)

`).run();

return c.text("Table ready");

});

app.post("/notes", async (c) => {

const { title, content } = await c.req.json();

const res = await c.env.DB.prepare(

"INSERT INTO notes (title, content) VALUES (?, ?)"

).bind(title, content).run();

return c.json({ id: res.lastInsertRowId });

});

app.get("/notes/:id", async (c) => {

const { id } = c.req.param();

const row = await c.env.DB.prepare("SELECT * FROM notes WHERE id = ?")

.bind(id)

.first();

return c.json(row);

});

export default app;

3‑3. R2 オブジェクトストレージへのアップロード/ダウンロード

R2 は S3 互換のエッジオブジェクトストレージです。公式リファレンス（https://developers.cloudflare.com/r2/）に沿って、以下のハンドラを実装します。

[[r2_buckets]]
binding = &quot;BUCKET&quot;
bucket_name = &quot;&lt;your-bucket&gt;&quot;
preview_bucket_name = &quot;&lt;your-bucket&gt;-preview&quot;

[[r2_buckets]]

binding = "BUCKET"

bucket_name = "<your-bucket>"

preview_bucket_name = "<your-bucket>-preview"

// src/r2.ts
import { Hono } from &quot;hono&quot;;

type Bindings = {
  BUCKET: R2Bucket;
};

const app = new Hono&lt;{ Bindings: Bindings }&gt;();

app.post(&quot;/upload&quot;, async (c) =&gt; {
  const form = await c.req.formData();
  const file = form.get(&quot;file&quot;) as File;
  const key = `${Date.now()}_${file.name}`;

  await c.env.BUCKET.put(key, file.stream(), {
    httpMetadata: { contentType: file.type },
  });

  return c.json({ url: `https://${c.env.BUCKET.bucketName}.r2.cloudflarestorage.com/${key}` });
});

app.get(&quot;/download/:key&quot;, async (c) =&gt; {
  const { key } = c.req.param();
  const signedUrl = await c.env.BUCKET.createSignedURL(key, { expires: 300 });
  return c.redirect(signedUrl);
});

export default app;

// src/r2.ts

import { Hono } from "hono";

type Bindings = {

BUCKET: R2Bucket;

};

const app = new Hono<{ Bindings: Bindings }>();

app.post("/upload", async (c) => {

const form = await c.req.formData();

const file = form.get("file") as File;

const key = `${Date.now()}_${file.name}`;

await c.env.BUCKET.put(key, file.stream(), {

httpMetadata: { contentType: file.type },

});

return c.json({ url: `https://${c.env.BUCKET.bucketName}.r2.cloudflarestorage.com/${key}` });

});

app.get("/download/:key", async (c) => {

const { key } = c.req.param();

const signedUrl = await c.env.BUCKET.createSignedURL(key, { expires: 300 });

return c.redirect(signedUrl);

});

export default app;

3‑4. Workers AI（Kimi L2.5）プロキシ関数

Workers AI の最新モデル Kimi L2.5 は、REST API 経由で呼び出すことができます。公式リファレンス（https://developers.cloudflare.com/ai/）を基に、認証トークンは Secrets として管理します。

# .dev.vars（ローカル開発用）
AI_TOKEN = &quot;YOUR_DEV_TOKEN&quot;

# .dev.vars（ローカル開発用）

AI_TOKEN = "YOUR_DEV_TOKEN"

// src/ai.ts
import { Hono } from &quot;hono&quot;;

type Bindings = {
  AI_TOKEN: string;
};

const app = new Hono&lt;{ Bindings: Bindings }&gt;();

app.post(&quot;/ai/chat&quot;, async (c) =&gt; {
  const payload = await c.req.json(); // 例: { messages: [...] }

  const resp = await fetch(
    &quot;https://api.cloudflare.com/client/v4/accounts/&lt;ACCOUNT_ID&gt;/ai/run/@cf/kimi/l2.5&quot;,
    {
      method: &quot;POST&quot;,
      headers: {
        Authorization: `Bearer ${c.env.AI_TOKEN}`,
        &quot;Content-Type&quot;: &quot;application/json&quot;,
      },
      body: JSON.stringify(payload),
    }
  );

  const data = await resp.json();
  return c.json(data);
});

export default app;

// src/ai.ts

import { Hono } from "hono";

type Bindings = {

AI_TOKEN: string;

};

const app = new Hono<{ Bindings: Bindings }>();

app.post("/ai/chat", async (c) => {

const payload = await c.req.json(); // 例: { messages: [...] }

const resp = await fetch(

"https://api.cloudflare.com/client/v4/accounts/<ACCOUNT_ID>/ai/run/@cf/kimi/l2.5",

{

method: "POST",

headers: {

Authorization: `Bearer ${c.env.AI_TOKEN}`,

"Content-Type": "application/json",

body: JSON.stringify(payload),

}

);

const data = await resp.json();

return c.json(data);

});

export default app;

まとめ：Hono のミドルウェアチェーンで認証・ロギングを一元化し、D1・R2・Workers AI を同一 Workers プロジェクトに組み込むだけで、フルスタックのエッジアプリが数百行のコードで完成します。

4. ローカル開発・デバッグ・運用ベストプラクティス

実務で安定稼働させるには、ローカルテストと CI/CD の自動化が不可欠です。本節では wrangler dev、シークレット管理、CORS 設定、そして GitHub Actions を使ったデプロイフローを具体的に示します。

4‑1. `wrangler dev` とダッシュボードログの活用

# ローカルエミュレーション（HTTPS が必要な場合は --local）
wrangler dev

# ローカルエミュレーション（HTTPS が必要な場合は --local）

wrangler dev

リクエスト確認：ターミナルにメソッド・パス・ステータスがリアルタイムで出力されます。
本番ログ：Cloudflare ダッシュボード > Workers > Logs からストリーム形式で取得可能です。フィルタで env やエラーメッセージだけを抽出できます。

4‑2. シークレット・KV・CORS の安全な設定

項目	推奨手順
シークレット	`wrangler secret put AI_TOKEN` → Workers 内で `env.AI_TOKEN` と参照。Git リポジトリに平文は残さない。
KV アクセス	名前空間ごとに `read`／`write` のロールを分離し、最小権限の原則を徹底。
CORS	Hono ミドルウェアで一括設定例： `app.use("", (c, next) => { c.res.headers.set("Access-Control-Allow-Origin", ""); return next(); })`

4‑3. GitHub Actions による CI/CD パイプライン

.github/workflows/deploy.yml

name: Deploy Workers

on:
  push:
    branches: [ main ]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Set up Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'

      - name: Install Wrangler
        run: npm install -g wrangler

      - name: Install dependencies
        run: npm ci

      - name: Lint &amp; Test
        run: npm run lint &amp;&amp; npm test

      - name: Publish to Cloudflare Workers
        env:
          CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}
        run: |
          wrangler publish --env production

name: Deploy Workers

on:

push:

branches: [ main ]

jobs:

build-and-deploy:

runs-on: ubuntu-latest

steps:

- uses: actions/checkout@v4

- name: Set up Node.js

uses: actions/setup-node@v3

with:

node-version: '20'

- name: Install Wrangler

run: npm install -g wrangler

- name: Install dependencies

run: npm ci

- name: Lint & Test

run: npm run lint && npm test

- name: Publish to Cloudflare Workers

env:

CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

run: |

wrangler publish --env production

シークレットは GitHub リポジトリ設定の CF_API_TOKEN に保存し、コード上に露出させません。
ビルド・テストが成功したら自動的に本番環境へデプロイされるため、人為的ミスを大幅に削減できます。

要点：ローカル dev で高速フィードバック、GitHub Actions で安全な自動リリースというフローが、エッジ開発の標準となります。

5. 料金プランと導入シナリオ（2026 年版）

公式サイト（https://www.cloudflare.com/pricing/）に基づき、無料枠 + 従量課金 のハイブリッドモデルをまとめました。表中の数値はすべて 2026 年 4 月時点の最新情報です。

項目	無料枠	超過時従量料金
リクエスト	10 M リクエスト／月	$0.05 / 1 M リクエスト
CPU 時間	合計 100 ms/リクエスト（≈5 B CPU‑ms）	$0.02 / 1 M CPU‑ms
データ転送（アウトバウンド）	10 GB／月	$0.09 / GB
D1 ストレージ	100 MB ディスク、25 K クエリ/月	$0.0005 / MB・$0.04 / 1 K クエリ
R2 ストレージ	10 GB 保存＋10 GB ダウンロード／月	$0.015 / GB（保存）・ $0.02 / GB（ダウンロード）

5‑1. 典型的なユースケース別概算（月額）

シナリオ	前提条件	想定コスト
API バックエンド	1 M リクエスト、平均 CPU 時間 200 ms/リクエスト	$2.00（CPU） + $0.05（リクエスト） = $2.05
D1 CRUD アプリ	5 K クエリ、データ 20 MB 保存	$0.02（クエリ） + $0.01（保存） = $0.03
R2 画像配信	ダウンロード 30 GB、保存 15 GB	$0.60（ダウンロード） + $0.225（保存） = $0.825

合計で 約 $3–$5／月 と、同等のトラフィックを持つ従来型 VM（数十ドル以上）に比べて極めて低コストです。

5‑2. 学習ロードマップと次のステップ

フェーズ	学習項目	成果イメージ
入門	Workers 基礎、Hello World、`wrangler dev`	エッジ関数を自力でデプロイ可能
実装	Hono ルーティング、D1 CRUD、R2 ストレージ	フロントエンドと連携したフルスタック API が構築できる
高度化	Workers AI、カスタムミドルウェア、CI/CD（GitHub Actions）	AI 生成コンテンツや自動テストを組み込んだ本番レベルのサービスが提供可能

次のアクション：本リポジトリ（例: github.com/yourname/cf‑starter）をクローンし、wrangler dev → wrangler publish を順に実行すれば、5 分で自分だけのエッジ関数が稼働します。ぜひ試してみてください。

本稿は 2026 年 4 月時点の公式情報を元に作成しています。料金やロケーション数は予告なく変更される可能性がありますので、最新情報は必ず Cloudflare のドキュメントをご確認ください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-Cloudflare

comment コメントをキャンセル

: Cloudflare

Zero TrustとCloudflare Oneの基本と導入事例 – 2026年最新ガイド

Zero Trustの原則とCloudflare Oneが提供するZTNA、SWG、CASB、IDaaSを活用した導入事例と効果、実装手順を徹底解説します。

: Cloudflare

Cloudflare Zero Trust（Cloudflare One）とは？2026年最新構成と無料プラン設定

Zero TrustモデルとCloudflare Zero Trustの最新コンポーネント、無料プランでの導入手順をわかりやすく紹介します。

: Cloudflare

Cloudflare Workersで認証付きサーバーレスAPIを構築・自動デプロイ

本ハンズオンでは Cloudflare Workers と Wrangler による認証付きサーバーレス API の設計・実装から、GitHub Actions を用いた自動デプロイまでを具体的に解説します。

: Cloudflare

CloudflareでDNSSECを設定する手順と注意点

Cloudflareを使ったDNSSEC導入を、導入前準備、Cloudflareでの有効化とDS取得、レジストラ登録、検証コマンド、トラブル対処まで実務的にまとめます。

: Cloudflare

Cloudflare R2 完全ガイド：無料10GBとエグレス料金なしで始める方法

本記事では Cloudflare R2 の無料枠やエグレス料金なしの特徴を踏まえ、アカウント作成からバケット設定、CLI・GUI操作、Workers/Pages連携、Nextcloud統合まで実務で使える手順を詳しく紹介します。

Microsoft Authenticator導入ガイド：企業向けMFAのメリットと設定手順

Arkio使い方入門ガイド｜インストール・BIM連携・運用

Cloudflare Workers入門：エッジ関数の基本とデプロイ手順

1. エッジコンピューティングと Workers の概要

1‑1. エッジで得られる遅延削減

1‑2. Workers のアーキテクチャとスケール特性

2. 開発環境の構築と Hello World デプロイ

2‑1. アカウント作成と Workers の有効化

2‑2. Wrangler CLI のインストールと初期化

2‑3. Hello World ハンドラ（JavaScript）

2‑4. デプロイ手順

3. エッジ向けフレームワークとサービスの実装例

3‑1. Hono によるルーティングとミドルウェア

3‑2. D1 データベースの接続と CRUD 実装

CRUD ハンドラ（Hono と組み合わせ）

3‑3. R2 オブジェクトストレージへのアップロード/ダウンロード

3‑4. Workers AI（Kimi L2.5）プロキシ関数

4. ローカル開発・デバッグ・運用ベストプラクティス

4‑1. wrangler dev とダッシュボードログの活用

4‑2. シークレット・KV・CORS の安全な設定

4‑3. GitHub Actions による CI/CD パイプライン

5. 料金プランと導入シナリオ（2026 年版）

5‑1. 典型的なユースケース別概算（月額）

5‑2. 学習ロードマップと次のステップ

2. 開発環境の構築と Hello World デプロイ

2‑3. Hello World ハンドラ（JavaScript）

3‑4. Workers AI（Kimi L2.5）プロキシ関数

4‑1. `wrangler dev` とダッシュボードログの活用

5. 料金プランと導入シナリオ（2026 年版）