ClaudeCodeでCloudflareへデプロイする方法【Workers/Pages完全ガイド】
「アプリを公開したいけど、サーバー費用は抑えたい」「社内専用ツールを安全に運用したい」――そんなニーズに最適なのがCloudflare Workers/Pagesです。Cloudflareは世界最大級のCDNを持ち、エッジでアプリを動かすことで圧倒的な高速性と低コストを実現しています。さらにCloudflare AccessとD1データベースを組み合わせれば、認証付きの社内アプリも数時間で構築できます。本記事では、ClaudeCodeを使ってCloudflareにNext.jsアプリをデプロイする手順を、wrangler導入、初回デプロイ、D1連携、Access認証連携まで実プロンプト例つきで徹底解説します。社内ルールに準拠した安全な構成を意識した内容です。
結論：ClaudeCode×Cloudflareは社内アプリの最適解
結論を先に言うと、社内向けや小規模公開アプリには「ClaudeCode + Cloudflare Workers + D1 + Cloudflare Access」の組み合わせが最強です。
理由は3つあります。1つ目は、料金が極めて安い点です。Workersは1日10万リクエストまで無料、D1も標準的な使い方なら無料枠で十分賄えます。同等構成をAWSで作ると月数十ドルかかるところが、Cloudflareなら実質ゼロ円で済むケースが多いです。
2つ目は、Cloudflare Accessによる認証が強力かつ簡単な点です。「特定のメールアドレスでのみログインを許可する」設定が画面ポチポチで完結し、自前で認証を実装する必要がありません。これはセキュリティ的にも運用負荷的にも大きなメリットです。
3つ目は、エッジ実行による高速性です。日本国内なら数十ミリ秒で応答が返り、表示遅延がほぼゼロになります。
ただし、いくつか守るべきルールがあります。最も重要なのは、wrangler.jsoncで"preview_urls": falseを必ず設定することです。これを忘れるとCloudflare Accessの認証をバイパスされる可能性があります。また、APIキーやシークレットは絶対にコードに書かず、wrangler secret putで登録します。これらの注意点を踏まえれば、安全な構成が手に入ります。
以下では、Cloudflare Workersの基礎、wrangler導入、初回デプロイ、D1データベース、Access認証連携までを順に解説します。
Cloudflare Workers/Pagesとは：エッジコンピューティングの基本
Cloudflareは元々CDN（コンテンツ配信ネットワーク）の会社ですが、近年は「Workers」「Pages」「D1」「R2」「KV」など、サーバーレス開発に必要なフルスタック機能を提供しています。
主要サービスの概要：
- Workers：JavaScript/TypeScriptで書いたコードを、世界300拠点以上のエッジで実行できるサーバーレスランタイム。
- Pages：静的サイト＋関数のホスティング。GitHub連携でビルドからデプロイまで自動。
- D1：SQLiteベースのサーバーレスDB。Workersから直接アクセス可能。
- R2：S3互換のオブジェクトストレージ。エグレス料金が無料。
- KV：超低レイテンシのKey-Valueストア。
- Access：Zero Trustの認証ゲートウェイ。特定ユーザーのみアクセスを許可。
Workersの料金は、無料プランで1日10万リクエスト、有料プラン（月5ドル）で1,000万リクエストまで利用可能です。個人や小規模社内アプリなら無料プランで完結します。
PagesとWorkersの違いは曖昧になりつつあり、最近は「Pages」がフロント、「Workers」がバックエンドと使い分けるよりも、Next.jsのフルスタックアプリをWorkers単体で動かす構成が主流です。本記事もWorkers中心で進めます。
wrangler CLIのインストールと初期設定
Cloudflare WorkersへのデプロイにはwranglerというCLIツールを使います。
プロンプト例1：wranglerのインストールと認証
wrangler CLIをインストールして、Cloudflareアカウントと連携してください。
私はまだCloudflareアカウントを持っていないので、登録手順から教えてください。
ClaudeCodeは次の手順を案内します。
- Cloudflareアカウント登録：https://dash.cloudflare.com/sign-upから登録。
- wranglerインストール：
npm install -g wrangler
- ログイン：
wrangler login
ブラウザが開き、Cloudflareの認証画面でAuthorizeをクリック。
- 確認：
wrangler whoami
メールアドレスとAccount IDが表示されれば成功です。
ClaudeCodeで初回プロジェクトを作成・デプロイする
プロンプト例2：Next.jsプロジェクトのWorkers向け初期化
Next.js（TypeScript、App Router）プロジェクトを新規作成し、
Cloudflare Workersへのデプロイ準備をしてください。
- プロジェクト名: my-internal-app
- @opennextjs/cloudflareを使用
- wrangler.jsoncの初期設定も生成
- preview_urlsはfalseに設定（社内ルール）
ClaudeCodeは次のように進めます。
npx create-next-app@latest my-internal-app
cd my-internal-app
npm install --save-dev wrangler @opennextjs/cloudflare
そしてwrangler.jsoncを生成します。
{
"name": "my-internal-app",
"main": ".open-next/worker.js",
"compatibility_date": "2026-05-01",
"compatibility_flags": ["nodejs_compat"],
"preview_urls": false,
"assets": {
"directory": ".open-next/assets",
"binding": "ASSETS"
}
}
"preview_urls": falseが含まれている点に注目してください。これがないと、Cloudflareが自動生成するプレビューURL（*.workers.dev）からCloudflare Accessの認証をバイパスできてしまうため、社内アプリでは必須設定です。
プロンプト例3：初回デプロイ
このアプリをCloudflare Workersにデプロイしてください。
ビルドからデプロイまで実行をお願いします。
ClaudeCodeは次のコマンドを順に実行します。
npx @opennextjs/cloudflare build
wrangler deploy
デプロイ完了後、https://my-internal-app.<your-subdomain>.workers.devのURLが表示されますが、preview_urls: falseなのでこのURLは公開されず、独自ドメイン経由でのみアクセス可能です。
D1データベースの作成と連携
D1はCloudflareのサーバーレスSQLiteで、Workersから直接クエリできます。
プロンプト例4：D1データベースの作成とスキーマ定義
このアプリ用にD1データベースを作成してください。
- 名前: my-internal-app-db
- usersテーブル（id, email, name, created_at）
- postsテーブル（id, user_id, title, content, created_at）
- マイグレーションファイルを作成してD1に適用
- wrangler.jsoncにバインディング追加
ClaudeCodeの実行内容：
wrangler d1 create my-internal-app-db
出力されるdatabase_idをwrangler.jsoncに追記します。
{
"name": "my-internal-app",
"main": ".open-next/worker.js",
"compatibility_date": "2026-05-01",
"compatibility_flags": ["nodejs_compat"],
"preview_urls": false,
"d1_databases": [
{
"binding": "DB",
"database_name": "my-internal-app-db",
"database_id": "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}
]
}
マイグレーションファイルmigrations/0001_init.sqlを生成：
CREATE TABLE users (
id INTEGER PRIMARY KEY AUTOINCREMENT,
email TEXT UNIQUE NOT NULL,
name TEXT NOT NULL,
created_at TEXT DEFAULT CURRENT_TIMESTAMP
);
CREATE TABLE posts (
id INTEGER PRIMARY KEY AUTOINCREMENT,
user_id INTEGER NOT NULL,
title TEXT NOT NULL,
content TEXT,
created_at TEXT DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (user_id) REFERENCES users(id)
);
適用：
wrangler d1 migrations apply my-internal-app-db --remote
Next.jsからD1にアクセスする例：
// src/app/api/users/route.ts
import { getCloudflareContext } from "@opennextjs/cloudflare";
export async function GET() {
const { env } = getCloudflareContext();
const { results } = await env.DB.prepare(
"SELECT id, email, name FROM users ORDER BY created_at DESC LIMIT 100"
).all();
return Response.json(results);
}
ClaudeCodeに「D1から最新100件のユーザーを取得するAPIルートを書いて」と頼めば、このようなコードが生成されます。
シークレットの管理：wrangler secret put
APIキーやトークンは絶対にコードやwrangler.jsoncに書かず、Cloudflare Secretsに登録します。
プロンプト例5：シークレット登録
StripeのAPIキーをCloudflareのSecretsに登録する手順を教えてください。
本番環境用と開発用を分けて管理したいです。
コマンド：
wrangler secret put STRIPE_SECRET_KEY
実行するとキーの値を聞かれるので、ペーストしてEnter。これでCloudflareの暗号化ストレージに保存され、Workersからenv.STRIPE_SECRET_KEYとして参照可能になります。
Next.jsからは次のように使います。
const { env } = getCloudflareContext();
const stripeKey = env.STRIPE_SECRET_KEY;
ローカル開発用は.dev.varsファイルに記述し、.gitignoreに追加します。
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxx
Cloudflare Accessによる認証連携（社内ルール準拠）
社内アプリで最も重要なのが認証です。独自のパスワード認証を実装するのは危険なので、Cloudflare Accessを使います。
Cloudflare Accessの設定手順：
- Cloudflareダッシュボードで「Zero Trust」を選択。
- 「Access → Applications」を開き、「Add an application」をクリック。
- アプリの種類で「Self-hosted」を選択。
- アプリ名（例：my-internal-app）と公開URL（例：
app.example.com）を入力。 - 「Identity providers」でOne-time PIN（メール認証）またはGoogle Workspaceなどを選択。
- 「Policies」で「Allow」ルールを作成し、「Emails」フィールドに許可するメールアドレスを列挙。
Include:
Emails: yamada@example.com, suzuki@example.com
- 設定を保存。
これで、設定したメールアドレス以外はアプリにアクセスしようとしてもログイン画面で弾かれます。
プロンプト例6：Access連携の確認とユーザー情報取得
Cloudflare Access経由でログインしたユーザーのメールアドレスを、
Next.jsアプリ内で取得する方法を教えてください。
ClaudeCodeは、Access JWTヘッダー（Cf-Access-Jwt-Assertion）から情報を取得するコード例を生成します。
import { jwtVerify, createRemoteJWKSet } from 'jose';
const TEAM_DOMAIN = 'your-team.cloudflareaccess.com';
const AUD = 'your-application-aud-tag';
export async function getAccessUser(request: Request) {
const token = request.headers.get('Cf-Access-Jwt-Assertion');
if (!token) return null;
const JWKS = createRemoteJWKSet(
new URL(`https://${TEAM_DOMAIN}/cdn-cgi/access/certs`)
);
const { payload } = await jwtVerify(token, JWKS, {
issuer: `https://${TEAM_DOMAIN}`,
audience: AUD,
});
return payload.email as string;
}
これで「認証ユーザーのメールアドレス」を信頼できる形でアプリ内に取り込めます。
独自ドメインとSSLの設定
Workersに独自ドメインを割り当てる場合、Cloudflareが既にそのドメインのDNSを管理している必要があります。
手順：
- Cloudflareダッシュボードで対象ドメインを開く。
- 「Workers Routes」または「Workers & Pages → Custom domains」で「Add Custom Domain」をクリック。
app.example.comのようなサブドメインを入力。- DNSレコードとSSL証明書が自動設定される。
数分でアクセス可能になります。SSL証明書もCloudflareが無料で自動発行します。
実践チュートリアル：認証付き社内ToDoアプリを作る
ここまでの内容を使って、社内向けToDoアプリを作ってみましょう。
ステップ1：プロジェクト作成
社内向けのToDoアプリを作りたいです。
- Next.js + TypeScript + App Router
- Cloudflare Workersデプロイ前提
- D1でToDoを管理（タイトル、完了フラグ、作成日時、作成者メール）
- Cloudflare Access経由のメールアドレスでユーザーを識別
- preview_urls: falseを設定
プロジェクトの初期化と必要なファイル生成をお願いします。
ステップ2：D1セットアップ
todoテーブルを作成するマイグレーションを書いて、D1に適用してください。
カラムは id, title, done, created_at, owner_email です。
ステップ3：API実装
ToDoのCRUD API（/api/todos）を実装してください。
- GET: 自分のToDo一覧
- POST: 新規作成
- PATCH /api/todos/[id]: 完了切替
- DELETE /api/todos/[id]: 削除
ユーザーはCloudflare AccessのJWTから取得し、owner_emailで絞り込み。
ステップ4：UI実装
ToDoリストのUIを作ってください。
- 一覧表示、入力欄、追加ボタン、完了チェック、削除ボタン
- Tailwind CSSでミニマルなデザイン
- App Routerでサーバーコンポーネントを活用
ステップ5：デプロイ
本番デプロイしてください。
ビルド、wrangler deploy、ヘルスチェックまでお願いします。
ステップ6：Access設定
ダッシュボードでtodo.example.comにAccessポリシーを適用。許可メールアドレスを登録すれば、社内専用ToDoアプリの完成です。
FAQ：Cloudflare × ClaudeCode よくある質問
Q1. Cloudflare Workersは本当に無料で使えますか？
無料プランで1日10万リクエストまで使えます。社内10人で1日中操作してもまず超えません。超えたら有料プラン（月5ドル）で1,000万リクエスト/月になります。
Q2. preview_urls: falseはなぜ必須なのですか？
Cloudflareは標準でWorkersに*.workers.devのプレビューURLを発行します。このURLはCloudflare Accessの保護対象外なので、認証をバイパスして社内データに直接アクセスできてしまいます。社内アプリでは必ずfalseに設定してください。
Q3. D1のデータ量に制限はありますか？
無料プランで1データベース10GB、5,000万行までです。読み取り1日500万、書き込み1日10万まで無料。社内ツールなら十分です。
Q4. ClaudeCodeにシークレット登録を頼んだら、値ごと表示されてしまわないか心配です。
wrangler secret putはキー名のみ指定して、値はインタラクティブに入力する仕様です。コマンドラインの履歴やログにも値は残りません。ClaudeCodeはキー名のみを管理するため、値が漏れる心配はありません。
Q5. Cloudflare Accessの料金はどうなっていますか？
Cloudflare Accessは50ユーザーまで無料です。社内ツールならまず無料枠で収まります。それ以上は1ユーザー月3〜7ドル程度。
Q6. Vercelと比べてどちらがいいですか？
公開ブログやポートフォリオならVercelが手軽です。社内ツール、認証必須、料金抑制が重要ならCloudflareが圧倒的に有利です。本サイトの運営方針では社内アプリはCloudflare構成を推奨しています。
Q7. Pagesではなく必ずWorkersを使うべきですか？
最新のCloudflareは「Workers + Static Assets」構成を推奨しており、PagesはWorkersの一形態に統合される方向です。これから始めるならWorkers + @opennextjs/cloudflareの構成が長期的に安全です。
まとめ
Cloudflare Workers + D1 + Cloudflare Accessの組み合わせは、社内アプリや小規模公開アプリにとって最高のインフラ構成です。ClaudeCodeを使えば、wranglerコマンドやwrangler.jsoncの細かい設定、D1のスキーマ設計、Access連携コードまで、すべて日本語で指示するだけで完結します。ただし、preview_urls: falseの設定、シークレットのwrangler secret put管理、独自パスワード認証の禁止など、社内ルールは厳格に守ってください。これらを守れば、安全で高速、低コストな社内アプリを誰でも構築できます。まずは小さなToDoアプリから始めて、Cloudflareの便利さを体験してみましょう。