Workers + D1 のWebアプリを立ち上げる
——テンプレートから10手順、毎回これを見ればいい

1この手順書の使い方

2前提と検証済みの組み合わせ

必要なもの：GitHub アカウント／Cloudflare アカウント／テンプレート化済みのリポジトリ（→Step 1）

npm warn EBADENGINE package: 'wrangler@4.120.0',
npm warn EBADENGINE required: { node: '>=22.0.0' },
npm warn EBADENGINE current: { node: 'v20.20.2' }

3全体像（10ステップ）

4Step 1–3：複製して初期化する

Step 1 ［ブラウザ］テンプレートから新しいリポジトリを作る

1. 元リポジトリの Code タブ（Settings ではない）を開く
2. 緑の Use this template → Create a new repository
3. Repository name を入力
4. Include all branches は Off のまま（main だけでよい。作業ブランチは不要）
5. Visibility は Private でよい
6. Create repository

Step 2 ［エージェント］前のアプリの値を消す

1. claude.ai/code を開く
2. サイドバーから新しいセッションを開始し、リポジトリに複製先を選ぶ
3. 最初のメッセージで 「テンプレートをリセットして」

Step 3 ［人］作るものを決める

5Step 4–6：Cloudflare側を先に作る

Step 4 ［ブラウザ］D1 データベースを作る

1. Cloudflare ダッシュボード → ストレージとデータベース → D1 SQLite データベース
2. 作成。名前は Step 3 で決めたもの
3. データ ロケーションは「位置情報」（自動配置）のままでよい
4. 作成後の画面に出る Database ID をコピー

Step 5 ［エージェント］wrangler.jsonc に実値を入れる

Step 3 と 4 で決まった値をエージェントに渡します。change-me は3か所です。

grep -rn 'change-me' wrangler.jsonc   # 何も出ないこと
npm install                           # package-lock.json の name を同期
npm run check                         # 通ること

Step 6 ［ブラウザ］schema.sql をコンソールで実行する

1. D1 の画面 → コンソール タブ
2. schema.sql の中身を貼って実行（複数文をまとめて受け付けます）
3. 「概要」タブのテーブル数が増えれば成功

6Step 7–8：つないでデプロイする

Step 7 ［ブラウザ］Workers Builds に接続する

コンピュート → Workers & Pages からリポジトリをインポートします。

Step 8 ［エージェント］main にマージする

作業ブランチで開発 → npm run check が通ることを確認 → main へ。ここで初めて自動デプロイが走ります。

[ERROR] The directory specified by the "assets.directory" field in your ...
   /opt/buildhome/repo/dist

git checkout -B main origin/main
git merge --ff-only <作業ブランチ>

7Step 9–10：確認して保護する

Step 9 ［ブラウザ］動作を確認する

https://<アプリ名>.<サブドメイン>.workers.dev を開きます。

• 見出しと入力フォームが出る → GET / と D1 の読み取りが通っている
• 何か入力して追加し、一覧に出る → 書き込みも通っている

Step 10 ［ブラウザ］main を保護する

GitHub の Settings → Branches で main を保護し、build チェックの通過を必須にします。

8詰まったら：ビルドログ5段階

Workers Builds のログは5段階に分かれます。どこが赤いかで原因の範囲が決まるので、まず段階を特定してください。ログを上から丁寧に読むより速い。

9手元の検証で分かることの限界

npm run check は tsc --noEmit と wrangler deploy --dry-run です。--dry-run は認証情報なしで動く代わりに、Cloudflare に問い合わせません。その線引きがそのまま限界になります。

10中身を作る前に設計すること

Step 3 で「何をするアプリか」を決めるときに、一緒に決めてください。

• 認証を付けるか
• レート制限を入れるか
• 書き込み量に上限を設けるか

「とりあえず公開して後で塞ぐ」はしない——静的サイトが「書き込み経路を作らない」ことで安全を買っていたのに対し、こちらは書き込み経路がある前提で設計する必要があります。守るべきものが入れ替わっています。

S情報ソース

H更新履歴