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

LEVEL 5 ハンズオン

Cloudflare D1（DB）+ Pages Functions（API）+ Pages（UI）+ GitHub Actions（自動デプロイ）で、データ共有型の匿名一行掲示板を作って公開する

このスライドで扱うこと

• 匿名一行掲示板（データ共有型Webアプリ）を作る
• 構成: Pages（UI） / Pages Functions（API） / D1（DB） / GitHub Actions
• 事前準備: APIトークン・Secrets・clone
• wrangler.toml / D1作成 / スキーマ&マイグレーション / API / フロント
• GitHub Actions ワークフローと初回デプロイ
• 修正と反映のサイクル

前提と今回のゴール

前回（GHA）は 一人完結型 を GitHub Actions で公開した

今回は データベースを使ってみんなで使えるWebアプリ を作る

• データ共有型Webアプリ を GitHub Actions で Cloudflare に公開
• データの保存・共有ができると、できることが一気に広がる
• 参考: Webアプリの種類

匿名一行掲示板の仕様

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

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

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

ただ、実際に使い続けるものは全体像の理解が欠かせない:

• ダッシュボード操作（Secrets登録など）が何のためか分かる → トラブル時に困らない
• 構成のパターンが身につく → 「次は〇〇を作りたい」にも応用できる

全体構成

GitHubにpushすると GitHub Actions が D1マイグレーション → Pages・Pages Functions デプロイ までを一括実行

Wrangler はローカル（D1作成・ログイン・プレビュー）と GitHub Actions の両方で使われる

章のロードマップ

• 2章: clone + APIトークン + Secrets 用意
• 3章: Node.js セットアップと Wrangler ログイン
• 4章: wrangler.toml 作成
• 5〜8章: D1（DB）→ Pages Functions（API）→ Pages（UI）の順で実装
• 9〜10章: GitHub Actions ワークフロー作成 + 初回デプロイで接続

GitHubでリポジトリを作成

GitHub → New repository → リポジトリ名（my-bbs）を入力 → 作成

Private にする（意図しないファイルの公開を防ぐため）

Account ID・APIトークン・Secrets

GitHub ActionsでCloudflare自動デプロイを設定する の 2章「事前準備」 を参照して以下を行う:

• Account ID の確認
• APIトークンの作成
• GitHub への Secrets 登録

完了したら戻る

リポジトリを clone

ターミナル（または Claudeデスクトップアプリのターミナル）で:

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

SSH設定がまだなら GitHubとGitのセットアップ を参照

Claude Code を起動

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

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

whoami で確認

Wranglerハンズオンを完了していれば Node.js と Wrangler ログインは済んでいるはず

npx wrangler whoami

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

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

プロジェクト名のコツ

プロジェクト名（my-bbs）は公開URLになる: https://プロジェクト名.pages.dev

• すでに使われていると末尾に英数3文字が付く
• 候補名を https://候補名.pages.dev で先にブラウザで開いて空き確認
• 詳しくは前回ハンズオンの3-3

wrangler.toml テンプレ

以下のテンプレートで 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/ の誤公開を防ぐ）

d1 create でデータベース作成

ターミナルまたは Claude Code にプロンプトとして渡す:

npx wrangler d1 create my-bbs-db

実行すると database_id が表示される。Claude Code に伝えて wrangler.toml を書き換えてもらう:

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

依頼せずとも自動で反映される場合もある

トラブル時の対応

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

Database ID（database_id）: データベースの識別子。仮に外部に漏れても API Token がなければ操作できないため問題なし

スキーマ設計を Claude Code と相談

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

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

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

疑問があれば質問しながら確認

スキーマ: データベースの構造定義。建物で言えば「設計図」

マイグレーションファイルを生成

納得したら依頼:

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

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

マイグレーション: DBの構造変更（テーブル作成・変更・削除）をSQLファイルで管理する仕組み。「どの変更がいつ適用されたか」を追跡でき、本番への反映も自動化できる

スキーマを変更したいとき

0001_init.sql を書き換えるのではなく、新しいマイグレーションファイル（0002_...）を追加する

postsテーブルに priority カラムを追加するマイグレーションを作って

push すれば GitHub Actions が未適用のファイルだけを本番DBに適用する

API を Claude Code に作ってもらう

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

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

できあがったAPIの動きを把握する

「どんなときに何を返すのか」は自分で把握しておくと、あとで動作確認や修正依頼で困らない

いま作ったAPIの動きを箇条書きで説明して。
投稿が空のときや長すぎるときの扱いも教えて。

ざっと目を通しておく

DB定義・API定義を踏まえて依頼

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

デザイン指定を追加で:

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

ワークフローとは

GitHub Actions は GitHub に組み込まれた自動化の仕組み

「pushされたら〇〇を実行する」という処理をファイルに書いておくと、GitHub が自動で実行してくれる

この自動化の仕組みを ワークフロー と呼ぶ

このハンズオンでは .github/workflows/deploy.yml として作成

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 をトリガーに、以下の順で実行:

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

各ステップは GitHub Secrets（CLOUDFLARE_API_TOKEN・CLOUDFLARE_ACCOUNT_ID）で認証

.gitignore の設定

プロジェクトに作られる .wrangler/ フォルダ（ローカル状態のキャッシュ）はコミット不要

.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 → プロジェクト名 で確認

修正サイクル

修正依頼プロンプト例:

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

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

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

コミットしてpushして

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

修正と反映を繰り返して仕上げる

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

• 修正 → push → デプロイ → 確認のサイクル
• スキーマ変更も新しいマイグレーションファイルとして追加すれば自動適用される

ローカル確認

ローカルで UI を確認・デバッグしたい場合:

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

• ローカルサーバーが起動し、D1も含めた Cloudflare環境を手元で確認できる
• Claude Code がブラウザ操作してUI確認、問題点を報告してくれる
• ブラウザ操作（navigate）・画面録画の許可を求められたら許可してよい

DB付き掲示板に管理機能を追加する

ここまでで、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/ フォルダはローカル状態のキャッシュなのでコミット不要。.gitignore に追加
• Cloudflare は長期的に Pages の機能を Workers へ統合する方針だが、2026年時点では Pages は引き続き利用可能

ありがとうございました

タツヲ (@yto)

vibecodingnotes.com