デプロイ →このページを編集

Cloudflare

Cloudflare Workers または Pages にデプロイするには、ビルトインの cloudflare アダプタを使用します。このアダプタは Cloudflare のエッジランタイムと連携するために特化して設計されています。

まず、Workers が有効な Cloudflare アカウントと wrangler CLI がインストールされている必要があります：

npm install -g wrangler
wrangler login

追加のパッケージは不要です — アダプタは @lazarv/react-server に組み込まれています。

次に、react-server.config.mjs ファイルにアダプタを追加する必要があります：

export default {
  adapter: "cloudflare",
};

オプションを渡してアダプタをカスタマイズできます：

export default {
  adapter: [
    "cloudflare",
    {
      name: "my-app", // Cloudflare Worker 名
      compatibilityDate: "2024-01-01", // Cloudflare 互換性日
      compatibilityFlags: ["nodejs_compat_v2"], // 追加の互換性フラグ
      pages: true, // Cloudflare Pages 用の _routes.json を生成
      excludeRoutes: ["/api/*"], // Worker 処理から除外する追加ルート
      serverlessFunctions: true, // Worker デプロイを有効化（デフォルト: true）
      wrangler: {
        vars: {
          MY_VAR: "value",
        },
      },
    },
  ],
};

設定オプション

生成された wrangler.toml を拡張するには、プロジェクトルートに react-server.wrangler.toml ファイルを作成します。アダプタはそれを自身の設定とマージします：

これにより、アダプタが必要な設定を管理しながら、カスタムバインディング、環境変数、その他の Cloudflare 固有の設定を追加できます。

react-server.wrangler.toml
[vars]
MY_API_KEY = "secret"

[[kv_namespaces]]
binding = "MY_KV"
id = "abc123"

@lazarv/react-server を Cloudflare アダプタと共に使用する場合、以下のコマンドでアプリケーションをデプロイできます：

pnpm react-server build [root] # [root] はアプリケーションのエントリーポイント
wrangler deploy

react-server CLI の --deploy 引数を使用してデプロイすることもできます：

pnpm react-server build [root] --deploy

これにより、アプリケーションがビルドされ、Cloudflare Workers にデプロイされます。

アダプタは Cloudflare Pages 互換の _routes.json ファイルを自動生成します。このファイルは、どのルートを Worker が処理し、どのルートを静的アセットとして配信するかを指定します。

デフォルトでは、画像、CSS、JavaScript、フォントなどの静的アセットは Worker 処理から除外されます。excludeRoutes オプションを使用して除外するルートを追加できます。

Cloudflare Pages にデプロイするには、Cloudflare ダッシュボードまたは wrangler pages コマンドを使用できます。

← デプロイ: Vercelデプロイ: Netlify →