Claude Codeで
データ共有型Webアプリを作って
Git連携でCloudflareに公開する

LEVEL 4 ハンズオン

Cloudflare D1（DB）+ Pages Functions（API）+ Pages（UI）を Git連携で公開する。データ共有型の匿名一行掲示板を作る

このスライドで扱うこと

• 匿名一行掲示板（データ共有型Webアプリ）を作る
• 構成: Pages（UI） / Pages Functions（API） / D1（DB）
• D1作成 → スキーマ&マイグレーション → wrangler.jsonc → API → フロント
• Git連携の設定と、修正→push→自動デプロイのサイクル

前提と立ち位置

前回（CGT）は Git連携で 一人完結型Webアプリ を公開した

今回はその先として、データベースを使ってみんなで使えるWebアプリ を作る

データを保存・共有できると、できることが一気に広がる

作るもの: 匿名一行掲示板

• 名前の入力不要。書き込むだけで投稿できる
• 書き込んだ人には自動的に「会員1号」「会員2号」と番号が割り振られる
• 同じブラウザから書き込むと、次回以降も同じ会員番号が使われる
• みんなの投稿を一覧表示する

全体構成

Wrangler は Cloudflare 公式のCLIツール。D1の作成・ログイン・開発プレビュー・本番DBへのマイグレーション適用に使う

進め方は3段階

• 準備: 作業フォルダを用意し、Wrangler のログインを確認して Claude Code を起動
• 実装: D1 → スキーマとマイグレーション → wrangler.jsonc → Pages Functions → フロントエンド の順に作る
• 公開: GitHub に push し、Git連携で本番環境にデプロイ

この記事でのデプロイの流れ

公開には Cloudflare Pages の Git連携 を使う

• GitHub に push すると、Git連携が検知して自動デプロイ
• ただし D1 のマイグレーションは自動では適用されない
• 手元から npx wrangler d1 migrations apply で本番DBに反映する（手順は公開の段階で）

作業フォルダと Claude Code

Finder で ~/Desktop/claude フォルダの中に作業フォルダ my-bbs を作る

Claudeデスクトップアプリを起動:

Code（Claude Code）を選択 → New session → 作業フォルダ ~/Desktop/claude/my-bbs を指定

Wranglerログイン状態の確認

npx wrangler whoami

アカウント名やメールアドレスが表示されればOK

表示されない場合は Wranglerハンズオンの2章 を参照してインストール・ログイン

D1データベースを作成（初回のみ）

ターミナルで実行するか、Claude Code にプロンプトとして渡す

npx wrangler d1 create my-bbs-db

• 実行すると database_id が表示される。後の wrangler.jsonc 作成で使う（Claude Code に頼んでいればそのまま覚えていてくれる）
• 「既に存在しています」エラーが出たら別名（例: my-bbs-db2）で作り直す

テーブル設計を相談する

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

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

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

スキーマ = データベースの構造定義（建物で言えば「設計図」）。疑問があれば質問しながら確認する

マイグレーションファイルを作る

スキーマに納得したら依頼する:

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

マイグレーション = DBの構造変更をSQLファイルとして管理する仕組み。「どの変更がいつ適用されたか」を追跡でき、本番への反映も自動化できる

スキーマを変更したくなったら

0001_init.sql を書き換えるのではなく、新しいマイグレーションファイルを追加してもらう

• 変更内容を Claude Code に伝える → 0002_... が追加される
• 本番DBへの適用は、デプロイの段階でまとめて行う

wrangler.jsonc の役割

Pages プロジェクトの設定と、D1 データベースとの結びつけ（バインディング）をまとめる設定ファイル

• "binding": "DB" → APIのコードから env.DB でDBにアクセスできる
• "pages_build_output_dir": "./public" → 公開対象を public/ 配下に絞る
• プロジェクト名（my-bbs）は公開URL https://my-bbs.pages.dev になる

作成プロンプト

以下のテンプレートで wrangler.jsonc を作成してください。
プロジェクト名は「my-bbs」、データベース名は「my-bbs-db」、YYYY-MM-DDは昨日、
database_id には先ほど d1 create で表示された ID を記入してください。

---
{
  "name": "プロジェクト名",
  "compatibility_date": "YYYY-MM-DD",
  "pages_build_output_dir": "./public",
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "データベース名",
      "database_id": "（d1 create で表示されたID）",
      "migrations_dir": "migrations"
    }
  ]
}
---

同じセッションで D1 を作成していれば database_id は自動で記入してくれる

APIの作成を依頼する

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

DBを操作するAPIは業界標準的なパターンがほぼ決まっている。生成は Claude Code に任せてよい

「いま作ったAPIの動きを箇条書きで説明して」と聞いて、何を返すかをざっと把握しておくと後で困らない

フロントエンドの作成を依頼する

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

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

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

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

ローカルD1にマイグレーションを適用

公開する前に手元で動かして確認する。ローカルでは本番DBではなくローカル用のD1を使う

npx wrangler d1 migrations apply my-bbs-db --local

--local フラグでローカルD1にテーブルが作られる

ローカルサーバーを起動

wrangler のローカルサーバー（wrangler pages dev）を起動して

起動したら指定されたURL（http://localhost:8788 など）をブラウザで開いて動作確認

python -m http.server のような静的サーバではバックエンドとDBが動かないので、wrangler を使うよう明示する

まとめて頼んでもよい

本番DBではなくローカルのD1で動作確認したい。
ローカルのD1にマイグレーションを適用してから、ローカルサーバーを起動して

「ローカルで確認したい」とだけ伝えると、マイグレーションのローカル適用が抜けてテーブルが無いまま起動することがある

「ローカルのD1に適用してから」まで含めると確実

push前の準備

• GitHub連携コネクタはオフにしておく: Claudeデスクトップアプリの Customize → コネクタ の GitHub連携が有効だと、gh ではなくコネクタ経由で操作してしまう（→ GBA 4章）
• .wrangler/ フォルダはローカルキャッシュなのでコミット不要

.gitignore に .wrangler/ を追加して

リポジトリを作成して push

ビュー → ターミナル から実行する:

git init -b main
git add -A
git commit -m "initial"
gh repo create my-bbs --private --source=. --remote=origin --push

git init -b main で初期ブランチを main にしておくと、Cloudflare 側の Production branch 指定と揃う

プロンプトでも頼める

GitHubに非公開のリポジトリ my-bbs を作って、今のフォルダの内容をpushして

git init からコミット・リポジトリ作成・push までまとめてやってくれる

これで GitHub にコードと main ブランチが反映された

まず、本番DBにマイグレーションを適用

Git連携方式では migration が自動では適用されない。本番のアプリが動き出す前に、手元から本番DBにスキーマを反映しておく

npx wrangler d1 migrations apply my-bbs-db --remote

• 適用しないと、画面は出るのに投稿でDBエラーになる
• wrangler.jsonc を読むのでプロジェクトフォルダ内で実行する（ビュー → ターミナル なら最初から中にいる）

Create application

Cloudflare ダッシュボード 左メニュー Compute → Workers & Pages → 右上の Create application をクリック

Pages の Git連携を開始

下にある目立たない Looking to deploy Pages? の Get started をクリック

次の画面で Import an existing Git repository の Get started をクリック

初回は GitHub との連携認可を求められる（詳細は CGT を参照、リポジトリ名は my-bbs に読み替え）

リポジトリを選ぶ

リポジトリ一覧から my-bbs を選び、Begin setup をクリック

ビルド設定（3項目）

Set up builds and deployments のページで設定するのは:

• Project name: my-bbs — 公開URL（https://my-bbs.pages.dev）になる。競合すると末尾に英数3文字が付く
• Production branch: main を選択
• Build output directory: public を入力 — wrangler.jsonc の pages_build_output_dir と同じ場所

その他は空欄のまま。functions/ と D1 binding は Cloudflare が自動で認識する

Save and Deploy

Save and Deploy をクリックすると、Cloudflare が GitHub からコードを取得してビルド・デプロイを実行

• 進行状況はダッシュボードの Deployments で確認
• 完了後、表示されたURLにアクセスして動作確認

修正のサイクル

修正依頼プロンプト例:

ユーザーごとに投稿の背景色を変えてほしい

ローカル確認は8章と同じ手順（--local 適用＋ローカルサーバー）

納得したらアップを依頼:

コミットしてpushして

Cloudflare が push を検知して自動デプロイ。しばらく待って公開URLで確認

修正例

投稿者（会員番号）ごとに投稿の背景色が変わった

スキーマ変更を伴う修正

投稿者が名前を設定できるようにして、投稿に会員番号と一緒に名前も表示してほしい

新しい migration（0002_...）が追加される。push だけでは本番に反映されないので、2つをセットで行う:

1. npx wrangler d1 migrations apply my-bbs-db --remote で本番DBに反映
2. 「コミットしてpushして」でコードを自動デプロイ

管理機能を追加してみよう

DB付きの掲示板アプリを公開できた。誰でも投稿できる状態なので、次は管理機能を追加する

• Claude CodeでWebアプリに管理画面を追加してCloudflare Accessでアクセス制限する — 投稿の表示/非表示を切り替えられる管理画面を追加し、Google認証でアクセス制限

GitHubを使わない公開方法

フロントエンドまで完成していれば、9〜10章の代わりに次の2コマンドでも公開できる

npx wrangler d1 migrations apply my-bbs-db --remote
npx wrangler pages deploy

プロンプトで頼む場合は、本番DBへのマイグレーション適用まで含めて頼むのが安全:

本番DBにマイグレーションを適用してから、wrangler で Cloudflare に直接デプロイして

Git連携との比較

マイグレーションの手動適用（--remote）はどちらの方式でも必要

備忘録

• compatibility_date は UTC 基準。JST の今日は未来になる場合がある → 前日以前を指定
• Git連携では migration が自動適用されない — スキーマ変更時は push 前に --remote で適用
• Git連携のビルドは Free plan で月500回まで（個人開発なら通常は届かない）
• Cloudflare は長期的に Pages を Workers へ統合する方針だが、2026年時点で強制移行の期限は未発表

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com