CLI から始める: React Router v8 ↗ と Cloudflare Vite plugin でフルスタックアプリの土台を作り、高速に開発できます。
npm create cloudflare@latest -- my-react-router-app --framework=react-routeryarn create cloudflare my-react-router-app --framework=react-routerpnpm create cloudflare@latest my-react-router-app --framework=react-routerすぐデプロイする: React Router v8 のフルスタックアプリを作成します。CI/CD とプレビューもあらかじめ設定されています。
React Router v8 ↗ は、Web アプリケーションを作るフルスタック React フレームワークです。 Cloudflare Vite plugin と組み合わせると、Cloudflare 上での開発、ビルド、デプロイを第一級の体験として使えます。
-
create-cloudflare CLI（C3）で新しいプロジェクトを作成する
npm create cloudflare@latest -- my-react-router-app --framework=react-routeryarn create cloudflare my-react-router-app --framework=react-routerpnpm create cloudflare@latest my-react-router-app --framework=react-routerこのプロジェクトの構成は？
プロジェクトの簡易的なファイルツリーは次のとおりです。
- my-react-router-app
- app
- routes
- ...
- entry.server.ts
- root.tsx
- routes.ts
- routes
- workers
- app.ts
- react-router.config.ts
- vite.config.ts
- wrangler.jsonc
- app
react-router.config.tsは React Router の設定ファイル ↗ です。 このファイルでは次のとおりです。ssrはtrueです。つまりアプリケーションはサーバーサイドレンダリングを使います。
vite.config.tsは Vite の設定ファイル ↗ です。plugins配列に React Router と Cloudflare のプラグインが含まれます。 Cloudflare Vite plugin はサーバーコードを Workers ランタイムで実行し、ローカル開発環境を本番に近づけます。wrangler.jsoncは Worker の設定ファイル です。 このファイルでは次のとおりです。mainは./workers/app.tsを指します。 これが Worker のエントリファイルです。 デフォルトエクスポートにはfetchハンドラー があり、リクエストを React Router に委譲します。- Cloudflare の開発者プラットフォーム上のリソースへの バインディング を足す場合は、ここで設定します。
- my-react-router-app
-
ローカルで開発する
プロジェクトを作成したら、プロジェクトディレクトリで次のコマンドを実行し、ローカル開発サーバーを起動します。
npm run devyarn run devpnpm run devローカル開発では何が起きている？
このプロジェクトは React Router と Cloudflare Vite plugin を組み合わせて使います。 そのため、アプリケーションは本番と同じ Cloudflare Workers ランタイムで動き、バインディングのローカルエミュレーションにもアクセスできます。
-
プロジェクトをデプロイする
プロジェクトは、自分のマシンからも、Cloudflare の Workers Builds を含む任意の CI/CD からも、
*.workers.devサブドメインまたは カスタムドメイン にデプロイできます。次のコマンドでプロジェクトをビルドしてデプロイします。CI を使う場合は、「デプロイコマンド」 の設定を適切に更新してください。
npm run deployyarn run deploypnpm run deploy
バインディングを使うと、アプリケーションを Cloudflare Developer Platform と完全に統合でき、コンピュート、ストレージ、AI などにアクセスできます。
Wrangler 設定ファイルでバインディングを設定すると、loader または action 関数の context.cloudflare から使えます。
export function loader({ context }: Route.LoaderArgs) {
return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE };
}
export default function Home({ loaderData }: Route.ComponentProps) {
return <Welcome message={loaderData.message} />;
}Worker のエントリファイル（workers/app.ts）に直接アクセスできるため、Durable Objects や Workflows などの追加エクスポートも足せます。
例: Workflows を使う
Worker のエントリファイルに、簡単な Workflow を置く例です。
import { createRequestHandler } from "react-router";
import { WorkflowEntrypoint, type WorkflowStep, type WorkflowEvent } from 'cloudflare:workers';
declare global {
interface CloudflareEnvironment extends Env {}
}
type Env = {
MY_WORKFLOW: Workflow;
};
export class MyWorkflow extends WorkflowEntrypoint<Env> {
override async run(event: WorkflowEvent<{ hello: string }>, step: WorkflowStep) {
await step.do("first step", async () => {
return { output: "First step result" };
});
await step.sleep("sleep", "1 second");
await step.do("second step", async () => {
return { output: "Second step result" };
});
return "Workflow output";
}
}
const requestHandler = createRequestHandler(
() => import("virtual:react-router/server-build"),
import.meta.env.MODE
);
export default {
async fetch(request, env, ctx) {
return requestHandler(request, {
cloudflare: { env, ctx },
});
},
} satisfies ExportedHandler<CloudflareEnvironment>;Wrangler 設定ファイルで設定します。
{
"workflows": [
{
"name": "my-workflow",
"binding": "MY_WORKFLOW",
"class_name": "MyWorkflow"
}
]
}[[workflows]]
name = "my-workflow"
binding = "MY_WORKFLOW"
class_name = "MyWorkflow"アプリケーションからは次のように使います。
export async function action({ context }: Route.ActionArgs) {
const env = context.cloudflare.env;
const instance = await env.MY_WORKFLOW.create({ params: { "hello": "world" } })
return { id: instance.id, details: await instance.status() };
}バインディングを使うと、アプリケーションを Cloudflare Developer Platform と完全に統合でき、コンピュート、ストレージ、AI などへアクセスできます。