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

D1W Slide CloudflarePagesCloudflarePagesFunctionsCloudflareD1GitHubGitHubActions

⚠️ このハンズオンは制作途中です。動かしてみることはできますが、説明や手順が今後書き換わる可能性があります。気になる点があればフィードバックいただけると助かります。

前回のハンズオンでは、GitHub ActionsでCloudflareに自動デプロイする方法を扱い、一人完結型Webアプリを公開した。今回はその先として、データベースを使ってみんなで使えるWebアプリを作る。データを保存・共有できると、できることが一気に広がる。

今回のハンズオンでは、データ共有型Webアプリ（参考）を作って、GitHub Actions で Cloudflare に公開する。

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

匿名一行掲示板を作る

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

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

匿名一行掲示板作例

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

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

ただ、実際に使い続けるものを作るとなると、全体像の理解が欠かせない。

まず、全体像を理解していないと、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章：リポジトリを ~/Desktop/claude/my-bbs にcloneし、GitHub ActionsがCloudflareを操作するための認証情報（APIトークン）を用意
3章：Node.js をセットアップして Wrangler にログイン。ローカル開発・D1操作・GitHub Actions、すべての基盤
4章：wrangler.toml を作成。GitHub ActionsがWranglerを実行するためのプロジェクト設定
5〜8章：D1（データベース）・Pages Functions（バックエンド）・Pages（フロントエンド）の順に実装
9〜10章：GitHub Actionsのワークフローを作成し、初回デプロイで全体を接続

2. 事前準備

GitHubでリポジトリを作成

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

Account ID確認・APIトークン作成・Secrets登録

GitHub ActionsでCloudflare自動デプロイを設定するの**2章「事前準備」**を参照して、Account IDの確認・APIトークンの作成・GitHubへのSecrets登録を行う。完了したらここに戻る。

リポジトリをcloneする

ターミナルで以下を実行する。Claudeデスクトップアプリで表示されるターミナルで実行してもよい。

Claudeデスクトップアプリのターミナル

mkdir -p ~/Desktop/claude
cd ~/Desktop/claude
git clone git@github.com:ユーザー名/my-bbs.git

GitHub への接続がまだの場合はGit と GitHub の基本を参照。

Claude Codeを起動

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

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

3. Wranglerログイン状態の確認

Wranglerハンズオンを完了している場合、Node.jsとWranglerログインは済んでいるはず。下記コマンドでログイン状態を確認する。

npx wrangler whoami

アカウント名やメールアドレスが表示されればOK。表示されない場合はWranglerハンズオンの2章を参照してインストール・ログインする。

4. wrangler.toml の作成

D1データベースとPages Functionsを接続するための設定ファイル。

プロジェクト名（my-bbs）は公開URL（https://プロジェクト名.pages.dev）になる。すでに使われている名前だと末尾に英数3文字が付くので、ブラウザで https://候補名.pages.dev を開いて空きを確認しておく（詳しくは前回ハンズオンの3-3）。

サンプルプロンプト：

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

---
name = "プロジェクト名"
compatibility_date = "YYYY-MM-DD"
pages_build_output_dir = "./public"

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

pages_build_output_dir = "./public" で公開対象を public/ 配下のファイルに絞る（wrangler.toml や migrations/ などのプロジェクトファイルが誤って公開されるのを防ぐ）。

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

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

npx wrangler d1 create my-bbs-db

「既に存在しています」エラーが出たら、別名（例：my-bbs-db2）で作り直す。wrangler.toml の database_name も合わせて書き換える（Claude Code に依頼すれば一括でやってくれる）。

実行すると database_id が表示される。Claude Code に伝えて wrangler.toml を書き換えてもらう。依頼せずとも自動で反映される場合もある。

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

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 に任せてよい。

ただし、できあがったコードが「どんなときに何を返すのか」は自分で把握しておくと、あとで動作確認したり修正を依頼したりするときに困らない。Claude Code に「いま作ったAPIの動きを箇条書きで説明して。投稿が空のときや長すぎるときの扱いも教えて」と聞いて、ざっと目を通しておくとよい。

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

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

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

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

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

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

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

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

サンプルプロンプト：

以下のテンプレートで .github/workflows/deploy.yml を作成してください。
プロジェクト名は「my-bbs」、データベース名は「my-bbs-db」としてください。

---
name: Deploy to Cloudflare Pages

on:
  push:
    branches: [main]

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

      - 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 ./public --project-name=プロジェクト名
---

ワークフローの流れ：

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

コードを取得（actions/checkout） — GitHubのファイルをCI環境に展開する
D1マイグレーションを適用（d1 migrations apply --remote） — 未適用のSQLファイルを本番DBに適用する
Pagesプロジェクトを作成（pages project create） — 初回のみ実行。2回目以降は失敗するが continue-on-error: true で無視される
Pagesにデプロイ（pages deploy） — フロントエンド・Pages Functionsを本番環境に反映する

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

10. 初回デプロイ

push前に .gitignore の設定。プロジェクトに作られる .wrangler/ フォルダ（ローカル状態のキャッシュ）はコミット不要なので、.gitignore に追加しておく。

.gitignore に .wrangler/ を追加して

続けて push する。Claude Code に以下をプロンプトとして渡す。

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

2回目以降は Claude Code に「コミットしてpushして」と依頼してもよい。

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

デプロイ完了後、https://my-bbs.pages.dev にアクセスして動作確認する（プロジェクト名によっては末尾に3文字の英数字が付く場合がある）。正確なURLは Compute → Workers & Pages → プロジェクト名で確認できる。

11. Webアプリの修正と反映

修正依頼プロンプト例:

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

途中、操作の許可を求めてくることがあるので対応する。

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

コミットしてpushして

GitHub Actions がマイグレーション・デプロイを自動実行する。しばらく待ってから公開URLにアクセスして確認。

このように修正と反映を繰り返して、Webアプリを仕上げよう！

ローカルでUIを確認・デバッグしたい場合は、下記のようなプロンプトで Claude Code に依頼する。

ローカルサーバーを起動してブラウザで開き、UIをスクリーンショットで確認して。気になる点があれば教えて。

ローカルサーバーが起動し、D1も含めたCloudflare環境を手元で確認できる。Claude Codeがブラウザを操作してUIを確認し、問題点があれば報告してくれる。

途中、ブラウザの操作（navigate）や画面録画の許可を求めてくることがある。確認・デバッグに必要なので、許可してよい。

12. 次のステップ

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

Claude CodeでWebアプリに管理画面を追加してCloudflare Accessでアクセス制限する — 投稿の非表示・再表示ができる管理画面を追加し、Cloudflare AccessでGoogle認証によるアクセス制限を設ける

備忘録

wranglerVersion: "4" を wrangler-action の各ステップに指定しないと古いバージョン（3.90.0 等）にフォールバックすることがある
compatibility_date は UTC 基準なので JST の今日の日付は未来になる場合がある → 前日以前の日付を指定する
package.json に wrangler を devDependency として入れる必要はない — wrangler-action の wranglerVersion: "4" 指定で wrangler のインストールが賄える
プロジェクトに生成される .wrangler/ フォルダはローカル状態のキャッシュなのでコミット不要。.gitignore に追加しておく
Cloudflare は長期的に Pages の機能を Workers へ統合する方針を示しているが、2026年時点では強制移行の期限は発表されておらず、Pages は引き続き利用できる

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

☕️ Vibecoding Notes を応援