Cloudflare ハンズオン教科書|2026-08 版
第 1 章

Cloudflare の全体像と開発環境セットアップ

アカウント作成から wrangler CLI・C3 まで、開発の土台を整える

この章で学ぶこと

Cloudflare の全体像 — グローバルネットワークと開発者プラットフォーム

Cloudflare は、世界中に配置されたサーバー群からなるグローバルネットワークです。インターネット上で最大級の規模を持ち、その上で SASE / SSE(Zero Trust)サービス、アプリケーションサービス、インフラストラクチャサービス、そして本書の主役である開発者プラットフォーム(Developer Platform)を提供しています。

Cloudflare の使い方は大きく 2 つに分けられます。

Built with Cloudflare — 応答をつくるのは自前のオリジン Cloudflare ネットワーク ブラウザ CDN・WAF キャッシュ オリジン サーバー ここだけ自前で運用 リクエスト ミス時はオリジンへ Built on Cloudflare — Cloudflare 自体がオリジン(本書のスタイル) Cloudflare ネットワーク(=オリジン) ブラウザ Worker エッジで実行 KV・R2・D1 ストレージ リクエスト バインディング経由
図 1-1 2 段の違いは箱の数ではなく、Cloudflare の枠がどこまで囲っているかです。上段は右端のオリジンが枠の外にあって自分で用意・運用しますが、下段では枠がそこまで広がり、外へ出ていく辺が 1 本も残りません(本書が扱うのは下段だけです)。

開発者プラットフォームの中核が Cloudflare Workers です。サーバーレスコードを世界中のネットワークへ即座にデプロイできます。周辺には用途別のストレージ・データ製品が揃っており、本書の第 II 部以降で順に扱います。

ユースケース製品本書での登場
キーバリューストレージWorkers KV第 5 章
オブジェクトストレージR2第 6 章
軽量 SQL データベースD1第 7 章
グローバル調整・ステートフルサーバーレスDurable Objects第 8 章
タスク処理・メッセージングQueues第 9 章
ベクトル検索Vectorize第 12 章
サーバーレス GPU での AI 推論Workers AI第 11 章

このほか、フロントエンド配信(Workers Static Assets / Pages)、画像・動画配信(Images / Stream)などもプラットフォームに含まれます。

アカウントの構造と Free プランでできること

Cloudflare には設定の置き場所を決める 3 つの組織単位があります。

  1. ユーザープロファイル — ログインするあなた個人の設定(メールアドレス、言語、通知設定など)
  2. アカウント — 組織の単位。課金情報・メンバー・アカウントレベル製品を持ちます。Workers はアカウントレベルの製品で、1 ユーザーは複数アカウントに所属できます
  3. ゾーン — Cloudflare に追加したドメインの単位。DNS・キャッシュルールなどゾーンレベル製品はそのドメインだけに作用します

重要なのは、Workers の開発にゾーン(独自ドメイン)は必須ではないという点です。アカウントには workers.dev サブドメインが付属し、独自ドメインを持ち込まなくても Worker を公開できます(詳細は後述)。

設定の置き場所は 3 つ。Workers はアカウントの中にある アカウント(課金・メンバー・Workers) ユーザー プロファイル メール・言語 所属 1 人で複数アカウント可 Worker コードの実体 workers.dev サブドメイン ゾーン 独自ドメイン(任意) この 2 つだけで公開できる 第 2 章で追加
図 1-2 公開に必要なものはアカウントの箱の中で出そろいます。Worker と workers.dev サブドメインが同じ並びにあり、ゾーンは隣に置かれた任意の箱、プロファイルはアカウントを内包せず外から所属する関係です。

Workers はデフォルトで Workers Free プランで利用でき、そのまま学習を始められます。主な上限は次のとおりです(2026-08 時点)。

項目Workers FreeWorkers Paid($5 USD/月〜)
リクエスト数100,000 件/日1,000 万件/月 込み(超過 $0.30/100 万件)
CPU 時間10 ミリ秒/呼び出し3,000 万 CPU ミリ秒/月 込み(最大 5 分/呼び出し)
メモリ128 MB128 MB
Worker サイズ(gzip 圧縮後)3 MB10 MB
Worker 数100 個500 個
Cron Triggers5 個/アカウント250 個/アカウント

静的アセットへのリクエストは無料・無制限です。また Free プランには Workers KV(読み取り 100,000 件/日、書き込み 1,000 件/日、保存 1 GB)や Hyperdrive の限定利用も含まれます(2026-08 時点)。本書のハンズオンは、有料機能を使う章で明示する場合を除き Free プランで完走できます。数値の最新版は Limits と Pricing を参照してください。

開発を支える 2 つの CLI — C3 と Wrangler

Cloudflare の開発者プラットフォームには 2 つのコマンドラインツールがあります。役割分担は明快です。

Wrangler はグローバルではなくプロジェクトごとにローカルインストールするのが公式推奨です。チームで同じバージョンを共有でき、プロジェクト単位でバージョンを固定・ロールバックできるためです。C3 でプロジェクトを作ると Wrangler が自動的にインストールされるので、通常は改めて入れる必要はありません。実行は npx wrangler ... 形式を使います。

動作要件(2026-08 時点): Wrangler は Node.js の Current / Active / Maintenance リリースをサポートし、OS は macOS 13.5+、Windows 11、glibc 2.35 をサポートする Linux ディストリビューションが対象です。Node.js は権限問題の回避とバージョン切り替えのため、mise や nvm などのバージョンマネージャー経由でのインストールが推奨されています。

プロジェクトの設定は wrangler.jsonc(または wrangler.toml)に記述します。最小構成は次のような形です。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-first-worker",
  "main": "src/index.js",
  "compatibility_date": "2026-08-10"
}

name は Worker の名前で、後述する workers.dev の URL にもそのまま使われます。Wrangler を使うプロジェクトでは wrangler.jsonc を source of truth(正)として扱い、ダッシュボード側で設定を変更しないことが公式に推奨されています。両方で触ると設定が食い違い、事故のもとになります。本書は一貫して wrangler.jsonc を正とする CLI スタイルで進めます。

なお、インストールを一切せずブラウザだけで Workers を体験したい場合は Playground というサンドボックスもあります(認証不要。Chrome / Firefox デスクトップのみ対応)。

workers.dev サブドメイン — デプロイ先の URL を理解する

各アカウントに付属する workers.dev サブドメインは、独自ドメインなしで Worker を公開するための仕組みです。URL は次の形式になります。

https://<YOUR_WORKER_NAME>.<YOUR_ACCOUNT_SUBDOMAIN>.workers.dev

<YOUR_WORKER_NAME> には wrangler.jsonc の name フィールドが、<YOUR_ACCOUNT_SUBDOMAIN> にはこのあとのハンズオン 1-1 で確認するアカウントのサブドメインが入ります。Worker 名は DNS ラベルとして使われるため、63 文字以内・英数字とダッシュのみ・先頭と末尾のダッシュ不可という制約があります。

デプロイ先 URL は 2 つの設定から組み立てられる wrangler.jsonc name フィールド ダッシュボード Your subdomain 自分で決める アカウントごと https:// my-first-worker . your-subdomain .workers.dev ここが DNS ラベルになるので 63 字以内・英数字とダッシュ
図 1-3 URL の可変部は 2 つあり、前半はリポジトリの wrangler.jsonc で自分が決める値、後半はアカウントに紐づく値です。前半はそのまま DNS ラベルになるため、63 字・英数字とダッシュという制約は Worker 名だけに掛かります。

workers.dev 上の Worker は Free プランの Web サイトと同じ扱いで、個人・趣味プロジェクト向けです。本番運用ではルートまたはカスタムドメインの利用が推奨されています(第 2 章で扱います)。公開したくない場合は wrangler.jsonc に "workers_dev": false を書くか、Cloudflare Access で閲覧者を制限できます。

ハンズオン 1-1|アカウントを作成してダッシュボードを歩く

Cloudflare アカウントを作成し、Workers 開発で使う画面と情報の場所を確認します。所要時間は 10 分ほどです。

  1. サインアップページを開き、メールアドレスとパスワードを入力して Create Account を選択する
  2. 登録アドレスに届く確認メールを開き、メールアドレスを検証する(未検証だと一部のダッシュボード機能が使えません)
  3. ダッシュボードにログインし、Workers & Pages ページを開く。ここが Workers 開発のホーム画面になる
  4. 同ページの Account Details セクションでアカウント ID を確認する(API 操作で使う ID。任意のページで Cmd/Ctrl + K の検索から「Copy account ID」でもコピーできる)
  5. Your subdomain に表示される workers.dev サブドメインを確認する。変更したい場合は隣の Change から変更できる

アカウント名はデフォルトで「メールアドレス's Account」になります。Configurations ページの Account Name → Change Name から分かりやすい名前に変えておくと、複数アカウントを扱うときに迷いません。

ハンズオン 1-2|C3 で最初の Worker プロジェクトを作る

C3 を使って Hello World の Worker プロジェクトを生成します。所要時間は 5〜10 分です。

  1. まず Node.js と npm が入っていることを確認する
    node --version
    npm --version
  2. ターミナルで C3 を実行してプロジェクトを作る
    npm create cloudflare@latest -- my-first-worker
  3. 対話プロンプトでは次を選択する
    • What would you like to start with? → Hello World example
    • Which template would you like to use? → Worker only
    • Which language do you want to use? → JavaScript(TypeScript も選択可。第 2 章から TypeScript に切り替えます)
    • Do you want to use git for version control? → Yes
    • Do you want to deploy your application? → No(デプロイは第 2 章で行います)
  4. 生成されたプロジェクトへ移動する
    cd my-first-worker

ディレクトリには wrangler.jsonc(Wrangler 設定)、src/index.js(ES Modules 形式の Hello World Worker)、package.json、package-lock.json、node_modules が生成されていれば成功です。

ハンズオン 1-3|wrangler dev でローカル起動して編集を反映する

ローカル開発サーバーを起動し、初回ログイン認証とコード編集のサイクルを体験します。所要時間は 10 分ほどです。

  1. プロジェクトディレクトリでローカル開発サーバーを起動する
    npx wrangler dev
    Wrangler を初めて使う場合はブラウザが自動で開くので、Cloudflare アカウントでログインして Wrangler の OAuth 認可を許可する(wrangler login が内部で実行される。デフォルトでは利用可能な全スコープが要求される)
  2. ブラウザで http://localhost:8787 を開き、「Hello World!」が表示されることを確認する
  3. src/index.js を開き、レスポンス文字列を書き換えて保存する
    export default {
      async fetch(request, env, ctx) {
        return new Response("Hello Worker!");
      },
    };
  4. ブラウザをリロードし、出力が「Hello Worker!」に変わることを確認する
  5. 別のターミナルで認証状態を確認する
    npx wrangler whoami
    You are logged in with an OAuth Token, associated with the email ... のように表示されれば認証完了

wrangler dev はデフォルトで完全ローカル実行です。Worker コードは本番と同じオープンソースランタイム workerd 上(シミュレーターの Miniflare 経由)で動き、バインディング先のリソースもローカルにシミュレートされます。本番リソースに触れずに安心して試せる、これが今後全章で使う基本ループです。

wrangler dev — 実行もデータもこの点線の中だけで動く あなたのマシン(完全ローカル) ブラウザ localhost:8787 workerd Miniflare 経由 ローカルの KV・R2 など リクエスト env 経由 レスポンス(保存で即反映) Cloudflare 本番エッジ 点線を出るのは wrangler deploy だけ(第 2 章)
図 1-4 wrangler dev のあいだ、Worker もバインディング先のリソースも点線の内側にしかありません。ランタイムは本番と同じ workerd なので挙動は再現されるのに本番のデータには一切触れず、点線を越える辺は破線の deploy 1 本だけです。

つまずきポイント

wrangler login でブラウザが開かない / リモートマシンで認証できない

ブラウザが開けない環境では、ターミナルに表示される OAuth URL を手動でブラウザに貼り付ければログインできます。SSH 先などリモートマシンの場合、手元のブラウザでログインすると「This site can't be reached」と表示されますが、これは想定内です。ログインフローを開いたまま、リモートマシン側の別ターミナルでリダイレクト先の localhost URL を curl すれば完了します。コンテナ内で実行する場合はコールバックサーバーのポート 8976 をホストへマッピングし、npx wrangler login --callback-host=0.0.0.0 を使います。

Node.js のバージョンが古くて C3 / Wrangler が動かない

Wrangler がサポートするのは Node.js の Current / Active / Maintenance リリースです(2026-08 時点)。OS 標準のパッケージマネージャーで入れた古い Node.js で実行するとエラーになることがあります。mise や nvm などのバージョンマネージャーで最新 LTS に切り替えてください。バージョンマネージャー経由なら sudo なしでインストールでき、権限エラーも避けられます。

Worker 名が workers.dev の制約に引っかかる

workers.dev サブドメインを有効にしたままデプロイする場合、Worker 名(name フィールド)は 63 文字以内・英数字とダッシュのみ・先頭末尾のダッシュ不可を満たす必要があります。日本語やアンダースコア入りの名前は使えません。長い名前が必要な場合は workers.dev を無効化すれば 255 文字まで使えます。

ダッシュボードで workers.dev を無効化しても、デプロイすると復活する

ダッシュボード側で workers.dev ルートを無効化しても、wrangler.jsonc に "workers_dev": false を書いていなければ、次に Wrangler でデプロイしたときに再度有効化されます。source of truth を wrangler.jsonc に決めたら、公開設定も必ず設定ファイル側に書きましょう。

理解度チェック

Q1. Workers Free プランの 1 日あたりリクエスト上限と、1 呼び出しあたりの CPU 時間上限は?(2026-08 時点)

リクエストは 100,000 件/日、CPU 時間は 10 ミリ秒/呼び出しです。日次上限を超えると Cloudflare は Error 1027 を返します(ルート設定によっては Worker を素通しさせる fail open も選べます)。継続時間(I/O 待ち時間)は課金・制限の対象ではなく、CPU を実際に使った時間だけが数えられる点がポイントです。

Q2. C3 と Wrangler の役割分担を説明してください。

C3(create-cloudflare CLI)は新規プロジェクトの作成専用ツールで、公式テンプレートからプロジェクトを生成し、Wrangler を自動インストールします。Wrangler はその後の開発・デプロイ・管理を担う CLI で、wrangler dev でのローカル開発、デプロイ、ロールバックなどを行います。

Q3. デプロイした Worker の workers.dev 上の URL はどのように決まりますか?

<Worker 名>.<アカウントのサブドメイン>.workers.dev という形式です。Worker 名には wrangler.jsonc の name フィールドが使われ、アカウントのサブドメインはダッシュボードの Workers & Pages ページで確認・変更できます。

Q4. wrangler dev を実行したとき、Worker コードとバインディング先のリソースはそれぞれどこで動きますか?

デフォルトではどちらもローカルです。Worker コードは本番と同じランタイム workerd を使うシミュレーターの Miniflare 上で実行され、KV や R2 などのバインディング先リソースもローカルにシミュレートされます。設定により本番リソースへ接続するリモートバインディングも選べます。

まとめと次章へ

次章では、今日作った Hello World の中身 — fetch ハンドラと Request / Response — を掘り下げ、wrangler deploy で世界に公開します。

参考リンク: