Claude CodeでDB付きWebアプリを作ってCloudflareで公開する

Cloudflare Pages + Pages Functions + D1 実践ガイド

本資料の Cloudflare Pages / Pages Functions という表現は、今後 Workers 側の表現に変わる可能性があります。

このハンズオンを始める前に、Cloudflare構成ガイドを必ず読んでおくこと。また、GitHub初心者ガイドとCloudflare Pagesハンズオンも完了しておくこと。

1. このハンズオンで作るもの

Claude Codeで、DB付きのWebアプリをフルスタック開発してCloudflareで公開する。みんなが一緒に使える共有型Webアプリだ。

匿名一行掲示板を作る

このハンズオンではサンプルとして、匿名一行掲示板を作っていく。
仕様：

匿名一行掲示板 作例

Claude Codeに丸投げせず、理解しながら進める

「みんなが書き込める匿名掲示板を作って」の一言でコードはほぼできる。試しに作ってみる練習作や使い捨てならそれで十分。

ただ、実際に使い続けるものを作るとなると、DBやAPIが絡んでくるので全体像の理解が欠かせない。

まず、全体像を理解していないと、Claude Codeに頼めない手作業——GitHubのSecrets登録などのダッシュボード操作——が何のためのものかわからなくなり、トラブル時に困る。

逆に、全体像を理解した上でClaude Codeと一緒にステップバイステップで進めると、構成のパターンが身につき、「次は〇〇を作りたい」となったときにも応用できる。

ということで、「Claude Codeに丸投げせず、理解しながら進める」がこのハンズオンの方針である。

全体構成の復習

このハンズオンで使う構成を整理しておく（詳細はCloudflare構成ガイド）。

役割 Cloudflareのサービス
フロントエンド（画面・UI） Cloudflare Pages
バックエンド（API処理） Cloudflare Pages Functions
データベース Cloudflare D1

GitHubにpushすると、GitHub ActionsがD1のマイグレーション（データベース構造の管理）からPages・Pages Functionsのデプロイ（本番環境への公開・反映）まで一括で実行する。

WranglerはCloudflare公式のCLIツールで、ローカルとGitHub Actionsの両方で使われる。ローカルではD1データベースの作成・ログイン・開発プレビューに使い、GitHub Actionsではpushのたびにマイグレーションとデプロイを自動実行する。

この構成を念頭に置いて進めると、各章で「今何をやっているのか」がわかりやすくなる：

2. 事前準備（初回のみ・ブラウザ操作）

GitHubでリポジトリを作成

GitHub → New repository → リポジトリ名を入力して作成。Private にする（意図しないファイルの公開を防ぐため）。

CloudflareでAccount IDを確認

Cloudflareダッシュボード → Compute → Workers & Pages を開く。

CloudflareでAPIトークンを作成

右上👤アイコン → Profile → API Tokens → Create Token → Create Custom Token

Cloudflare API Token

作成されたトークンをコピーしておく（一度しか表示されない）。

GitHubにSecretsを登録

GitHubリポジトリ → Settings → Secrets and variables → Actions → New repository secret

Secret名 値
CLOUDFLARE_API_TOKEN 上記で作成したトークン
CLOUDFLARE_ACCOUNT_ID CloudflareのAccount ID

3. Node.js と Wrangler のセットアップ

Wrangler は初期セットアップ（D1データベースの作成・Cloudflareへのログインなど）や、開発中のローカルプレビュー・データベース操作に使う。Wrangler は Node.js 上で動くため、Node.js も必要となる。

インストールされてなければ、こちらの手順でインストールする。

完了したら、WranglerでCloudflareにログイン：

wrangler login

ブラウザが開いてCloudflareのOAuth認証画面が表示される。承認するとCLIから操作できるようになる。

Cloudflare OAuth認証画面

4. wrangler.toml と package.json の作成

GitHub Actions上でWranglerを動かすための設定。

サンプルプロンプト：

以下のテンプレートで wrangler.toml を作成してください。
アプリ名は「○○」、データベース名は「○○」、YYYY-MM-DDは昨日、
database_id はあとで記入するので xxxxxx のままにしておいてください。

---
name = "アプリ名"
compatibility_date = "YYYY-MM-DD"
pages_build_output_dir = "."

[[d1_databases]]
binding = "DB"
database_name = "データベース名"
database_id = "xxxxxx"
migrations_dir = "migrations"
---

作成後、5章で wrangler d1 create を実行したら表示される database_id を Claude Code に伝えて書き換えてもらう。

wrangler.toml の database_id を「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」に書き換えてください。

package.json も作成する：

以下の内容で package.json を作成してください。
アプリ名は「○○」としてください。

---
{
  "name": "アプリ名",
  "private": true,
  "devDependencies": {
    "wrangler": "^4"
  }
}
---

package.json を作成したら、npm install を実行する。package-lock.json が生成される。Claude Code にpushを依頼すれば自動でコミットに含まれる。

npm install

npm install を実行すると node_modules/ というフォルダが生成される。Wranglerの実体が入っている大容量フォルダで、コミットは不要。Claude Code が自動で .gitignore に追加してくれることが多いが、念のため .gitignore に node_modules/ を追加して と依頼してもよい。

5. 【データベース】D1データベースを作成（初回のみ）

npx wrangler d1 create データベース名
# 表示された database_id を wrangler.toml に記入

Database ID（database_id）とは？ データベースの識別子です。仮に外部に漏れても、API Tokenがなければ操作できないため問題ありません。

6. 【データベース】スキーマ設計とマイグレーションファイル

Claude Code にアプリの仕様を伝えてテーブル設計を相談する。

サンプルプロンプト（BBSの例）：

匿名一行掲示板を作ります。仕様は以下のとおりです。

- 名前登録なし、初めて投稿したときに会員番号が払い出される（1, 2, 3...の連番）
- 同じブラウザから投稿した人には毎回同じ会員番号が使われるようにする
- 画面には「会員1号」「会員2号」と表示する
- 投稿内容は1行のテキスト

このアプリに必要なデータベースのテーブル設計を提案してください。

Claude Code がテーブル設計（スキーマ）を提案してくれる。疑問があれば質問しながら内容を確認しよう。

スキーマとは？ データベースの構造定義のことです。どんなテーブルがあり、それぞれどんな列（カラム）を持つかを定めたもので、建物で言えば「設計図」にあたります。

納得したら、以下のように依頼する。

このスキーマでマイグレーションファイルを作成してください。
ファイルは migrations/0001_init.sql に保存してください。

migrations/0001_init.sql が生成される。

マイグレーションとは？ データベースの構造変更（テーブルの作成・変更・削除など）をSQLファイルとして管理する仕組みです。変更をファイルに記録しておくことで、「どの変更がいつ適用されたか」を追跡でき、本番環境への反映も自動化できます。

スキーマを変更したいときは、0001_init.sql を書き換えるのではなく、変更内容を Claude Code に伝えて新しいマイグレーションファイル（0002_...）を追加してもらう。push すれば GitHub Actions が未適用のファイルだけを本番DBに適用してくれる。

7. 【バックエンド】Pages Functions（API）の作成

Claude Code にアプリの仕様とスキーマを伝えて「APIを作成して」と依頼すると functions/api/xxxx.js を生成してくれる。

サンプルプロンプト（BBSの例）：

匿名一行掲示板のAPIを functions/api/posts.js に作成してください。
投稿の一覧取得と新規投稿ができるようにしてください。
D1 の binding 名は DB、スキーマは先ほど設計したものを使ってください。

DBを操作するAPIの実装は、業界標準的なパターンがほぼ決まっている。ここはClaude Codeにおまかせで問題ない。

8. 【フロントエンド】フロントエンドの作成

DB定義・API定義を会話の中で共有した後に依頼すると、それを踏まえたUIを生成してくれる。

サンプルプロンプト（BBSの例）：

これまでのDB定義、API定義を参考に
匿名一行掲示板のフロントエンドを index.html として作成してください。

デザインの好みがあれば追加で伝える：

シンプルで読みやすいデザインにしてください。
スマートフォンでも使いやすいようにしてください。

9. GitHub Actions ワークフローの作成

GitHub Actionsは、GitHubに組み込まれた自動化の仕組み。 「pushされたら〇〇を実行する」という処理をファイルに書いておくと、GitHubが自動で実行してくれる。 この自動化の仕組みをワークフローと呼ぶ。 このハンズオンでは .github/workflows/deploy.yml として作成する。

サンプルプロンプト：

以下のテンプレートで .github/workflows/deploy.yml を作成してください。
データベース名は「○○」、アプリ名は「○○」としてください。

---
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:

      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: '22'

      - run: npm ci

      - name: Apply D1 migrations
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          wranglerVersion: "4"
          command: d1 migrations apply データベース名 --remote

      - name: Create Pages project (初回のみ)
        continue-on-error: true
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          wranglerVersion: "4"
          command: pages project create アプリ名 --production-branch=main

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          wranglerVersion: "4"
          command: pages deploy . --project-name=アプリ名
---

ワークフローの流れ：

pushをトリガーに、以下の順で実行される。

  1. コードを取得（actions/checkout） — GitHubのファイルをCI環境に展開する
  2. Node.jsをセットアップ（actions/setup-node） — Wranglerの実行に必要
  3. Wranglerをインストール（npm ci） — package.jsonに記載したWranglerをインストール
  4. D1マイグレーションを適用（d1 migrations apply --remote） — 未適用のSQLファイルを本番DBに適用する
  5. Pagesプロジェクトを作成（pages project create） — 初回のみ実行。2回目以降は失敗するが continue-on-error: true で無視される
  6. Pagesにデプロイ（pages deploy） — フロントエンド・Pages Functionsを本番環境に反映する

各ステップでCloudflareの操作が必要なものは、GitHubのSecrets（CLOUDFLARE_API_TOKEN・CLOUDFLARE_ACCOUNT_ID）を使って認証する。

10. 初回デプロイ

git add .
git commit -m "initial"
git push -u origin main

GitHub Actions がワークフローにそって、セットアップ、マイグレーション、デプロイなどを自動実行。 Cloudflare Pages プロジェクトと D1 バインディングも自動作成される。

デプロイ完了後、https://アプリ名.pages.dev にアクセスして動作確認する。

11. 日常の開発フロー

Claude Code に依頼
  ├─ スキーマ変更 → migrations/000N_xxxx.sql を生成
  ├─ API 追加    → functions/api/*.js を生成
  └─ UI 変更     → index.html を更新

  → git push
  → GitHub Actions: マイグレーション（新ファイルのみ）→ デプロイ

変更後に push するだけで、スキーマ変更（マイグレーション）・API・フロントエンドの反映がすべて自動で完結する。Cloudflareのダッシュボードでの手動操作も、Wranglerコマンドの手動実行も不要。

ローカルで動作確認したい場合は ローカルでプレビューを出して と Claude Code に依頼する。 wrangler pages dev . が実行されてローカルサーバーが起動し、D1も含めたCloudflare環境を手元で確認できる。 Claude Codeデスクトップアプリを使っている場合はアプリ内ブラウザで自動的にプレビューが表示される。

12. 備忘録

2026-05-02 (last updated: 2026-05-05)　タツヲ (yto)