Support containers on Vite auxiliary Workers (#10825)

* Support containers in auxiliary Vite Workers

* Address typechecking

* add changeset

* typo

Author: penalosa

.changeset/neat-eyes-roll.md

@@ -0,0 +1,5 @@
+---
+"@cloudflare/vite-plugin": patch
+---
+
+Support containers defined for Vite auxiliary Workers

packages/vite-plugin-cloudflare/playground/containers/entry.wrangler.jsonc

@@ -0,0 +1,11 @@
+{
+	"name": "entry",
+	"main": "./src/entry.ts",
+	"compatibility_date": "2025-04-03",
+	"services": [
+		{
+			"binding": "APP",
+			"service": "container-app",
+		},
+	],
+}

packages/vite-plugin-cloudflare/playground/containers/src/entry.ts

@@ -0,0 +1,5 @@
+export default {
+	async fetch(request, env): Promise<Response> {
+		return env.APP.fetch(request);
+	},
+} satisfies ExportedHandler<Env>;

packages/vite-plugin-cloudflare/playground/containers/vite.config.ts

@@ -2,5 +2,11 @@ import { cloudflare } from "@cloudflare/vite-plugin";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [cloudflare({ inspectorPort: false, persistState: false })],
+	plugins: [
+		cloudflare({
+			persistState: false,
+			configPath: "entry.wrangler.jsonc",
+			auxiliaryWorkers: [{ configPath: "wrangler.jsonc" }],
+		}),
+	],
 });

packages/vite-plugin-cloudflare/src/containers.ts

@@ -1,6 +1,4 @@
-import assert from "node:assert";
 import path from "node:path";
-import { prepareContainerImagesForDev } from "@cloudflare/containers-shared/src/images";
 import { getDevContainerImageName } from "@cloudflare/containers-shared/src/knobs";
 import { isDockerfile } from "@cloudflare/containers-shared/src/utils";
 import type { WorkerConfig } from "./plugin-config";
@@ -22,20 +20,14 @@ export function getDockerPath(): string {
  * with image tag set to well-known dev format, or undefined if
  * containers are not enabled or not configured.
  */
-async function getContainerOptions(options: {
+export function getContainerOptions(options: {
 	containersConfig: WorkerConfig["containers"];
-	isContainersEnabled: boolean;
 	containerBuildId: string;
 	configPath?: string;
 }) {
-	const {
-		containersConfig,
-		isContainersEnabled,
-		containerBuildId,
-		configPath,
-	} = options;
+	const { containersConfig, containerBuildId, configPath } = options;
 
-	if (!containersConfig?.length || isContainersEnabled === false) {
+	if (!containersConfig?.length) {
 		return undefined;
 	}
 
@@ -64,60 +56,3 @@ async function getContainerOptions(options: {
 		}
 	});
 }
-
-/**
- * Builds or pulls the container images for local development, and returns the
- * corresponding list of image tags
- *
- * @param options.containersConfig The configured containers
- * @param options.containerBuildId The container build id
- * @param options.isContainersEnabled Whether containers is enabled for this Worker
- * @param options.dockerPath The path to the Docker executable
- * @param options.configPath The path of the wrangler configuration file
- * @returns The list of image tags corresponding to the built/pulled container images
- */
-export async function prepareContainerImages(options: {
-	containersConfig: WorkerConfig["containers"];
-	containerBuildId?: string;
-	isContainersEnabled: boolean;
-	dockerPath: string;
-	configPath?: string;
-}): Promise<Set<string>> {
-	assert(
-		options.containerBuildId,
-		"Build ID should be set if containers are enabled and defined"
-	);
-
-	const {
-		containersConfig,
-		isContainersEnabled,
-		dockerPath,
-		containerBuildId,
-		configPath,
-	} = options;
-	const uniqueImageTags = new Set<string>();
-
-	// Assemble container options and build if necessary
-	const containerOptions = await getContainerOptions({
-		containersConfig,
-		containerBuildId,
-		isContainersEnabled,
-		configPath,
-	});
-
-	if (containerOptions) {
-		// keep track of them so we can clean up later
-		for (const container of containerOptions) {
-			uniqueImageTags.add(container.image_tag);
-		}
-
-		await prepareContainerImagesForDev({
-			dockerPath,
-			containerOptions,
-			onContainerImagePreparationStart: () => {},
-			onContainerImagePreparationEnd: () => {},
-		});
-	}
-
-	return uniqueImageTags;
-}

packages/vite-plugin-cloudflare/src/index.ts

@@ -1,10 +1,7 @@
 import assert from "node:assert";
 import * as util from "node:util";
-import {
-	cleanupContainers,
-	generateContainerBuildId,
-	resolveDockerHost,
-} from "@cloudflare/containers-shared/src/utils";
+import { prepareContainerImagesForDev } from "@cloudflare/containers-shared";
+import { cleanupContainers } from "@cloudflare/containers-shared/src/utils";
 import { generateStaticRoutingRuleMatcher } from "@cloudflare/workers-shared/asset-worker/src/utils/rules-engine";
 import { CoreHeaders, Miniflare } from "miniflare";
 import colors from "picocolors";
@@ -21,7 +18,7 @@ import {
 	kRequestType,
 	ROUTER_WORKER_NAME,
 } from "./constants";
-import { getDockerPath, prepareContainerImages } from "./containers";
+import { getDockerPath } from "./containers";
 import {
 	addDebugToVitePrintUrls,
 	DEBUG_PATH,
@@ -234,23 +231,14 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 				const entryWorkerConfig = getEntryWorkerConfig(
 					ctx.resolvedPluginConfig
 				);
-				const hasDevContainers =
-					entryWorkerConfig?.containers?.length &&
-					entryWorkerConfig.dev.enable_containers;
-				const dockerPath = getDockerPath();
-
-				if (hasDevContainers) {
-					containerBuildId = generateContainerBuildId();
-					entryWorkerConfig.dev.container_engine =
-						resolveDockerHost(dockerPath);
-				}
 
-				const miniflareDevOptions = await getDevMiniflareOptions({
-					resolvedPluginConfig: ctx.resolvedPluginConfig,
-					viteDevServer,
-					inspectorPort: inputInspectorPort,
-					containerBuildId,
-				});
+				const { config: miniflareDevOptions, allContainerOptions } =
+					await getDevMiniflareOptions({
+						resolvedPluginConfig: ctx.resolvedPluginConfig,
+						viteDevServer,
+						inspectorPort: inputInspectorPort,
+						containerBuildId,
+					});
 
 				if (!miniflare) {
 					debuglog("Creating new Miniflare instance");
@@ -318,21 +306,22 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 						};
 					}
 
-					if (hasDevContainers) {
+					if (allContainerOptions.size > 0) {
 						viteDevServer.config.logger.info(
 							colors.dim(
 								colors.yellow(
 									"∷ Building container images for local development...\n"
 								)
 							)
 						);
-						containerImageTagsSeen = await prepareContainerImages({
-							containersConfig: entryWorkerConfig.containers,
-							containerBuildId,
-							isContainersEnabled: entryWorkerConfig.dev.enable_containers,
-							dockerPath,
-							configPath: entryWorkerConfig.configPath,
+						await prepareContainerImagesForDev({
+							dockerPath: getDockerPath(),
+							containerOptions: [...allContainerOptions.values()],
+							onContainerImagePreparationStart: () => {},
+							onContainerImagePreparationEnd: () => {},
 						});
+
+						containerImageTagsSeen = new Set(allContainerOptions.keys());
 						viteDevServer.config.logger.info(
 							colors.dim(
 								colors.yellow(
@@ -356,8 +345,8 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 						 *
 						 */
 						process.on("exit", async () => {
-							if (containerImageTagsSeen.size) {
-								cleanupContainers(dockerPath, containerImageTagsSeen);
+							if (allContainerOptions.size > 0) {
+								cleanupContainers(getDockerPath(), containerImageTagsSeen);
 							}
 						});
 					}
@@ -415,27 +404,15 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 					vitePreviewServer
 				);
 
-				// first Worker in the Array is always the entry Worker
-				const entryWorkerConfig = ctx.resolvedPluginConfig.workers[0];
-				const hasDevContainers =
-					entryWorkerConfig?.containers?.length &&
-					entryWorkerConfig.dev.enable_containers;
-				let containerBuildId: string | undefined;
-
-				if (hasDevContainers) {
-					containerBuildId = generateContainerBuildId();
-				}
-
-				miniflare = new Miniflare(
+				const { config: miniflareOptions, allContainerOptions } =
 					await getPreviewMiniflareOptions({
 						resolvedPluginConfig: ctx.resolvedPluginConfig,
 						vitePreviewServer,
 						inspectorPort: inputInspectorPort,
-						containerBuildId,
-					})
-				);
+					});
+				miniflare = new Miniflare(miniflareOptions);
 
-				if (hasDevContainers) {
+				if (allContainerOptions.size > 0) {
 					const dockerPath = getDockerPath();
 
 					vitePreviewServer.config.logger.info(
@@ -445,13 +422,14 @@ export function cloudflare(pluginConfig: PluginConfig = {}): vite.Plugin[] {
 							)
 						)
 					);
-					containerImageTagsSeen = await prepareContainerImages({
-						containersConfig: entryWorkerConfig.containers,
-						containerBuildId,
-						isContainersEnabled: entryWorkerConfig.dev.enable_containers,
-						dockerPath,
-						configPath: entryWorkerConfig.configPath,
+					await prepareContainerImagesForDev({
+						dockerPath: getDockerPath(),
+						containerOptions: [...allContainerOptions.values()],
+						onContainerImagePreparationStart: () => {},
+						onContainerImagePreparationEnd: () => {},
 					});
+					containerImageTagsSeen = new Set(allContainerOptions.keys());
+
 					vitePreviewServer.config.logger.info(
 						colors.dim(colors.yellow("\n⚡️ Containers successfully built.\n"))
 					);