Dynamic Workers Playground

Dynamic Workers の playground ↗ では、コードを書いたり GitHub からインポートしたりし、実行時にバンドルして Dynamic Worker で実行し、リアルタイムのログを確認できます。

このデモでできること

実行時バンドル — @cloudflare/worker-bundler ↗ を使い、Worker 内で npm 依存関係を解決し、TypeScript をコンパイルします
動的実行 — バンドルしたコードを、分離された Dynamic Worker に読み込みます
キャッシュ — ソースが変わっていないときは、以前バンドルした Worker を再利用します
リアルタイム出力 — レスポンス本文、コンソールログ、実行時間、バンドルのメタデータをクライアントへストリーミングします

実行時にコードをバンドルする

playground は @cloudflare/worker-bundler ↗ を使い、TypeScript をコンパイルし、npm 依存関係を解決し、Worker Loader が実行できるモジュールを生成します。

ソースファイルと package.json を createWorker() に渡します。依存関係が解決され、Dynamic Worker として読み込めるバンドル済みモジュールが返ります。

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
	files: {
		"src/index.ts": userCode,
		"package.json": JSON.stringify({
			dependencies: { hono: "^4.0.0" },
		}),
	},
	bundle: true,
	minify: false,
});

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
	files: {
		"src/index.ts": userCode,
		"package.json": JSON.stringify({
			dependencies: { hono: "^4.0.0" },
		}),
	},
	bundle: true,
	minify: false,
});

Dynamic Workers をキャッシュする

env.LOADER.load() は、呼び出すたびに新しい Dynamic Worker を作成します。変更のないコードの再バンドルを避けるには、代わりに env.LOADER.get(id, callback) を使います。ランタイムはキャッシュヒット時に既存の Worker を返し、ミス時はコールバックを呼んで構築します。

const worker = env.LOADER.get(workerId, async () => {
	// This callback only runs on cache miss
	const { mainModule, modules } = await createWorker({ files });

	return {
		mainModule,
		modules,
		compatibilityDate: "2026-05-01",
		tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
	};
});

const response = await worker.getEntrypoint().fetch(request);

const worker = env.LOADER.get(workerId, async () => {
	// This callback only runs on cache miss
	const { mainModule, modules } = await createWorker({ files });

	return {
		mainModule,
		modules,
		compatibilityDate: "2026-05-01",
		tails: [
			contextExports.DynamicWorkerTail({ props: { workerId } }),
		],
	};
});

const response = await worker.getEntrypoint().fetch(request);

playground では、この動作を確認できます。同じ Dynamic Worker を 2 回実行すると、2 回目はキャッシュ済みの結果になり、コールドスタートは 0ms です。ビルドとロードのフェーズがすべてスキップされるためです。

Tail Workers による可観測性

playground でコードを実行すると、Dynamic Worker のコンソール出力がブラウザーへリアルタイムでストリーミングされます。内部では Tail Worker のパイプラインで実現しています。

Tail Worker（DynamicWorkerTail）が、Dynamic Worker からの console.log 出力を捕捉します。
ログは LogSession Durable Object へ転送されます。
Durable Object が WebSocket 経由でクライアントへストリーミングします。

これをつなぐには、Dynamic Worker を作成するときに tails 配列へ Tail Worker を含めます。

const worker = env.LOADER.get(workerId, async () => ({
	mainModule,
	modules,
	compatibilityDate: "2026-05-01",
	tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

const worker = env.LOADER.get(workerId, async () => ({
	mainModule,
	modules,
	compatibilityDate: "2026-05-01",
	tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

Dynamic Workers からログを捕捉してストリーミングする方法の詳細は、Dynamic Workers の可観測性を参照してください。

ローカルで実行する

リポジトリをクローンし、開発サーバーを起動します。

npm install
npm run dev