cleanup some container images during local dev (#10289)

* cleanup duplicate tags

* also delete old tag after hotkey

* changeset

* pr feedback

Author: emily-shen

.changeset/great-rocks-shop.md

@@ -0,0 +1,8 @@
+---
+"@cloudflare/containers-shared": patch
+"wrangler": patch
+---
+
+Cleanup container images created during local dev if no changes have been made.
+
+We now untag old images that were created by Wrangler/Vite if we find that the image content and configuration is unchanged, so that we don't keep accumulating image tags.

fixtures/interactive-dev-tests/tests/index.test.ts

@@ -377,6 +377,21 @@ baseDescribe.skipIf(process.platform !== "linux" && process.env.CI === "true")(
 					"Hello World! Have an env var! I'm an env var!"
 				);
 			}, WAITFOR_OPTIONS);
+			const output = wrangler.stdout;
+			// Extract the Docker image name from the output
+			const imageNameMatch = output.match(
+				/cloudflare-dev\/fixturetestcontainer:[a-f0-9]+/
+			);
+			expect(imageNameMatch).not.toBe(null);
+			const imageName = imageNameMatch![0];
+			expect(
+				JSON.parse(
+					execSync(
+						`docker image inspect ${imageName} --format "{{ json .RepoTags }}"`,
+						{ encoding: "utf8" }
+					)
+				).length
+			).toBeGreaterThanOrEqual(1);
 
 			fs.writeFileSync(
 				path.join(tmpDir, "container", "simple-node-app.js"),
@@ -412,6 +427,12 @@ baseDescribe.skipIf(process.platform !== "linux" && process.env.CI === "true")(
 				});
 				expect(await res.text()).toBe("Blah! I'm an env var!");
 			}, WAITFOR_OPTIONS);
+
+			// Verify that the old image tag has been deleted after rebuild
+			expect(() => {
+				execSync(`docker image inspect ${imageName}`, { encoding: "utf8" });
+			}).toThrow();
+
 			wrangler.pty.kill();
 		});
 
@@ -424,11 +445,6 @@ baseDescribe.skipIf(process.platform !== "linux" && process.env.CI === "true")(
 			await fetch(wrangler.url + "/start");
 
 			// wait container to be ready
-			await vi.waitFor(async () => {
-				const status = await fetch(wrangler.url + "/status");
-				expect(await status.json()).toBe(true);
-			}, WAITFOR_OPTIONS);
-
 			await vi.waitFor(async () => {
 				const ids = getContainerIds();
 				expect(ids.length).toBe(1);

packages/containers-shared/src/images.ts

@@ -6,6 +6,7 @@ import {
 import { dockerLoginManagedRegistry } from "./login";
 import {
 	checkExposedPorts,
+	cleanupDuplicateImageTags,
 	runDockerCmd,
 	verifyDockerInstalled,
 } from "./utils";
@@ -87,6 +88,7 @@ export async function prepareContainerImagesForDev(args: {
 				},
 			});
 			await build.ready;
+
 			onContainerImagePreparationEnd({
 				containerOptions: options,
 			});
@@ -111,6 +113,9 @@ export async function prepareContainerImagesForDev(args: {
 			});
 		}
 		if (!aborted) {
+			// Clean up duplicate image tags. This is scoped to cloudflare-dev only
+			await cleanupDuplicateImageTags(dockerPath, options.image_tag);
+
 			await checkExposedPorts(dockerPath, options);
 		}
 	}

packages/containers-shared/src/utils.ts

@@ -313,3 +313,41 @@ export const getDockerHostFromEnv = (): string => {
 		? "//./pipe/docker_engine"
 		: "unix:///var/run/docker.sock";
 };
+
+/**
+ * Get all repository tags for a given image
+ */
+export async function getImageRepoTags(
+	dockerPath: string,
+	imageTag: string
+): Promise<string[]> {
+	try {
+		const output = await dockerImageInspect(dockerPath, {
+			imageTag,
+			formatString: "{{ range .RepoTags }}{{ . }}\n{{ end }}",
+		});
+		return output.split("\n").filter((tag) => tag.trim() !== "");
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Checks if the given image has any duplicate tags from previous dev sessions,
+ * and remove them if so.
+ */
+export async function cleanupDuplicateImageTags(
+	dockerPath: string,
+	imageTag: string
+): Promise<void> {
+	try {
+		const repoTags = await getImageRepoTags(dockerPath, imageTag);
+		// Remove all cloudflare-dev tags from previous sessions except the current one
+		const tagsToRemove = repoTags.filter(
+			(tag) => tag !== imageTag && tag.startsWith("cloudflare-dev")
+		);
+		if (tagsToRemove.length > 0) {
+			runDockerCmdWithOutput(dockerPath, ["rmi", ...tagsToRemove]);
+		}
+	} catch {}
+}

packages/wrangler/e2e/containers.dev.test.ts

@@ -1,4 +1,5 @@
 import { execSync } from "child_process";
+import path from "node:path";
 import {
 	afterAll,
 	beforeAll,
@@ -8,6 +9,8 @@ import {
 	it,
 	vi,
 } from "vitest";
+import { buildImage } from "../../containers-shared/src/build";
+import { generateContainerBuildId } from "../../containers-shared/src/utils";
 import { getDockerPath } from "../src/environment-variables/misc-variables";
 import { dedent } from "../src/utils/dedent";
 import { CLOUDFLARE_ACCOUNT_ID } from "./helpers/account-id";
@@ -241,6 +244,47 @@ for (const source of imageSource) {
 				await worker.stop();
 			});
 
+			it("should clean up duplicate image tags after build", async () => {
+				const dockerPath = getDockerPath();
+				const fakeBuildID = generateContainerBuildId();
+				const initialImageTag = `cloudflare-dev/test-cleanup:${fakeBuildID}`;
+
+				// First, build an image directly to create a duplicate tag scenario
+				const build = await buildImage(dockerPath, {
+					dockerfile: path.resolve(helper.tmpPath, "./Dockerfile"),
+					image_tag: initialImageTag,
+					class_name: "TestContainer",
+					image_build_context: helper.tmpPath,
+					image_vars: {},
+				});
+				await build.ready;
+
+				const initialRepoTags = JSON.parse(
+					execSync(
+						`${dockerPath} image inspect ${initialImageTag} --format "{{ json .RepoTags }}"`,
+						{ encoding: "utf8" }
+					)
+				);
+				expect(initialRepoTags.length).toBeGreaterThan(0);
+
+				// wrangler dev will rebuild/pull and trigger cleanup
+				const worker = helper.runLongLived("wrangler dev");
+				const ready = await worker.waitForReady();
+
+				// check that the container can still start
+				await vi.waitFor(async () => {
+					const response = await fetch(`${ready.url}/status`);
+					expect(response.status).toBe(200);
+					const status = await response.json();
+					expect(status).toBe(false);
+				});
+
+				// expect the original tag not to be there any more
+				expect(() => {
+					execSync(`${dockerPath} image inspect ${initialImageTag}`);
+				}).toThrow();
+			});
+
 			it("won't start the container service if no containers are present", async () => {
 				await helper.seed({
 					"wrangler.json": JSON.stringify({

packages/wrangler/src/api/startDevWorker/LocalRuntimeController.ts

@@ -5,6 +5,7 @@ import {
 	cleanupContainers,
 	getDevContainerImageName,
 	prepareContainerImagesForDev,
+	runDockerCmdWithOutput,
 } from "@cloudflare/containers-shared";
 import chalk from "chalk";
 import { Miniflare, Mutex } from "miniflare";
@@ -251,6 +252,16 @@ export class LocalRuntimeController extends RuntimeController {
 				);
 
 				for (const container of containerDevOptions) {
+					// if this was triggered by the rebuild hotkey, delete the old image
+					if (this.#currentContainerBuildId !== undefined) {
+						runDockerCmdWithOutput(this.dockerPath, [
+							"rmi",
+							getDevContainerImageName(
+								container.class_name,
+								this.#currentContainerBuildId
+							),
+						]);
+					}
 					this.containerImageTagsSeen.add(container.image_tag);
 				}
 				logger.log(chalk.dim("⎔ Preparing container image(s)..."));