[WIP] Test new vercel middleware integration method

Author: psd-coder

astro.config.mjs

@@ -6,6 +6,7 @@ import tailwindcss from "@tailwindcss/vite";
 import starlightOpenAPI from "starlight-openapi";
 import starlightDocSearch from "@astrojs/starlight-docsearch";
 
+import { tsImport } from "tsx/esm/api";
 import vercel from "@astrojs/vercel";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
@@ -27,6 +28,11 @@ import { devServerFileWatcher } from "./src/integrations/dev-server-file-watcher
 // import { isMoveReferenceEnabled } from "./src/utils/isMoveReferenceEnabled";
 // import { rehypeAddDebug } from "./src/plugins";
 
+const vercelMiddlewareIntegration = await tsImport(
+  "./integrations/vercel-middleware/index.ts",
+  import.meta.url,
+).then((m) => m.default);
+
 const ALGOLIA_APP_ID = ENV.ALGOLIA_APP_ID;
 const ALGOLIA_SEARCH_API_KEY = ENV.ALGOLIA_SEARCH_API_KEY;
 const ALGOLIA_INDEX_NAME = ENV.ALGOLIA_INDEX_NAME;
@@ -196,6 +202,7 @@ export default defineConfig({
         ],
       },
     }),
+    vercelMiddlewareIntegration(),
   ],
   adapter: process.env.VERCEL
     ? vercel({

integrations/vercel-middleware/index.ts

@@ -0,0 +1,79 @@
+import { fileURLToPath } from "node:url";
+import type { AstroConfig, AstroIntegration, IntegrationResolvedRoute } from "astro";
+import { getAstroMiddlewarePath } from "./utils/astro";
+import { buildMiddlewareMatcherRegexp } from "./utils/matcher";
+import { generateEdgeMiddlewareFile } from "./utils/middleware";
+import {
+  generateFunctionConfig,
+  getFunctionDir,
+  insertMiddlewareRoute,
+} from "./utils/vercelOutput";
+
+const INTEGRATION_NAME = "vercel-middleware";
+const VERCEL_ADAPTER_LINK = "[@astrojs/vercel](https://www.npmjs.com/package/@astrojs/vercel)";
+const VERCEL_MIDDLEWARE_FUNCTION_NAME = "_middleware";
+
+export default function vercelMiddlewareIntegration() {
+  let astroConfig: AstroConfig;
+  let resolvedRoutes: IntegrationResolvedRoute[];
+
+  const integration: AstroIntegration = {
+    name: INTEGRATION_NAME,
+    hooks: {
+      "astro:routes:resolved": ({ routes, logger }) => {
+        logger.info("Resolving routes for Vercel middleware matcher…");
+        resolvedRoutes = routes;
+      },
+      "astro:config:done": ({ config }) => {
+        astroConfig = config;
+      },
+      "astro:build:done": async ({ logger }) => {
+        if (
+          !astroConfig.integrations.some((integration) => integration.name === "@astrojs/vercel")
+        ) {
+          logger.error(`${VERCEL_ADAPTER_LINK} must be installed to use ${INTEGRATION_NAME}.`);
+          return;
+        }
+
+        if (astroConfig.adapter?.name !== "@astrojs/vercel") {
+          logger.error(
+            `${VERCEL_ADAPTER_LINK} must be used as adapter for proper ${INTEGRATION_NAME} work.`,
+          );
+          return;
+        }
+
+        const rootDir = fileURLToPath(astroConfig.root);
+
+        logger.info("Looking for Astro middleware…");
+        const astroMiddlewarePath = await getAstroMiddlewarePath(rootDir);
+
+        if (!astroMiddlewarePath) {
+          logger.warn("Astro middleware not found. Skipping Vercel middleware build.");
+          return;
+        }
+
+        logger.info(`Found middleware file at: ${astroMiddlewarePath}`);
+        logger.info("Building Vercel middleware…");
+        logger.info("Compiling edge middleware file…");
+        const functionDir = getFunctionDir(rootDir, VERCEL_MIDDLEWARE_FUNCTION_NAME);
+        const middlewareEntrypoint = await generateEdgeMiddlewareFile(
+          rootDir,
+          astroMiddlewarePath,
+          functionDir,
+        );
+        logger.info("Creating edge middleware Vercel config file…");
+        await generateFunctionConfig(functionDir, middlewareEntrypoint);
+
+        logger.info("Collecting routes which must be handled by middleware…");
+        const matcher = buildMiddlewareMatcherRegexp(resolvedRoutes);
+
+        logger.info("Inserting generated middleware into vercel output config…");
+        await insertMiddlewareRoute(rootDir, matcher, VERCEL_MIDDLEWARE_FUNCTION_NAME);
+
+        logger.info("Successfully created middleware function for Vercel deployment.");
+      },
+    },
+  };
+
+  return integration;
+}

integrations/vercel-middleware/utils/astro.ts

@@ -0,0 +1,25 @@
+import path from "node:path";
+import fs from "fs/promises";
+
+const POSSIBLE_ASTRO_MIDDLEWARE_PATHS = [
+  "src/middleware.ts",
+  "src/middleware/index.ts",
+  "src/middleware.js",
+  "src/middleware/index.js",
+];
+
+export async function getAstroMiddlewarePath(projectRootDir: string) {
+  for (const possiblePath of POSSIBLE_ASTRO_MIDDLEWARE_PATHS) {
+    const fullPath = path.join(projectRootDir, possiblePath);
+    const exists = await fs
+      .stat(fullPath)
+      .then(() => true)
+      .catch(() => false);
+
+    if (exists) {
+      return possiblePath;
+    }
+  }
+
+  return null;
+}

integrations/vercel-middleware/utils/matcher.ts

@@ -0,0 +1,23 @@
+import type { IntegrationResolvedRoute } from "astro";
+
+export function buildMiddlewareMatcherRegexp(routes: IntegrationResolvedRoute[]) {
+  const groupedRoutes = Object.groupBy(routes, (r) => r.origin);
+  const dontMatchPatterns =
+    groupedRoutes.internal?.map((r) => stripPatternRegexp(r.patternRegex)) ?? [];
+  const matchPatterns = groupedRoutes.project?.map((r) => stripPatternRegexp(r.patternRegex)) ?? [];
+
+  // The regex is constructed to first negate any paths that match the internal patterns
+  // and then allow paths that match the project patterns.
+  // For example it can output such regexp: /^(?!.*\/(_server-islands\/[^\/]+\/?|_image\/?)$)(?:\/(.*?))?\/?)$/;
+  return `^(?!.*(${dontMatchPatterns.join("|")})$)(?:${matchPatterns.join("|")})$`;
+}
+
+const PATTERN_STRIP_LINE_START = /^\^/;
+const PATTERN_STRIP_LINE_END = /\$$/;
+function stripPatternRegexp(pattern: RegExp) {
+  return pattern
+    .toString()
+    .slice(1, -1)
+    .replace(PATTERN_STRIP_LINE_START, "")
+    .replace(PATTERN_STRIP_LINE_END, "");
+}

integrations/vercel-middleware/utils/middleware.ts

@@ -0,0 +1,59 @@
+import { builtinModules } from "node:module";
+import path from "node:path";
+
+// https://docs.astro.build/en/guides/middleware/
+const MIDDLEWARE_ENTRYPOINT = "middleware.mjs";
+
+export async function generateEdgeMiddlewareFile(
+  projectRootDir: string,
+  middlewarePath: string,
+  functionDir: string,
+) {
+  const esbuild = await import("esbuild");
+  const middlewareModule = getMiddlewareTemplate(middlewarePath);
+  const outfile = path.join(functionDir, MIDDLEWARE_ENTRYPOINT);
+
+  await esbuild.build({
+    stdin: {
+      contents: middlewareModule,
+      resolveDir: projectRootDir,
+    },
+    target: "esnext",
+    platform: "browser",
+    conditions: ["edge-light", "workerd", "worker"],
+    outfile,
+    allowOverwrite: true,
+    format: "esm",
+    bundle: true,
+    minify: false,
+    plugins: [
+      {
+        name: "esbuild-namespace-node-built-in-modules",
+        setup(build) {
+          const filter = new RegExp(builtinModules.map((mod) => `(^${mod}$)`).join("|"));
+          build.onResolve({ filter }, (args) => ({
+            path: "node:" + args.path,
+            external: true,
+          }));
+        },
+      },
+    ],
+  });
+
+  return MIDDLEWARE_ENTRYPOINT;
+}
+
+function getMiddlewareTemplate(middlewarePath: string) {
+  return `
+import { createContext, trySerializeLocals } from 'astro/middleware';
+import { next } from "@vercel/functions";
+import { onRequest } from "${middlewarePath}";
+
+export default async function middleware(request, context) {
+  const url = new URL(request.url);
+  const ctx = createContext({ request, params: {} });
+  Object.assign(ctx.locals, { vercel: { edge: context } });
+
+  return onRequest(ctx, next);
+}`;
+}

integrations/vercel-middleware/utils/vercelOutput.ts

@@ -0,0 +1,44 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+
+interface VercelConfig {
+  version: 3;
+  routes: {
+    src: string;
+    dest?: string;
+    middlewarePath?: string;
+    continue?: boolean;
+  }[];
+}
+
+const VERCEL_OUTPUT_DIR = ".vercel/output";
+
+export function getFunctionDir(rootDir: string, functionName: string) {
+  return path.join(rootDir, VERCEL_OUTPUT_DIR, `functions/${functionName}.func/`);
+}
+
+export async function insertMiddlewareRoute(
+  rootDir: string,
+  matcher: string,
+  middlewareName: string,
+) {
+  const vercelConfigPath = path.join(rootDir, VERCEL_OUTPUT_DIR, "config.json");
+
+  const vercelConfig = JSON.parse(await fs.readFile(vercelConfigPath, "utf-8")) as VercelConfig;
+  // the first two are /_astro/*, and filesystem routes
+  vercelConfig.routes.splice(1, 0, {
+    src: matcher,
+    middlewarePath: middlewareName,
+    continue: true,
+  });
+  await fs.writeFile(vercelConfigPath, JSON.stringify(vercelConfig, null, 2));
+}
+export async function generateFunctionConfig(functionDir: string, entrypoint: string) {
+  const config = {
+    runtime: "edge",
+    deploymentTarget: "v8-worker",
+    entrypoint,
+  };
+
+  await fs.writeFile(path.join(functionDir, ".vc-config.json"), JSON.stringify(config, null, 2));
+}

package.json

@@ -6,14 +6,10 @@
     "migrate": "cd scripts/migration && pnpm install && pnpm build && pnpm migrate",
     "audit-sidebar": "tsx scripts/audit-sidebar.ts",
     "postmigrate": "pnpm format:content",
-    "prebuild": "pnpm build:middleware-matcher && pnpm build:middleware",
-    "predev": "pnpm build:middleware-matcher && pnpm build:middleware --watch &",
-    "dev": "astro dev",
+    "prebuild": "node ./scripts/generate-middleware-matcher.js",
+    "dev": "pnpm prebuild && astro dev",
     "start": "astro dev",
-    "build": "pnpm prebuild && astro build && pnpm build:generate-middleware-function",
-    "build:middleware-matcher": "node ./scripts/generate-middleware-matcher.js",
-    "build:middleware": "node ./scripts/generate-middleware.js",
-    "build:generate-middleware-function": "node ./scripts/generate-middleware-function.js",
+    "build": "pnpm prebuild && astro build",
     "preview": "astro preview",
     "astro": "astro",
     "check": "astro check",
@@ -58,6 +54,7 @@
     "@types/react-dom": "^19.1.6",
     "@vercel/analytics": "^1.5.0",
     "@vercel/edge": "^1.2.2",
+    "@vercel/functions": "^2.2.13",
     "@vercel/og": "^0.6.8",
     "@vercel/speed-insights": "^1.2.0",
     "astro": "^5.13.2",
@@ -101,6 +98,7 @@
     "@types/node": "^22.16.5",
     "@vercel/node": "^5.3.6",
     "astro-eslint-parser": "^1.2.2",
+    "esbuild": ">=0.25.0",
     "eslint": "^9.31.0",
     "eslint-config-flat-gitignore": "^2.1.0",
     "eslint-config-prettier": "^10.1.8",