tinyship-cloudflare

TinyShip Cloudflare セットアップ

TinyShip（TanStack Start）向けに、Cloudflare スタック全体を設定するワンストップウィザードです。

これは対話形式のステップバイステップウィザードです。各判断が必要な場面で必ずユーザーに質問し、回答を待ってから先に進んでください。ユーザーに代わって選択することは絶対にしないでください。

Step 0: テンプレートの検出と振り分け

まず、../../references/template-detection.mdを読み、現在のプロジェクトがどのテンプレートなのかを検出します。

プロジェクトがtinyship-cf（Cloudflare専用テンプレート）の場合

プロジェクトはすでにCloudflareネイティブです。バインディング、D1、Workersのセットアップは事前設定済みです。フレームワークのクリーンアップやwranglerのスキャフォールディングは実行しないでください。以下のファストパスに直接進んでください。

プロジェクトがshipeasy（マルチフレームワーク）の場合

⛔ 停止 — 続行する前に、必ずユーザーに伝えて確認してください。

TinyShipには、Workers向けに事前設定された専用のCloudflareテンプレート（tinyship-cf）が用意されています（ハックもフレームワークのクリーンアップも不要です）。新しいCloudflareプロジェクトでは、tinyship-cfから始めることをおすすめします。

• ここで続行する — このshipeasyプロジェクトでCloudflareを設定します（すでに機能を実装している場合に適しています）
• tinyship-cfに切り替える — 専用テンプレートから新しく始め、変更内容を手動で移行します

ユーザーが続行を選択した場合は、以下のフルウィザードに従ってください。

---

ファストパス（tinyship-cfプロジェクト）

1. Wranglerへのログイン

cd apps/tanstack-app
npx wrangler login
npx wrangler whoami   # capture the Account ID

すでにログイン済みの場合はスキップし、その旨をユーザーに伝えてください。

2. ローカル環境

cp apps/tanstack-app/.dev.vars.example apps/tanstack-app/.dev.vars

BETTER_AUTH_SECRETを設定します（openssl rand -hex 32）。ローカル開発環境を確認します。

pnpm dev   # http://localhost:7001

3. リモートデータベース

D1データベースはすでにwrangler.jsoncにバインドされています。マイグレーションを適用して確認します。

npx wrangler d1 migrations apply tinyship-db --remote

D1の代わりにHyperdrive + PostgreSQLを使用する場合は、 references/hyperdrive-setup.mdを読み、手順に従ってください。

4. シークレット

⛔ 停止 — ユーザーが使用する機能を確認し、該当するシークレットのみ設定してください。

npx wrangler secret put BETTER_AUTH_SECRET      # required
# Payments (as needed): STRIPE_SECRET_KEY, PAYPAL_CLIENT_ID/SECRET,
#   DODO_PAYMENTS_API_KEY/WEBHOOK_KEY, CREEM_API_KEY/WEBHOOK_SECRET
# AI image/video (as needed): QWEN_API_KEY, FAL_API_KEY,
#   GOOGLE_GENERATIVE_AI_API_KEY, VOLCENGINE_ACCESS_KEY_ID
# Email: RESEND_API_KEY

注意事項：

• チャットAIにシークレットは不要です — Workers AI + AI Gatewayで実行されます。サードパーティのチャットキー（OpenAI/DeepSeek）はAI Gatewayのダッシュボードで管理します（BYOK）。
• AI_GATEWAY_IDのデフォルト値はdefaultです。ユーザーのゲートウェイ名が異なる場合は、wrangler.jsoncのvarsに設定してください。
• 各プロバイダーのダッシュボードで、決済Webhook URLが本番ドメインを指すようにしてください。

5. 任意の追加設定

それぞれについてユーザーに確認してから、該当するリファレンスを読み、手順に従ってください。

• R2ストレージ — references/r2-setup.md（バケットはすでにバインド済み）
• メール送信 — references/email-setup.md
• Turnstile — references/turnstile-setup.md

6. デプロイ

pnpm deploy:cf

確認項目：ホームページが200を返すこと、/en/pricingが200を返すこと、ログインが機能すること。pricing_planテーブルが空で、PRICING_MODE=dynamicの場合は、管理者としてログインし、Admin → Pricing Plans → Import Staticを選択してプランを登録してください。

Step 8: まとめに進んでください。

---

フルウィザード（shipeasyプロジェクト）

対象範囲： このウィザードでは、Cloudflare Workersへのデプロイに向けてTanStack Start（apps/tanstack-app）を設定します。Next.jsとNuxt.jsはNode.js環境向けに設計されており、Workersにはデプロイできません。

前提条件

1. Node.js >= 22.20.0 — node -vを実行します
2. pnpm >= 9.0.0 — pnpm -vを実行します
3. 依存関係がインストール済みであること — node_modules/がない場合は、pnpm installを実行します
4. Cloudflareアカウント — https://dash.cloudflare.com/sign-up

Step 1: Wranglerへのログイン

以下を実行して、Cloudflareで認証します。

cd apps/tanstack-app
npx wrangler login

ブラウザーが開き、認証を行います。成功したら、以下を実行して確認します。

npx wrangler whoami

出力からアカウントIDを取得してください。これはR2とメールの設定で再利用します。

ユーザーがすでにログイン済み（wrangler whoamiにアカウント情報が表示される）の場合は、この手順をスキップし、その旨をユーザーに伝えてください。

ステップ 2：フレームワークの整理

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

Cloudflare Workers がサポートしているのは TanStack Start のみのため、Cloudflare のみを対象とするデプロイでは Next.js と Nuxt.js のアプリは不要です。ユーザーに尋ねてください：

Cloudflare に全面的に移行することを選択されています。この構成では TanStack Start のみを使用します。 プロジェクトから Next.js と Nuxt.js のアプリを削除しますか？

オプション	操作
はい — 整理する	apps/next-app と apps/nuxt-app を削除し、ワークスペース設定を更新します
いいえ — 残す	そのまま残します（Node.js へのデプロイも予定している場合に便利です）

ユーザーが「はい」を選んだ場合：

tinyship-setup スキルの整理手順に従います。 ../tinyship-setup/references/framework-cleanup.md を読み、残すフレームワークとして TanStack Start を使用します。

実施内容の概要：

1. rm -rf apps/next-app apps/nuxt-app
2. turbo.json を更新し、ビルド出力から .nuxt/**、.output/**、.next/** を削除します
3. ルートの package.json を更新し、dev:next、build:next、dev:nuxt、build:nuxt などを削除して、 dev:tanstack → dev、build:tanstack → build などに名前を変更します
4. docker-compose.yml を更新し、next-app と nuxt-app のサービスを削除します
5. .github/workflows/ci.yml を更新し、削除したアプリのビルド手順を削除します
6. pnpm install を実行してロックファイルを整理します

整理後、pnpm typecheck と pnpm build（TanStack を対象とするようになっています）を実行して確認します。

ユーザーが「いいえ」を選んだ場合：

このステップをスキップします。他のアプリはプロジェクトに残りますが、Workers にはデプロイされません。

ステップ 3：データベース — D1 または Hyperdrive

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

以下の選択肢を提示し、ユーザーの回答を待ちます：

オプション	データベース	最適な用途
A	Cloudflare D1（SQLite）	Cloudflare に全面的に移行する場合、外部依存なし、低コスト
B	Hyperdrive + PostgreSQL	既存の PG を再利用する場合、高い書き込み並行性、Next/Nuxt とのデータ整合性

トレードオフを説明します：

• D1：フルマネージドで、Workers の料金に含まれます。上限は 5～10 GB で、書き込みは単一ライターに制限されます
• Hyperdrive：外部 PostgreSQL が必要ですが、ストレージ上限はなく、3 つすべてのアプリで同じ DB を使用できます

ユーザーが D1 を選んだ場合：

references/d1-setup.md を読み、手順に従います。

ユーザーが Hyperdrive を選んだ場合：

references/hyperdrive-setup.md を読み、手順に従います。

データベースの設定後、ローカルで確認します：

cd apps/tanstack-app
pnpm dev:cf

アプリが読み込まれ、データベースに依存するページが動作することを確認します。結果をユーザーに伝えます。

ステップ 4：R2 ストレージ（任意）

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

次のように尋ねます：ファイルストレージ（画像、アップロード）用に Cloudflare R2 を設定しますか？

• はい — references/r2-setup.md を読み、手順に従います
• いいえ — スキップします（後から設定できます）

ステップ 5：メール送信（任意）

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

次のように尋ねます：トランザクションメール（確認コード、パスワードリセット）に Cloudflare Email Sending を使用しますか？

• はい — references/email-setup.md を読み、手順に従います
• いいえ — スキップします（デフォルトは Resend です。後から設定することもできます）

ステップ 6：Turnstile によるボット対策（任意）

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

次のように尋ねます：ログイン／サインアップ保護のために Cloudflare Turnstile（CAPTCHA）を有効にしますか？

• はい — references/turnstile-setup.md を読み、手順に従います
• いいえ — スキップします（デフォルトでは無効です。後から安全に追加できます）

ステップ 7：Workers にデプロイする

⛔ 停止 — 先に進む前に必ずユーザーに確認してください。

次のように尋ねます：今すぐ Cloudflare Workers にデプロイしますか？それともローカル設定のみを完了しますか？

• 今すぐデプロイ — references/workers-deploy.md を読み、手順に従います
• 後で — cd apps/tanstack-app && pnpm run deploy:cf でいつでもデプロイできることをユーザーに伝えます

ステップ 8：概要

セットアップが完了したら、設定した内容の概要を提示します。

✅ Cloudflare Setup Complete
─────────────────────────────
Template:   [tinyship-cf (fast path) / shipeasy (full wizard)]
Frameworks: TanStack Start only [Next/Nuxt removed / kept]
Workers:    TanStack Start on Cloudflare Workers
Database:   [D1 / Hyperdrive+PG] — configured and verified
Storage:    [R2 / skipped]
Email:      [Cloudflare Email / skipped]
Turnstile:  [enabled / skipped]
Deployment: [deployed to <url> / ready for deploy]

Next steps:
- tinyship-cf: `pnpm dev` for local dev, `pnpm deploy:cf` to deploy
- shipeasy: `cd apps/tanstack-app && pnpm dev:cf` / `pnpm run deploy:cf`
- Use `npx wrangler tail` to view live logs

TinyShip リポジトリ内の参照ファイル

このスキルを実行する際は、コンテキストを把握するために、ユーザーのプロジェクトから次のファイルを読み込みます。

• apps/tanstack-app/wrangler.jsonc — 現在の Wrangler 設定
• apps/tanstack-app/CF-NOTES.md — 既知の Cloudflare の注意点
• apps/tanstack-app/.dev.vars.example — ローカル開発用変数のテンプレート（tinyship-cf）
• env.example — すべての環境変数（shipeasy のみ）
• apps/tanstack-app/vite.config.ts — CF プラグインの条件付き読み込み
• docs/user-guide/deployment/cloudflare-workers.md — デプロイガイドの全文
• config/storage.ts — R2 設定の構成
• config/email.ts — Email 設定の構成
• config/captcha.ts — Turnstile 設定の構成