Cloudflare Workers + D1 + npx wrangler 実践ガイド
このハンズオンを始める前に、WranglerでCloudflareに公開するを完了しておくこと（Node.js・wrangler login 済みが前提）。
Claude Codeで、DB付きのWebアプリをフルスタック開発してCloudflareで公開する。みんなが一緒に使える共有型Webアプリだ。
このハンズオンではサンプルとして、匿名一行掲示板を作っていく。
仕様：
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/...）は処理して、それ以外は静的ファイルに流す構成。
ターミナルで作業フォルダを作成する。
mkdir ~/Desktop/claude/my-board
Claude Codeを起動して作業ディレクトリに ~/Desktop/claude/my-board を指定する。
Claude Codeに依頼する。
以下のテンプレートで 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スクリプトのパス |
assets.directory |
静的ファイルの置き場（フロントエンド） |
assets.binding |
WorkerからASSETSにアクセスするための名前 |
d1_databases |
D1データベースの接続設定 |
migrations_dir |
マイグレーションファイルの置き場 |
ターミナルで実行するか、Claude Code にプロンプトとして渡す。
npx wrangler d1 create my-board-db
実行すると database_id が表示される。その値を Claude Code に伝えて wrangler.jsonc を書き換えてもらう。
wrangler.jsonc の database_id を「xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx」に書き換えてください。
Database ID — データベースの識別子。漏れても APIトークンがなければ操作できないため問題なし。
ログイン時に生成された .wrangler/ フォルダは認証キャッシュなのでコミット不要。.gitignore に追加しておく。
.gitignore に .wrangler/ を追加して
Claude Codeにアプリの仕様を伝えてテーブル設計を相談する。
匿名一行掲示板を作ります。仕様は以下のとおりです。
- 名前登録なし、初めて投稿したときに会員番号が払い出される（1, 2, 3...の連番）
- 同じブラウザから投稿した人には毎回同じ会員番号が使われるようにする
- 画面には「会員1号」「会員2号」と表示する
- 投稿内容は1行のテキスト
このアプリに必要なデータベースのテーブル設計を提案してください。
納得したら、マイグレーションファイルの作成を依頼する。
このスキーマでマイグレーションファイルを作成してください。
ファイルは migrations/0001_init.sql に保存してください。
マイグレーション — データベースの構造変更をSQLファイルとして管理する仕組み。変更をファイルに記録することで、ローカル・本番への適用を管理できる。
ローカルのDBにマイグレーションを適用する。
npx wrangler d1 migrations apply my-board-db --local
src/index.js を作る。Workerはすべてのリクエストを受け取り、APIパスだけ処理してそれ以外は静的ファイルに流す。
匿名一行掲示板のAPIを src/index.js に実装してください。
- /api/posts への GET で投稿一覧を返す
- /api/posts への POST で新規投稿を保存する
- それ以外のリクエストは env.ASSETS.fetch(request) に流す
D1 の binding 名は DB、ASSETSのbinding名はASSETS、スキーマは先ほど設計したものを使ってください。
DB定義・API定義を会話の中で共有した後に依頼すると、それを踏まえたUIを生成してくれる。
これまでのDB定義、API定義を参考に
匿名一行掲示板のフロントエンドを public/index.html として作成してください。
シンプルで読みやすいデザイン、スマートフォンでも使いやすいようにしてください。
npx wrangler dev
ブラウザで http://localhost:8787 など指定されたURLを開いて動作確認する（Claudeデスクトップのプレビューでは動作しない）。投稿・一覧表示・削除が正しく動くか確認すること。
確認できたら Ctrl + C でローカルサーバーを停止する。
まず本番DBにマイグレーションを適用する。
npx wrangler d1 migrations apply my-board-db --remote
続けてデプロイする。
npx wrangler deploy
表示されたURL（https://my-board.workers.dev など）をブラウザで開いて動作確認する。
アプリを修正するには Claude Code に依頼する。
ユーザーごとに投稿の背景色を変えてください。
確認できたら再デプロイする。スキーマ変更がない場合は npx wrangler deploy だけでOK。
npx wrangler deploy
スキーマを変更した場合は、先に --remote でマイグレーションを適用してからデプロイする。
npx wrangler d1 migrations apply my-board-db --remote
npx wrangler deploy
2026-05-09 タツヲ (yto)