add container rebuild hotkey + dev cleanup tests (#9728)

emily-shen · web-flow · commit 8e3ce64122f4 · 2025-07-08T13:30:40.000Z
* patch containerBuildId from hotkeys correctly

* add interactivity tests

* pr feedback
diff --git a/.github/workflows/test-and-check.yml b/.github/workflows/test-and-check.yml
@@ -94,7 +94,8 @@ jobs:
             description: macOS
             node_version: 20.19.1
             filter: '--filter="./packages/*" --filter="./fixtures/*" --filter="./packages/vite-plugin-cloudflare/playground" --summarize'
-          - os: ubuntu-24.04-arm
+          # needs to run on the amd runners to allow containers test to work in CI
+          - os: ubuntu-24.04
             description: Linux
             node_version: 20.19.1
             # ./tools _only_ runs here because they're only intended to run in CI
@@ -104,11 +105,12 @@ jobs:
             description: Windows
             node_version: 20.19.1
             filter: '--filter="./packages/*" --filter="./fixtures/*" --filter="./packages/vite-plugin-cloudflare/playground"'
-          - os: ubuntu-24.04-arm
+          # needs to run on the amd runners to allow containers test to work in CI
+          - os: ubuntu-24.04
             description: v22, Linux
             node_version: 22
             # Browser rendering is disabled here because of https://pptr.dev/troubleshooting#issues-with-apparmor-on-ubuntu
-            filter: '--filter="./packages/*" --filter="./fixtures/*" --filter="./packages/vite-plugin-cloudflare/playground" --filter="!./packages/kv-asset-handler" --filter="!./fixtures/interactive-dev-tests" --filter="!./fixtures/browser-rendering"'
+            filter: '--filter="./packages/*" --filter="./fixtures/*" --filter="./packages/vite-plugin-cloudflare/playground" --filter="!./packages/kv-asset-handler" --filter="!./fixtures/browser-rendering"'
           # Skipped until we upgrade to undici v7, because of https://github.com/nodejs/undici/issues/4285
           # - os: ubuntu-24.04-arm
           #   label: v24, Linux
diff --git a/fixtures/container-app/Dockerfile b/fixtures/container-app/Dockerfile
@@ -6,4 +6,3 @@ RUN npm install
 
 COPY ./container/simple-node-app.js app.js
 EXPOSE 8080
-CMD [ "node", "app.js" ]
diff --git a/fixtures/container-app/README.md b/fixtures/container-app/README.md
@@ -1,3 +1,3 @@
 # HTTP fetch to a container
 
-This example shows a simple HTTP request passthrough the DO to the container.
+This example shows a simple container setup where a DO passes requests through to a node server.
diff --git a/fixtures/container-app/container/simple-node-app.js b/fixtures/container-app/container/simple-node-app.js
@@ -10,7 +10,7 @@ const server = createServer(function (req, res) {
 	}
 
 	res.writeHead(200, { "Content-Type": "text/plain" });
-	res.write("Hello World!");
+	res.write("Hello World! Have an env var! " + process.env.MESSAGE);
 	res.end();
 });
 
diff --git a/fixtures/container-app/src/index.ts b/fixtures/container-app/src/index.ts
@@ -1,12 +1,12 @@
 import { DurableObject } from "cloudflare:workers";
 
-export class Container extends DurableObject<Env> {
+export class FixtureTestContainer extends DurableObject<Env> {
 	container: globalThis.Container;
 	monitor?: Promise<unknown>;
 
 	constructor(ctx: DurableObjectState, env: Env) {
 		super(ctx, env);
-		this.container = ctx.container!;
+		this.container = ctx.container;
 	}
 
 	async fetch(req: Request) {
@@ -25,7 +25,7 @@ export class Container extends DurableObject<Env> {
 			case "/start":
 				this.container.start({
 					entrypoint: ["node", "app.js"],
-					env: { A: "B", C: "D", L: "F" },
+					env: { MESSAGE: "I'm an env var!" },
 					enableInternet: false,
 				});
 				// this doesn't instantly start, so we will need to poll /fetch
@@ -39,9 +39,6 @@ export class Container extends DurableObject<Env> {
 				return new Response(await res.text());
 
 			case "/destroy-with-monitor":
-				// if (!this.container.running) {
-				// 	throw new Error("Container is not running.");
-				// }
 				const monitor = this.container.monitor();
 				await this.container.destroy();
 				await monitor;
diff --git a/fixtures/container-app/worker-configuration.d.ts b/fixtures/container-app/worker-configuration.d.ts
@@ -1,6 +1,6 @@
 declare namespace Cloudflare {
 	interface Env {
-		CONTAINER: DurableObjectNamespace<import("./src/index").Container>;
+		CONTAINER: DurableObjectNamespace<import("./src").Container>;
 	}
 }
 interface Env extends Cloudflare.Env {}
diff --git a/fixtures/container-app/wrangler.jsonc b/fixtures/container-app/wrangler.jsonc
@@ -4,26 +4,24 @@
 	"compatibility_date": "2025-04-03",
 	"containers": [
 		{
-			"configuration": {
-				"image": "./Dockerfile",
-			},
-			"class_name": "Container",
-			"name": "http2",
+			"image": "./Dockerfile",
+			"class_name": "FixtureTestContainer",
+			"name": "container",
 			"max_instances": 2,
 		},
 	],
 	"durable_objects": {
 		"bindings": [
 			{
-				"class_name": "Container",
+				"class_name": "FixtureTestContainer",
 				"name": "CONTAINER",
 			},
 		],
 	},
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Container"],
+			"new_sqlite_classes": ["FixtureTestContainer"],
 		},
 	],
 }
diff --git a/fixtures/container-app/wrangler.registry.jsonc b/fixtures/container-app/wrangler.registry.jsonc
@@ -4,26 +4,25 @@
 	"compatibility_date": "2025-04-03",
 	"containers": [
 		{
-			"configuration": {
-				"image": "registry.cloudflare.com/8d783f274e1f82dc46744c297b015a2f/ci-container-dont-delete:latest",
-			},
-			"class_name": "Container",
-			"name": "http2",
+			// This is the same container as built by the dockerfile except it is pulled from the registry
+			"image": "registry.cloudflare.com/8d783f274e1f82dc46744c297b015a2f/ci-container-dont-delete:latest",
+			"class_name": "FixtureTestContainer",
+			"name": "container",
 			"max_instances": 2,
 		},
 	],
 	"durable_objects": {
 		"bindings": [
 			{
-				"class_name": "Container",
+				"class_name": "FixtureTestContainer",
 				"name": "CONTAINER",
 			},
 		],
 	},
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Container"],
+			"new_sqlite_classes": ["FixtureTestContainer"],
 		},
 	],
 }
diff --git a/fixtures/interactive-dev-tests/Dockerfile b/fixtures/interactive-dev-tests/Dockerfile
diff --git a/fixtures/interactive-dev-tests/container-app/Dockerfile b/fixtures/interactive-dev-tests/container-app/Dockerfile
@@ -0,0 +1,8 @@
+FROM node:22-alpine
+
+WORKDIR /usr/src/app
+RUN echo '{"name": "simple-node-app", "version": "1.0.0", "dependencies": {"ws": "^8.0.0"}}' > package.json
+RUN npm install
+
+COPY ./container/simple-node-app.js app.js
+EXPOSE 8080
diff --git a/fixtures/interactive-dev-tests/container-app/container/simple-node-app.js b/fixtures/interactive-dev-tests/container-app/container/simple-node-app.js
@@ -0,0 +1,49 @@
+const { createServer } = require("http");
+
+const webSocketEnabled = process.env.WS_ENABLED === "true";
+
+// Create HTTP server
+const server = createServer(function (req, res) {
+	if (req.url === "/ws") {
+		// WebSocket upgrade will be handled by the WebSocket server
+		return;
+	}
+
+	res.writeHead(200, { "Content-Type": "text/plain" });
+	res.write("Hello World! Have an env var! " + process.env.MESSAGE);
+	res.end();
+});
+
+// Check if WebSocket functionality is enabled
+if (webSocketEnabled) {
+	const WebSocket = require("ws");
+
+	// Create WebSocket server
+	const wss = new WebSocket.Server({
+		server: server,
+		path: "/ws",
+	});
+
+	wss.on("connection", function connection(ws) {
+		console.log("WebSocket connection established");
+
+		ws.on("message", function message(data) {
+			console.log("Received:", data.toString());
+			// Echo the message back with prefix
+			ws.send("Echo: " + data.toString());
+		});
+
+		ws.on("close", function close() {
+			console.log("WebSocket connection closed");
+		});
+
+		ws.on("error", console.error);
+	});
+}
+
+server.listen(8080, function () {
+	console.log("Server listening on port 8080");
+	if (webSocketEnabled) {
+		console.log("WebSocket support enabled");
+	}
+});
diff --git a/fixtures/interactive-dev-tests/container-app/src/index.ts b/fixtures/interactive-dev-tests/container-app/src/index.ts
@@ -0,0 +1,67 @@
+import { DurableObject } from "cloudflare:workers";
+
+export class FixtureTestContainer extends DurableObject<Env> {
+	container: globalThis.Container;
+	monitor?: Promise<unknown>;
+
+	constructor(ctx: DurableObjectState, env: Env) {
+		super(ctx, env);
+		this.container = ctx.container;
+	}
+
+	async fetch(req: Request) {
+		const path = new URL(req.url).pathname;
+		switch (path) {
+			case "/status":
+				return new Response(JSON.stringify(this.container.running));
+
+			case "/destroy":
+				if (!this.container.running) {
+					throw new Error("Container is not running.");
+				}
+				await this.container.destroy();
+				return new Response(JSON.stringify(this.container.running));
+
+			case "/start":
+				this.container.start({
+					entrypoint: ["node", "app.js"],
+					env: { MESSAGE: "I'm an env var!" },
+					enableInternet: false,
+				});
+				// this doesn't instantly start, so we will need to poll /fetch
+				return new Response("Container create request sent...");
+
+			case "/fetch":
+				const res = await this.container
+					.getTcpPort(8080)
+					// actual request doesn't matter
+					.fetch("http://foo/bar/baz", { method: "POST", body: "hello" });
+				return new Response(await res.text());
+
+			case "/destroy-with-monitor":
+				const monitor = this.container.monitor();
+				await this.container.destroy();
+				await monitor;
+				return new Response("Container destroyed with monitor.");
+
+			default:
+				return new Response("Hi from Container DO");
+		}
+	}
+}
+
+export default {
+	async fetch(request, env): Promise<Response> {
+		const url = new URL(request.url);
+		if (url.pathname === "/second") {
+			// This is a second Durable Object that can be used to test multiple DOs
+			const id = env.CONTAINER.idFromName("second-container");
+			const stub = env.CONTAINER.get(id);
+			const query = url.searchParams.get("req");
+			return stub.fetch("http://example.com/" + query);
+		}
+		const id = env.CONTAINER.idFromName("container");
+		const stub = env.CONTAINER.get(id);
+		return stub.fetch(request);
+	},
+} satisfies ExportedHandler<Env>;
diff --git a/fixtures/interactive-dev-tests/container-app/wrangler.jsonc b/fixtures/interactive-dev-tests/container-app/wrangler.jsonc
@@ -1,29 +1,27 @@
 {
 	"name": "container-app",
-	"main": "src/container.mjs",
+	"main": "src/index.ts",
 	"compatibility_date": "2025-04-03",
 	"containers": [
 		{
-			"configuration": {
-				"image": "./Dockerfile",
-			},
-			"class_name": "Container",
-			"name": "http2",
+			"image": "./Dockerfile",
+			"class_name": "FixtureTestContainer",
+			"name": "container",
 			"max_instances": 2,
 		},
 	],
 	"durable_objects": {
 		"bindings": [
 			{
-				"class_name": "Container",
+				"class_name": "FixtureTestContainer",
 				"name": "CONTAINER",
 			},
 		],
 	},
 	"migrations": [
 		{
 			"tag": "v1",
-			"new_sqlite_classes": ["Container"],
+			"new_sqlite_classes": ["FixtureTestContainer"],
 		},
 	],
 }
diff --git a/fixtures/interactive-dev-tests/src/container.mjs b/fixtures/interactive-dev-tests/src/container.mjs
diff --git a/fixtures/interactive-dev-tests/tests/index.test.ts b/fixtures/interactive-dev-tests/tests/index.test.ts
diff --git a/packages/wrangler/src/dev/hotkeys.ts b/packages/wrangler/src/dev/hotkeys.ts

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,3 @@ RUN npm install`
`6`	`6`
`7`	`7`	`COPY ./container/simple-node-app.js app.js`
`8`	`8`	`EXPOSE 8080`
`9`		`-CMD [ "node", "app.js" ]`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`# HTTP fetch to a container`
`2`	`2`
`3`		`-This example shows a simple HTTP request passthrough the DO to the container.`
	`3`	`+This example shows a simple container setup where a DO passes requests through to a node server.`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ const server = createServer(function (req, res) {`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`res.writeHead(200, { "Content-Type": "text/plain" });`
`13`		`- res.write("Hello World!");`
	`13`	`+ res.write("Hello World! Have an env var! " + process.env.MESSAGE);`
`14`	`14`	`res.end();`
`15`	`15`	`});`
`16`	`16`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`declare namespace Cloudflare {`
`2`	`2`	`interface Env {`
`3`		`- CONTAINER: DurableObjectNamespace<import("./src/index").Container>;`
	`3`	`+ CONTAINER: DurableObjectNamespace<import("./src").Container>;`
`4`	`4`	`}`
`5`	`5`	`}`
`6`	`6`	`interface Env extends Cloudflare.Env {}`