Add support for serving assets from the routing

Author: vicb

examples/playground15/wrangler.jsonc

@@ -6,7 +6,8 @@
 	"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
 	"assets": {
 		"directory": ".open-next/assets",
-		"binding": "ASSETS"
+		"binding": "ASSETS",
+		"run_worker_first": true
 	},
 	"kv_namespaces": [
 		{

packages/cloudflare/src/api/config.ts

@@ -12,6 +12,8 @@ import type {
 	TagCache,
 } from "@opennextjs/aws/types/overrides";
 
+import assetResolver from "./overrides/asset-resolver/index.js";
+
 export type Override<T extends BaseOverride> = "dummy" | T | LazyLoadedOverride<T>;
 
 /**
@@ -102,6 +104,7 @@ export function defineCloudflareConfig(config: CloudflareOverrides = {}): OpenNe
 				tagCache: resolveTagCache(tagCache),
 				queue: resolveQueue(queue),
 			},
+			assetResolver: () => assetResolver,
 		},
 	};
 }

packages/cloudflare/src/api/overrides/asset-resolver/index.spec.ts

@@ -0,0 +1,47 @@
+import { describe, expect, test } from "vitest";
+
+import { isUserWorkerFirst } from "./index.js";
+
+describe("isUserWorkerFirst", () => {
+	test("run_worker_first = false", () => {
+		expect(isUserWorkerFirst(false, "/test")).toBe(false);
+		expect(isUserWorkerFirst(false, "/")).toBe(false);
+	});
+
+	test("run_worker_first is undefined", () => {
+		expect(isUserWorkerFirst(undefined, "/test")).toBe(false);
+		expect(isUserWorkerFirst(undefined, "/")).toBe(false);
+	});
+
+	test("run_worker_first = true", () => {
+		expect(isUserWorkerFirst(true, "/test")).toBe(true);
+		expect(isUserWorkerFirst(true, "/")).toBe(true);
+	});
+
+	describe("run_worker_first is an array", () => {
+		test("positive string match", () => {
+			expect(isUserWorkerFirst(["/test.ext"], "/test.ext")).toBe(true);
+			expect(isUserWorkerFirst(["/a", "/b", "/test.ext"], "/test.ext")).toBe(true);
+			expect(isUserWorkerFirst(["/a", "/b", "/test.ext"], "/test")).toBe(false);
+			expect(isUserWorkerFirst(["/before/test.ext"], "/test.ext")).toBe(false);
+			expect(isUserWorkerFirst(["/test.ext/after"], "/test.ext")).toBe(false);
+		});
+
+		test("negative string match", () => {
+			expect(isUserWorkerFirst(["!/test.ext"], "/test.ext")).toBe(false);
+			expect(isUserWorkerFirst(["!/a", "!/b", "!/test.ext"], "/test.ext")).toBe(false);
+		});
+
+		test("positive patterns", () => {
+			expect(isUserWorkerFirst(["/images/*"], "/images/pic.jpg")).toBe(true);
+			expect(isUserWorkerFirst(["/images/*"], "/other/pic.jpg")).toBe(false);
+		});
+
+		test("negative patterns", () => {
+			expect(isUserWorkerFirst(["/*", "!/images/*"], "/images/pic.jpg")).toBe(false);
+			expect(isUserWorkerFirst(["/*", "!/images/*"], "/index.html")).toBe(true);
+			expect(isUserWorkerFirst(["!/images/*", "/*"], "/images/pic.jpg")).toBe(false);
+			expect(isUserWorkerFirst(["!/images/*", "/*"], "/index.html")).toBe(true);
+		});
+	});
+});

packages/cloudflare/src/api/overrides/asset-resolver/index.ts

@@ -0,0 +1,104 @@
+import type { InternalEvent, InternalResult } from "@opennextjs/aws/types/open-next";
+import type { AssetResolver } from "@opennextjs/aws/types/overrides";
+
+import { getCloudflareContext } from "../../cloudflare-context.js";
+
+/**
+ * Serves assets when `run_worker_first` is set to true.
+ *
+ * When `tun_worker_first` is `false`, the assets are served directly bypassing Next routing.
+ *
+ * When it is `true`, assets are served from the routing layer. It should be used when assets
+ * should be behind the middleware or when skew protection is enabled.
+ *
+ * See https://developers.cloudflare.com/workers/static-assets/binding/#run_worker_first
+ */
+const resolver: AssetResolver = {
+	name: "cloudflare-asset-resolver",
+	async maybeGetAssetResult(event: InternalEvent) {
+		const { ASSETS } = getCloudflareContext().env;
+
+		if (!ASSETS || !isUserWorkerFirst(__CF_ASSETS_RUN_WORKER_FIRST__, event.rawPath)) {
+			// Only handle assets when the user worker runs first for the path
+			return undefined;
+		}
+
+		const { method, headers } = event;
+
+		if (method !== "GET" && method != "HEAD") {
+			return undefined;
+		}
+
+		const url = new URL(event.rawPath, "https://assets.local");
+		const response = await ASSETS.fetch(url, {
+			headers,
+			method,
+		});
+
+		if (response.status === 404) {
+			return undefined;
+		}
+
+		return {
+			type: "core",
+			statusCode: response.status,
+			headers: Object.fromEntries(response.headers.entries()),
+			// Workers and Node types differ.
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			body: response.body || (new ReadableStream() as any),
+			isBase64Encoded: false,
+		} satisfies InternalResult;
+	},
+};
+
+/**
+ * @param runWorkerFirst `run_worker_first` config
+ * @param pathname pathname of the request
+ * @returns Whether the user worker runs first
+ */
+export function isUserWorkerFirst(runWorkerFirst: boolean | string[] | undefined, pathname: string): boolean {
+	if (!Array.isArray(runWorkerFirst)) {
+		return runWorkerFirst ?? false;
+	}
+
+	let hasPositiveMatch = false;
+
+	for (let rule of runWorkerFirst) {
+		let isPositiveRule = true;
+
+		if (rule.startsWith("!")) {
+			rule = rule.slice(1);
+			isPositiveRule = false;
+		} else if (hasPositiveMatch) {
+			// Do not look for more positive rules once we have a match
+			continue;
+		}
+
+		// - Escapes special characters
+		// - Replaces * with .*
+		const match = new RegExp(`^${rule.replace(/([[\]().*+?^$|{}\\])/g, "\\$1").replace("\\*", ".*")}$`).test(
+			pathname
+		);
+
+		if (match) {
+			if (isPositiveRule) {
+				hasPositiveMatch = true;
+			} else {
+				// Exit early when there is a negative match
+				return false;
+			}
+		}
+	}
+
+	return hasPositiveMatch;
+}
+
+export default resolver;
+
+/* eslint-disable no-var */
+declare global {
+	// The configuration of `run_worker_first` for the assets.
+	// Replaced at built time.
+	var __CF_ASSETS_RUN_WORKER_FIRST__: boolean | string[] | undefined;
+}
+/* eslint-enable no-var */

packages/cloudflare/src/cli/build/build.ts

@@ -5,6 +5,7 @@ import { createMiddleware } from "@opennextjs/aws/build/createMiddleware.js";
 import * as buildHelper from "@opennextjs/aws/build/helper.js";
 import { printHeader } from "@opennextjs/aws/build/utils.js";
 import logger from "@opennextjs/aws/logger.js";
+import type { Unstable_Config } from "wrangler";
 
 import { OpenNextConfig } from "../../api/config.js";
 import type { ProjectOptions } from "../project-options.js";
@@ -30,10 +31,10 @@ import { getVersion } from "./utils/version.js";
 export async function build(
 	options: buildHelper.BuildOptions,
 	config: OpenNextConfig,
-	projectOpts: ProjectOptions
+	projectOpts: ProjectOptions,
+	wranglerConfig: Unstable_Config
 ): Promise<void> {
 	// Do not minify the code so that we can apply string replacement patch.
-	// Note that wrangler will still minify the bundle.
 	options.minify = false;
 
 	// Pre-build validation
@@ -87,7 +88,7 @@ export async function build(
 
 	await compileDurableObjects(options);
 
-	await bundleServer(options);
+	await bundleServer(options, wranglerConfig);
 
 	if (!projectOpts.skipWranglerConfigCheck) {
 		await createWranglerConfigIfNotExistent(projectOpts);

packages/cloudflare/src/cli/build/bundle-server.ts

@@ -6,6 +6,7 @@ import { fileURLToPath } from "node:url";
 import { type BuildOptions, getPackagePath } from "@opennextjs/aws/build/helper.js";
 import { ContentUpdater } from "@opennextjs/aws/plugins/content-updater.js";
 import { build, type Plugin } from "esbuild";
+import type { Unstable_Config } from "wrangler";
 
 import { getOpenNextConfig } from "../../api/config.js";
 import { patchVercelOgLibrary } from "./patches/ast/patch-vercel-og-library.js";
@@ -44,7 +45,7 @@ const optionalDependencies = [
 /**
  * Bundle the Open Next server.
  */
-export async function bundleServer(buildOpts: BuildOptions): Promise<void> {
+export async function bundleServer(buildOpts: BuildOptions, wranglerConfig: Unstable_Config): Promise<void> {
 	copyPackageCliFiles(packageDistDir, buildOpts);
 
 	const { appPath, outputDir, monorepoRoot, debug } = buildOpts;
@@ -146,6 +147,8 @@ export async function bundleServer(buildOpts: BuildOptions): Promise<void> {
 			"process.env.TURBOPACK": "false",
 			// This define should be safe to use for Next 14.2+, earlier versions (13.5 and less) will cause trouble
 			"process.env.__NEXT_EXPERIMENTAL_REACT": `${needsExperimentalReact(nextConfig)}`,
+			// Pass `assets.run_worker_first` to the asset resolver
+			__CF_ASSETS_RUN_WORKER_FIRST__: JSON.stringify(wranglerConfig.assets?.run_worker_first ?? false),
 		},
 		banner: {
 			// We need to import them here, assigning them to `globalThis` does not work because node:timers use `globalThis` and thus create an infinite loop

packages/cloudflare/src/cli/commands/deploy.ts

@@ -1,19 +1,25 @@
 import { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import { type Unstable_Config } from "wrangler";
 
 import type { OpenNextConfig } from "../../api/config.js";
-import { getWranglerEnvironmentFlag, runWrangler } from "../utils/run-wrangler.js";
+import { runWrangler } from "../utils/run-wrangler.js";
 import { populateCache } from "./populate-cache.js";
 
 export async function deploy(
 	options: BuildOptions,
 	config: OpenNextConfig,
-	deployOptions: { passthroughArgs: string[]; cacheChunkSize?: number }
+	deployOptions: { passthroughArgs: string[]; cacheChunkSize?: number },
+	wranglerConfig: Unstable_Config
 ) {
-	await populateCache(options, config, {
-		target: "remote",
-		environment: getWranglerEnvironmentFlag(deployOptions.passthroughArgs),
-		cacheChunkSize: deployOptions.cacheChunkSize,
-	});
+	await populateCache(
+		options,
+		config,
+		{
+			target: "remote",
+			cacheChunkSize: deployOptions.cacheChunkSize,
+		},
+		wranglerConfig
+	);
 
 	runWrangler(options, ["deploy", ...deployOptions.passthroughArgs], { logging: "all" });
 }

packages/cloudflare/src/cli/commands/populate-cache.ts

@@ -12,7 +12,7 @@ import type {
 import type { IncrementalCache, TagCache } from "@opennextjs/aws/types/overrides.js";
 import { globSync } from "glob";
 import { tqdm } from "ts-tqdm";
-import { getPlatformProxy, type GetPlatformProxyOptions, unstable_readConfig } from "wrangler";
+import { getPlatformProxy, type GetPlatformProxyOptions, type Unstable_Config } from "wrangler";
 
 import {
 	BINDING_NAME as KV_CACHE_BINDING_NAME,
@@ -102,13 +102,12 @@ async function getPlatformProxyEnv<T extends keyof CloudflareEnv>(options: GetPl
 
 async function populateR2IncrementalCache(
 	options: BuildOptions,
-	populateCacheOptions: { target: WranglerTarget; environment?: string }
+	populateCacheOptions: { target: WranglerTarget; environment?: string },
+	wranglerConfig: Unstable_Config
 ) {
 	logger.info("\nPopulating R2 incremental cache...");
 
-	const config = unstable_readConfig({ env: populateCacheOptions.environment });
-
-	const binding = config.r2_buckets.find(({ binding }) => binding === R2_CACHE_BINDING_NAME);
+	const binding = wranglerConfig.r2_buckets.find(({ binding }) => binding === R2_CACHE_BINDING_NAME);
 	if (!binding) {
 		throw new Error(`No R2 binding ${JSON.stringify(R2_CACHE_BINDING_NAME)} found!`);
 	}
@@ -145,13 +144,12 @@ async function populateR2IncrementalCache(
 
 async function populateKVIncrementalCache(
 	options: BuildOptions,
-	populateCacheOptions: { target: WranglerTarget; environment?: string; cacheChunkSize?: number }
+	populateCacheOptions: { target: WranglerTarget; environment?: string; cacheChunkSize?: number },
+	wranglerConfig: Unstable_Config
 ) {
 	logger.info("\nPopulating KV incremental cache...");
 
-	const config = unstable_readConfig({ env: populateCacheOptions.environment });
-
-	const binding = config.kv_namespaces.find(({ binding }) => binding === KV_CACHE_BINDING_NAME);
+	const binding = wranglerConfig.kv_namespaces.find(({ binding }) => binding === KV_CACHE_BINDING_NAME);
 	if (!binding) {
 		throw new Error(`No KV binding ${JSON.stringify(KV_CACHE_BINDING_NAME)} found!`);
 	}
@@ -194,13 +192,12 @@ async function populateKVIncrementalCache(
 
 function populateD1TagCache(
 	options: BuildOptions,
-	populateCacheOptions: { target: WranglerTarget; environment?: string }
+	populateCacheOptions: { target: WranglerTarget; environment?: string },
+	wranglerConfig: Unstable_Config
 ) {
 	logger.info("\nCreating D1 table if necessary...");
 
-	const config = unstable_readConfig({ env: populateCacheOptions.environment });
-
-	const binding = config.d1_databases.find(({ binding }) => binding === D1_TAG_BINDING_NAME);
+	const binding = wranglerConfig.d1_databases.find(({ binding }) => binding === D1_TAG_BINDING_NAME);
 	if (!binding) {
 		throw new Error(`No D1 binding ${JSON.stringify(D1_TAG_BINDING_NAME)} found!`);
 	}
@@ -233,7 +230,8 @@ function populateStaticAssetsIncrementalCache(options: BuildOptions) {
 export async function populateCache(
 	options: BuildOptions,
 	config: OpenNextConfig,
-	populateCacheOptions: { target: WranglerTarget; environment?: string; cacheChunkSize?: number }
+	populateCacheOptions: { target: WranglerTarget; cacheChunkSize?: number },
+	wranglerConfig: Unstable_Config
 ) {
 	const { incrementalCache, tagCache } = config.default.override ?? {};
 
@@ -246,10 +244,10 @@ export async function populateCache(
 		const name = await resolveCacheName(incrementalCache);
 		switch (name) {
 			case R2_CACHE_NAME:
-				await populateR2IncrementalCache(options, populateCacheOptions);
+				await populateR2IncrementalCache(options, populateCacheOptions, wranglerConfig);
 				break;
 			case KV_CACHE_NAME:
-				await populateKVIncrementalCache(options, populateCacheOptions);
+				await populateKVIncrementalCache(options, populateCacheOptions, wranglerConfig);
 				break;
 			case STATIC_ASSETS_CACHE_NAME:
 				populateStaticAssetsIncrementalCache(options);
@@ -263,7 +261,7 @@ export async function populateCache(
 		const name = await resolveCacheName(tagCache);
 		switch (name) {
 			case D1_TAG_NAME:
-				populateD1TagCache(options, populateCacheOptions);
+				populateD1TagCache(options, populateCacheOptions, wranglerConfig);
 				break;
 			default:
 				logger.info("Tag cache does not need populating");

packages/cloudflare/src/cli/commands/preview.ts

@@ -1,19 +1,25 @@
 import { BuildOptions } from "@opennextjs/aws/build/helper.js";
+import { type Unstable_Config } from "wrangler";
 
 import type { OpenNextConfig } from "../../api/config.js";
-import { getWranglerEnvironmentFlag, runWrangler } from "../utils/run-wrangler.js";
+import { runWrangler } from "../utils/run-wrangler.js";
 import { populateCache } from "./populate-cache.js";
 
 export async function preview(
 	options: BuildOptions,
 	config: OpenNextConfig,
-	previewOptions: { passthroughArgs: string[]; cacheChunkSize?: number }
+	previewOptions: { passthroughArgs: string[]; cacheChunkSize?: number },
+	wranglerConfig: Unstable_Config
 ) {
-	await populateCache(options, config, {
-		target: "local",
-		environment: getWranglerEnvironmentFlag(previewOptions.passthroughArgs),
-		cacheChunkSize: previewOptions.cacheChunkSize,
-	});
+	await populateCache(
+		options,
+		config,
+		{
+			target: "local",
+			cacheChunkSize: previewOptions.cacheChunkSize,
+		},
+		wranglerConfig
+	);
 
 	runWrangler(options, ["dev", ...previewOptions.passthroughArgs], { logging: "all" });
 }