Cloudflare Vite プラグインを使う場合、Wrangler 設定ファイルは任意です。ファイルがない場合、プラグインはデフォルト値を使います。Worker の設定は config オプションでプログラムからカスタマイズできます。Cloudflare プラグインが別のプラグインやフレームワークの内部で動く場合に便利です。
設定ファイルがない場合、プラグインはアセットのみの Worker 向けに妥当なデフォルトを生成します。name は package.json またはプロジェクトディレクトリ名から決まります。compatibility_date は、インストール済み Miniflare バージョンが対応する最新日付です。
config オプションでは、Worker をプログラムから設定する方法が 3 つあります。Wrangler 設定ファイル の任意のプロパティを設定できます。ただし一部のオプションは 無視されるか、Vite 側の同等機能に置き換わります。
config にオブジェクトを渡すと、デフォルトおよび Wrangler 設定ファイルの値とマージされます。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
config: {
compatibility_date: "2025-01-01",
vars: {
API_URL: "https://api.example.com",
},
},
}),
],
});これらの値は Wrangler 設定ファイルの値とマージされ、config の値が優先されます。
既存の設定値や外部データに依存する場合、または値を計算・条件付きで設定する場合は、関数を使います。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => ({
vars: {
WORKER_NAME: userConfig.name,
BUILD_TIME: new Date().toISOString(),
},
}),
}),
],
});関数には現在の設定（デフォルト、または読み込んだ設定ファイル）が渡されます。マージする値のオブジェクトを返します。
config 関数は、上書き値を返す代わりに、設定オブジェクトを直接変更できます。プロパティの削除や配列要素の削除に便利です。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
config: (userConfig) => {
// Replace all existing compatibility flags
userConfig.compatibility_flags = ["nodejs_compat"];
},
}),
],
});補助 Worker も config オプションに対応しており、設定ファイルなしでマルチ Worker 構成を作れます。
auxiliaryWorkers 配列内の config を使い、設定ファイルなしで補助 Worker を定義します。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
config: {
name: "entry-worker",
main: "./src/entry.ts",
compatibility_date: "2025-01-01",
services: [{ binding: "API", service: "api-worker" }],
},
auxiliaryWorkers: [
{
config: {
name: "api-worker",
main: "./src/api.ts",
compatibility_date: "2025-01-01",
},
},
],
}),
],
});設定ファイルと config を組み合わせて、特定の値だけを上書きできます。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
configPath: "./wrangler.jsonc",
auxiliaryWorkers: [
{
configPath: "./workers/api/wrangler.jsonc",
config: {
vars: {
ENDPOINT: "https://api.example.com/v2",
},
},
},
],
}),
],
});補助 Worker は、config 関数の第 2 引数で、解決済みのエントリ Worker 設定を受け取ります。これにより、エントリ Worker の設定を補助 Worker へ継承しやすくなります。
import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
export default defineConfig({
plugins: [
cloudflare({
auxiliaryWorkers: [
{
config: (_, { entryWorkerConfig }) => ({
name: "auxiliary-worker",
main: "./src/auxiliary-worker.ts",
// Inherit compatibility settings from entry Worker
compatibility_date: entryWorkerConfig.compatibility_date,
compatibility_flags: entryWorkerConfig.compatibility_flags,
}),
},
],
}),
],
});config オプションは、設定オブジェクトのマージに defu ↗ を使います。
- オブジェクトのプロパティは再帰的にマージされます
- 配列は連結されます（先に
configの値、その後に既存の値） configのプリミティブ値は既存の値を上書きしますconfigのundefinedは既存の値を上書きしません