fix(vercel): edge middleware #9585

lilnasy · 2024-01-02T22:10:18Z

Changes

Depends on chore(vercel): delete request response conversion logic #9583
Closes Middleware works locally, doesn't run at all when deployed to Vercel #9357
Creates an edge middleware according to Vercel's Build Output API.

Testing

Added cases to edge-middleware.test.js

Docs

Does not affect usage.

changeset-bot · 2024-01-02T22:10:22Z

🦋 Changeset detected

Latest commit: 930f851

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

lilnasy · 2024-01-15T17:33:52Z

@gislerro Will be ready for review soon after astro 4.2 (wednesday). The work is done, it is just based on a future branch.

Late this week/early next week.

packages/integrations/vercel/src/serverless/middleware.ts

remove getVercelOutput

lilnasy · 2024-01-18T00:12:44Z

packages/integrations/vercel/src/serverless/adapter.ts

+interface CreateMiddlewareFolderArgs {
+	config: AstroConfig
+	entry: URL
+	functionName: string
+}
+
+async function createMiddlewareFolder({
+	functionName,
+	entry,
+	config,
+}: CreateMiddlewareFolderArgs) {
+	const functionFolder = new URL(`./functions/${functionName}.func/`, config.outDir);
+
+	await generateEdgeMiddleware(
+		entry,
+		new URL(VERCEL_EDGE_MIDDLEWARE_FILE, config.srcDir),
+		new URL('./middleware.mjs', functionFolder),
+	)
+
+	await writeJson(new URL(`./.vc-config.json`, functionFolder), {
+		runtime: 'edge',
+		entrypoint: 'middleware.mjs',
+	});
+}
+


We create an edge function, complete with its own folder and vc-config.

lilnasy · 2024-01-18T00:13:57Z

packages/integrations/vercel/src/serverless/middleware.ts

+	const { origin } = new URL(request.url);
+	const next = () =>
+		fetch(new URL('/_render', request.url), {
 			headers: {
-				${JSON.stringify(ASTRO_LOCALS_HEADER)}: trySerializeLocals(ctx.locals)
+				...Object.fromEntries(request.headers.entries()),
+				'x-astro-path': request.url.replace(origin, ''),
+				'x-astro-locals': trySerializeLocals(ctx.locals)
 			}
-		});
-		return response;
-	};
+		})


The edge function calls the node server at /_render, with the original path as a header.

bluwy · 2024-01-18T08:56:20Z

packages/integrations/vercel/src/serverless/adapter.ts

+											: _middlewareEntryPoint ? '_middleware'
+											: 'render',


Should this use dest instead? Or the render should be _render

I think we should move this strings (_render, _middleware) to some constants, so we don't do any typo

You're right, it is supposed to be _render. Moved to constants.

ematipico

Sorry to bother you, but this PR has many changes that aren't related to the edge middleware and aren't explained in the PR description.

Could you:

Describe the entity to the changes in the PR description. For example, we don't know why you changed render to _render.
Move them in a separate PR

ematipico · 2024-01-18T16:01:59Z

packages/integrations/vercel/src/serverless/adapter.ts

 					}
 				}
+				if (_middlewareEntryPoint) {
+					await createMiddlewareFolder({
+						functionName: '_middleware',


Why _middleware and not middleware?

Vercel routes the folder names to a path on the deployed website so we avoid interfering this way.

ematipico · 2024-01-18T16:02:51Z

packages/integrations/vercel/src/serverless/adapter.ts

+											: _middlewareEntryPoint ? '_middleware'
+											: 'render',


I think we should move this strings (_render, _middleware) to some constants, so we don't do any typo

packages/integrations/vercel/src/serverless/adapter.ts

ematipico · 2024-01-18T16:04:07Z

packages/integrations/vercel/src/serverless/entrypoint.ts

+		const realPath = req.headers['x-astro-path'];
+		if (typeof realPath === 'string') {
+			req.url = realPath;
+		}


What's this change about?

This is so that the edge function can call the serverless function in next().

I still think it's worth adding a comment because the read and write of the header happens in two different places, so it could be helpful to give some context.

Added

https://github.com/withastro/astro/pull/9585/files#diff-071ccfbdfd7b9bc803219179f88ae0bdb227a399bc4a481b7831c82b801d7a17R32-R43

packages/integrations/vercel/src/serverless/middleware.ts

github-actions bot added pkg: integration Related to any renderer integration (scope) pkg: astro Related to the core `astro` package (scope) pr: docs A PR that includes documentation for review labels Jan 2, 2024

sarah11918 removed the pr: docs A PR that includes documentation for review label Jan 9, 2024

This comment has been minimized.

Sign in to view

lilnasy force-pushed the vercel-edge-middleware branch from 06906cd to 32b2288 Compare January 17, 2024 16:54

github-actions bot removed the pkg: astro Related to the core `astro` package (scope) label Jan 17, 2024

lilnasy commented Jan 17, 2024

View reviewed changes

packages/integrations/vercel/src/serverless/middleware.ts Outdated Show resolved Hide resolved

create vercel edge middleware

5c7d8ca

remove getVercelOutput

lilnasy force-pushed the vercel-edge-middleware branch from 32b2288 to 5c7d8ca Compare January 17, 2024 17:23

lilnasy added 2 commits January 17, 2024 22:38

handle node built-in modules

b014bb1

edge function to node fetch

8081fad

lilnasy force-pushed the vercel-edge-middleware branch from f3ead9c to 8081fad Compare January 18, 2024 00:08

lilnasy marked this pull request as ready for review January 18, 2024 00:10

lilnasy commented Jan 18, 2024

View reviewed changes

lilnasy added 3 commits January 18, 2024 00:15

adjust tests

94fd816

add test

20858ff

add changeset

0c3f4c7

bluwy reviewed Jan 18, 2024

View reviewed changes

ematipico reviewed Jan 18, 2024

View reviewed changes

lilnasy added 5 commits January 18, 2024 17:56

function paths as constants

8f708c4

ensure node built-in modules are namespaced with node:

a2d6eef

x-astro-path as constant

c1df03f

appease linter

6ffb099

add comments for ASTRO_PATH_HEADER and ASTRO_LOCALS_HEADER

f7d295c

ematipico approved these changes Jan 21, 2024

View reviewed changes

natemoo-re approved these changes Jan 22, 2024

View reviewed changes

Merge branch 'main' into vercel-edge-middleware

930f851

lilnasy merged commit 05adaaa into withastro:main Jan 22, 2024
13 checks passed

lilnasy deleted the vercel-edge-middleware branch January 22, 2024 23:34

astrobot-houston mentioned this pull request Jan 22, 2024

[ci] release #9772

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(vercel): edge middleware #9585

fix(vercel): edge middleware #9585

lilnasy commented Jan 2, 2024 •

edited

Loading

changeset-bot bot commented Jan 2, 2024 •

edited

Loading

This comment has been minimized.

lilnasy commented Jan 15, 2024

lilnasy Jan 18, 2024

lilnasy Jan 18, 2024

bluwy Jan 18, 2024

ematipico Jan 18, 2024

lilnasy Jan 18, 2024

ematipico left a comment

ematipico Jan 18, 2024

lilnasy Jan 18, 2024

ematipico Jan 18, 2024

ematipico Jan 18, 2024

lilnasy Jan 18, 2024

ematipico Jan 19, 2024

lilnasy Jan 19, 2024

fix(vercel): edge middleware #9585

fix(vercel): edge middleware #9585

Conversation

lilnasy commented Jan 2, 2024 • edited Loading

Changes

Testing

Docs

changeset-bot bot commented Jan 2, 2024 • edited Loading

🦋 Changeset detected

This comment has been minimized.

lilnasy commented Jan 15, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ematipico left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lilnasy commented Jan 2, 2024 •

edited

Loading

changeset-bot bot commented Jan 2, 2024 •

edited

Loading