frameworks-on-cloudflare

Cloudflare でフレームワークを使って構築する

フレームワークを主要な開発インターフェースとして使用し、デプロイ先には Cloudflare Workers を使用します。静的サイトと SPA の出力は Workers Static Assets で配信します。新しいアプリケーションでは、Pages テンプレート、Pages のデプロイコマンド、Pages 固有のプリセットを選択しないでください。無関係なメンテナンスの際は、既存の Pages デプロイを維持してください。

プロジェクトに適した手順を選ぶ

1. 変更を加える前に、リポジトリを確認します。フレームワーク、インストール済みのバージョン、パッケージマネージャー、レンダリングモード、既存のアダプター、Cloudflare の設定（cloudflare.config.ts、または wrangler.jsonc、wrangler.json、wrangler.toml）を特定します。
2. ユーザーが選択したフレームワークを維持します。タスクが新しいプロジェクトの開始、既存プロジェクトの適合、アプリケーションコードのみの変更のどれに当たるかを判断します。
3. 以下の該当する行、その Workers フレームワークガイド、フレームワーク独自のエージェント向けガイダンスのみを読みます。
4. プロジェクトの状態に応じてセットアップします。
   • 新しいプロジェクト： フレームワークの Workers ガイドに従ってプロジェクトを作成します。現在、ガイドでは C3 を使ってプロジェクトを作成し、Wrangler 用に設定しています。これは、新しいプロジェクトではデフォルトで cf を使うという cloudflare スキルの方針に対する例外です。cf のドキュメントでは、フレームワークプロジェクトの作成方法がまだ説明されていないためです。作成後、プロジェクトには Wrangler 設定が含まれるため、次の箇条書きが適用されます。
   • Wrangler 設定がある既存プロジェクト： Wrangler を維持し、wrangler スキルを読み込みます。アダプターと設定の変更は、フレームワークガイドに従ってください。このプロジェクトでは cf init .、cf dev、cf build、cf deploy を実行しないでください。
   • Cloudflare 設定がない既存プロジェクト： 対応フレームワークを検出して設定する cf を使用します。既存のプロジェクトから開始すると cf-cli スキルを参照してください。検出されたからといって、プロジェクトがビルドできるとは限りません。ビルドに失敗する場合や、フレームワークがサポートされていない場合は、フレームワークガイドの手動セットアップに従ってください。
5. 統合に必要なアダプター、ランタイム、ビルド、デプロイの設定のみを変更します。生成されたパッケージスクリプトを確認し、フレームワークのチェックとビルドを実行した後、デプロイ前に Worker をローカルで検証します。 | フレームワーク | Workers のセットアップ | 公式の上流エージェント向けガイダンス | | --- | --- | --- | | Next.js | nextjs-on-cloudflare スキルを読み込みます。 | そのスキルに記載されています。 | | TanStack Start | Cloudflare Vite プラグインを使用する Workers ガイドに従います。Start と単独の TanStack Router を区別してください。 | TanStack Intent を使用して、インストール済みパッケージのスキル（Start のデプロイに関するガイダンスを含む）を見つけて読み込みます。 | | React Router | Framework、Data、Declarative のいずれのモードかを特定します。フルスタックのセットアップにはWorkers ガイドに従います。SPA モードは Cloudflare Vite プラグインではサポートされておらず、プリレンダリングにはバージョン要件があります。どちらかを選ぶ前にガイドを確認してください。 | 公式の React Router スキル、対応するモードのリファレンス、利用可能な場合はインストール済みパッケージのドキュメントを読み込みます。 | | SvelteKit | @sveltejs/adapter-cloudflare を使用するWorkers ガイドに従います。 | Svelte の公式スキルと AI セットアップガイダンスを使用します。 | | Hono | API 専用の Worker にするか、フロントエンドと API を組み合わせるかを選びます。Cloudflare ガイドでは、React SPA と Hono の組み合わせを扱っています。API 専用アプリにはHono の Workers ガイドを使用します。 | honojs/skills のアプリケーションスキルを読み込みます。 | | Astro | 完全にプリレンダリングされた出力とオンデマンドレンダリングを区別します。静的サイトは静的アセットとしてデプロイし、オンデマンドレンダリングには @astrojs/cloudflare を使用します。Workers ガイドに従います。 | Astro の公式 AI ガイダンスとドキュメント MCPを使用します。 | | Nuxt | 現行の Nitro 統合とバインディングについてはWorkers ガイドに従います。 | Nuxt docs MCPを使用します。Nuxt UI を使用する場合に限り、Nuxt UI スキルを読み込みます。 | | React または Vue SPA | React + Vite または Vue の Workers ガイドに従います。クライアントのみの SPA とフルスタックフレームワークを区別してください。 | アプリケーション開発には、選択したフレームワークの公式ガイダンスを使用します。 |

その他のフレームワークについては、フレームワークガイドのインデックスから始めてください。

スキルに関するフィードバック

このスキルのガイダンスに誤りや古い情報があった場合、または情報が不足している場合は、references/skill-feedback.mdをお読みください。