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

Cloudflare Workers + D1 + npx wrangler 実践ガイド

このハンズオンを始める前に、WranglerでCloudflareに公開するを完了しておくこと（Node.js・wrangler login 済みが前提）。

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

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

匿名一行掲示板を作る

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

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

GitHubなし・GitHub Actionsなしで完結する

D1を使った別のハンズオンではGitHub Actionsでデプロイするフローだったがこのハンズオンでは npx wrangler deploy だけで完結する。GitHubは不要。

	D1 webappハンズオン	このハンズオン
デプロイ	GitHub Actions	npx wrangler deploy
バックエンド	Pages Functions	Workers
設定ファイル	wrangler.toml	wrangler.jsonc
GitHub	必要	不要

全体構成

役割	Cloudflareのサービス
フロントエンド（画面・UI）	Workers Static Assets（./public）
バックエンド（API処理）	Workers（src/index.js）
データベース	Cloudflare D1

Workerスクリプトがリクエストを受け取り、APIパス（/api/...）は処理して、それ以外は静的ファイルに流す構成。

2. 作業場所を確保する

Finderで作業場所（フォルダ）を作成する。 例えば、 デスクトップ → claude → my-board フォルダ。

3. wrangler.jsonc を作成する

Claude Codeを起動して作業フォルダに ~/Desktop/claude/my-board を指定する。

Claude Codeに依頼する。

Claudeへの指示

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

---
{
  "name": "プロジェクト名",
  "main": "src/index.js",
  "compatibility_date": "YYYY-MM-DD",
  "assets": {
    "directory": "./public",
    "binding": "ASSETS"
  },
  "d1_databases": [
    {
      "binding": "DB",
      "database_name": "データベース名",
      "database_id": "xxxxxx",
      "migrations_dir": "migrations"
    }
  ]
}
---

項目	内容
main	APIリクエストを処理するWorkerスクリプトのパス
compatibility_date	使用するWorkers ランタイムのバージョン基準日。UTC基準のため、JSTの今日の日付は未来日になる場合があるので前日以前を指定する
assets.directory	静的ファイルの置き場（フロントエンド）
assets.binding	WorkerからASSETSにアクセスするための名前
d1_databases	D1データベースの接続設定
migrations_dir	マイグレーションファイルの置き場

4. D1データベースを作成する（初回のみ）

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

npx wrangler d1 create my-board-db

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

Claudeへの指示

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

Database ID — データベースの識別子。漏れても APIトークンがなければ操作できないため問題なし。

ログイン時に生成された .wrangler/ フォルダは認証キャッシュなのでコミット不要。.gitignore に追加しておく。

Claudeへの指示

.gitignore に .wrangler/ を追加して

5. スキーマ設計とマイグレーション

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

Claudeへの指示

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

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

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

納得したら、マイグレーションファイルの作成を依頼する。

Claudeへの指示

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

マイグレーション — データベースの構造変更をSQLファイルとして管理する仕組み。変更をファイルに記録することで、ローカル・本番への適用を管理できる。

ローカルのDBにマイグレーションを適用する。

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

6. バックエンド（Worker）を作る

src/index.js を作る。Workerはすべてのリクエストを受け取り、APIパスだけ処理してそれ以外は静的ファイルに流す。

Claudeへの指示

匿名一行掲示板のAPIを src/index.js に実装してください。
- /api/posts への GET で投稿一覧を返す
- /api/posts への POST で新規投稿を保存する
- それ以外のリクエストは env.ASSETS.fetch(request) に流す
D1 の binding 名は DB、ASSETSのbinding名はASSETS、スキーマは先ほど設計したものを使ってください。

7. フロントエンドを作る

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

Claudeへの指示

これまでのDB定義、API定義を参考に
匿名一行掲示板のフロントエンドを public/index.html として作成してください。
シンプルで読みやすいデザイン、スマートフォンでも使いやすいようにしてください。

8. ローカルで動作確認する

npx wrangler dev

ブラウザで http://localhost:8787 など指定されたURLを開いて動作確認する（Claudeデスクトップアプリのプレビューでは動作しない）。投稿・一覧表示・削除が正しく動くか確認すること。

確認できたら Ctrl + C でローカルサーバーを停止する。

9. 本番デプロイ

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

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

続けてデプロイする。

npx wrangler deploy

表示されたURL（https://my-board.workers.dev など）をブラウザで開いて動作確認する。

10. 修正と再デプロイ

アプリを修正するには Claude Code に依頼する。

Claudeへの指示

ユーザーごとに投稿の背景色を変えてください。

確認できたら再デプロイする。スキーマ変更がない場合は npx wrangler deploy だけでOK。

npx wrangler deploy

スキーマを変更した場合は、先に --remote でマイグレーションを適用してからデプロイする。

npx wrangler d1 migrations apply my-board-db --remote
npx wrangler deploy