Skip to content

非公式本サイトは非公式の日本語ドキュメントであり、Cloudflare 公式サイトではありません。最新情報はdevelopers.cloudflare.comをご確認ください。

チュートリアル - API 付き React SPA

最終更新 Markdown で表示Agent セットアップ

このチュートリアルでは、Vite プロジェクトを Cloudflare Vite プラグイン向けに適応する手順を説明します。内容の多くは、既存の Vite プロジェクトの適応や、React 以外のフロントエンドフレームワークにも当てはまります。

はじめに

このチュートリアルでは、静的アセット付きの Worker としてデプロイできる React SPA を作ります。 次に、フロントエンドのコードからアクセスできる API Worker を追加します。 Vite で開発、ビルド、プレビューしたあと、最後に Cloudflare へデプロイします。

React SPA をセットアップして設定する

Vite プロジェクトのひな形を作る

まず、Vite で React TypeScript プロジェクトを作成します。

npm create vite@latest -- cloudflare-vite-tutorial --template react-ts

次に、使っているエディターで cloudflare-vite-tutorial ディレクトリを開きます。

Cloudflare の依存関係を追加する

npm i -D @cloudflare/vite-plugin wrangler

プロジェクトに Cloudflare Vite プラグインを追加する

vite.config.ts で、フレームワークのプラグインのあとに Cloudflare Vite プラグインを追加します。

vite.config.tsts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	plugins: [react(), cloudflare()],
});

Cloudflare Vite プラグインは、既定では設定不要です。アプリケーションのルートにある wrangler.jsonc、wrangler.json、または wrangler.toml を探します。

Worker の設定ファイルを作成する

プロジェクトのルートに wrangler.jsonc ファイルを作成します。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-app",
  // Set this to today's date
  "compatibility_date": "2026-09-20",
  "assets": {
    "not_found_handling": "single-page-application"
  }
}
name = "my-app"
# Set this to today's date
compatibility_date = "2026-09-20"

[assets]
not_found_handling = "single-page-application"

not_found_handling の値は single-page-application に設定しています。 存在しないパスへのリクエストはすべて index.html を返します。React Router など、クライアントサイドルーティングのソリューションではこの設定が必要です。

Cloudflare プラグインでは、Vite のデフォルト動作の代わりに assets のルーティング設定を使います。 これにより、開発中も本番へデプロイしたときも、アプリケーションの ルーティング設定 は同じように動きます。

Vite でアセットを設定する場合、directory フィールドは使いません。 出力設定の directory は、クライアントのビルド出力を自動的に指します。 詳しくは 静的アセット を参照してください。

.gitignore ファイルを更新する

Workers を開発する際、Git に保存すべきでない追加ファイルが使われたり生成されたりします。 次の行を .gitignore ファイルに追加します。

.gitignoretxt
.wrangler
.dev.vars*

開発サーバーを起動する

フレームワークの開発コマンドを実行し、Vite の開発サーバーを起動して、アプリケーションが想定どおりに動くことを確認します。

npm run dev

フロントエンドのみのアプリケーションであれば、このあとビルド、プレビュー、デプロイできます。 以降のセクションでは、さらに進めて API Worker を追加する方法を説明します。

API Worker を追加する

Workers の TypeScript 型を追加する

npm i -D @cloudflare/workers-types

Node の TypeScript 設定を継承し、Workers の型を追加する tsconfig.worker.json を作成します。

tsconfig.worker.jsonjsonc
{
	"extends": "./tsconfig.node.json",
	"compilerOptions": {
		"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.worker.tsbuildinfo",
		"types": ["@cloudflare/workers-types/2023-07-01", "vite/client"],
	},
	"include": ["worker"],
}

次に、ルートの tsconfig.json から、この新しい設定を参照します。

tsconfig.jsonjsonc
{
	"files": [],
	"references": [
		{ "path": "./tsconfig.app.json" },
		{ "path": "./tsconfig.node.json" },
		{ "path": "./tsconfig.worker.json" },
	],
}

設定に Worker のエントリポイントを追加する

Wrangler 設定ファイルを更新し、Worker のエントリポイントを指す main フィールドを追加します。

{
  "$schema": "./node_modules/wrangler/config-schema.json",
  "name": "my-app",
  // Set this to today's date
  "compatibility_date": "2026-09-20",
  "main": "./worker/index.ts",
  "assets": {
    "not_found_handling": "single-page-application"
  }
}
name = "my-app"
# Set this to today's date
compatibility_date = "2026-09-20"
main = "./worker/index.ts"

[assets]
not_found_handling = "single-page-application"

main フィールドは、Worker コードのエントリファイルを指定します。

API Worker を追加する

次の内容で worker/index.ts ファイルを作成します。

worker/index.tsts
export default {
	fetch(request) {
		const url = new URL(request.url);

		if (url.pathname.startsWith("/api/")) {
			return Response.json({
				name: "Cloudflare",
			});
		}

		return new Response(null, { status: 404 });
	},
} satisfies ExportedHandler;

前のコードブロックで定義した Worker は、静的アセットに一致しないナビゲーション以外のリクエストで呼び出されます。 pathname が /api/ で始まる場合は JSON レスポンスを返し、それ以外は 404 レスポンスを返します。

クライアントから API を呼び出す

src/App.tsx を編集し、API を呼び出して状態をセットするボタンを追加します。

src/App.tsxtsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";

function App() {
	const [count, setCount] = useState(0);
	const [name, setName] = useState("unknown");

	return (
		<>
			<div>
				<a href="https://vite.dev" target="_blank">
					<img src={viteLogo} className="logo" alt="Vite logo" />
				</a>
				<a href="https://react.dev" target="_blank">
					<img src={reactLogo} className="logo react" alt="React logo" />
				</a>
			</div>
			<h1>Vite + React</h1>
			<div className="card">
				<button
					onClick={() => setCount((count) => count + 1)}
					aria-label="increment"
				>
					count is {count}
				</button>
				<p>
					Edit <code>src/App.tsx</code> and save to test HMR
				</p>
			</div>
			<div className="card">
				<button
					onClick={() => {
						fetch("/api/")
							.then((res) => res.json() as Promise<{ name: string }>)
							.then((data) => setName(data.name));
					}}
					aria-label="get name"
				>
					Name from API is: {name}
				</button>
				<p>
					Edit <code>api/index.ts</code> to change the name
				</p>
			</div>
			<p className="read-the-docs">
				Click on the Vite and React logos to learn more
			</p>
		</>
	);
}

export default App;

ボタンをクリックすると、「Name from API is: Cloudflare」と表示されます。

カウンターを増やし、ブラウザー内のアプリケーション状態を更新します。 次に api/index.ts を編集し、返す name を 'Cloudflare Workers' に変更します。 もう一度ボタンをクリックすると、先にセットしたカウンター値は保ったまま、新しい name が表示されます。

Vite と Cloudflare プラグインを使うと、クライアントとサーバーの両方を一緒に反復でき、編集のあいだに UI の状態は失われません。

アプリケーションをビルドする

ビルドコマンドを実行して、アプリケーションをビルドします。

npm run build

dist ディレクトリには、クライアントのビルド出力が client サブディレクトリに入り、Worker のコードと出力された wrangler.json 設定ファイルが同じ場所に置かれます。

アプリケーションをプレビューする

preview コマンドを実行して、アプリケーションが想定どおりに動作することを確認します。

npm run preview

このコマンドは、ビルド出力をローカルの Workers ランタイムで実行します。本番環境での動作に近い形で確認できます。

Cloudflare へデプロイする

デプロイコマンドを実行して、アプリケーションを Cloudflare へデプロイします。

npx wrangler deploy

このコマンドは、ビルド出力に含まれる wrangler.json を自動的に使います。

次のステップ

このチュートリアルでは、静的アセット付きの Worker としてデプロイできる SPA を作りました。 次に、フロントエンドのコードからアクセスできる API Worker を追加しました。 最後に、アプリケーションのクライアント側とサーバー側の両方を Cloudflare にデプロイしました。

次のステップの例は次のとおりです。

役に立ちましたか？