tas/Codewalkers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Switch preview gateway from path-prefix to subdomain routing

Browse Source 
Path-prefix routing (`localhost:9100/<id>/`) broke SPAs because absolute
asset paths (`/assets/index.js`) didn't match the `handle_path /<id>/*`
route. Subdomain routing (`<id>.localhost:9100/`) resolves this since
all paths are relative to the root. Chrome/Firefox resolve *.localhost
to 127.0.0.1 natively — no DNS setup needed.
This commit is contained in:
Lukas May
2026-03-05 22:38:00 +01:00
parent aedf149471
commit 1b8e496d39
5 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/server/preview/compose-generator.test.ts
View File

@@ -156,7 +156,7 @@ describe('generateComposeFile', () => {
}); });
describe('generateGatewayCaddyfile', () => { describe('generateGatewayCaddyfile', () => {
it('generates single-preview Caddyfile with path-based routing', () => { it('generates single-preview Caddyfile with subdomain routing', () => {
const previews = new Map<string, GatewayRoute[]>(); const previews = new Map<string, GatewayRoute[]>();
previews.set('abc123', [ previews.set('abc123', [
{ containerName: 'cw-preview-abc123-app', port: 3000, route: '/' }, { containerName: 'cw-preview-abc123-app', port: 3000, route: '/' },
@@ -164,8 +164,8 @@ describe('generateGatewayCaddyfile', () => {
const caddyfile = generateGatewayCaddyfile(previews, 9100); const caddyfile = generateGatewayCaddyfile(previews, 9100);
expect(caddyfile).toContain('auto_https off'); expect(caddyfile).toContain('auto_https off');
expect(caddyfile).toContain(':80 {'); expect(caddyfile).toContain('abc123.localhost:80 {');
expect(caddyfile).toContain('handle_path /abc123/*'); expect(caddyfile).toContain('handle /* {');
expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-app:3000'); expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-app:3000');
}); });
@@ -177,13 +177,14 @@ describe('generateGatewayCaddyfile', () => {
]); ]);
const caddyfile = generateGatewayCaddyfile(previews, 9100); const caddyfile = generateGatewayCaddyfile(previews, 9100);
expect(caddyfile).toContain('handle_path /abc123/api/*'); expect(caddyfile).toContain('abc123.localhost:80 {');
expect(caddyfile).toContain('handle_path /api/*');
expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-backend:8080'); expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-backend:8080');
expect(caddyfile).toContain('handle_path /abc123/*'); expect(caddyfile).toContain('handle /* {');
expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-frontend:3000'); expect(caddyfile).toContain('reverse_proxy cw-preview-abc123-frontend:3000');
}); });
it('generates multi-preview Caddyfile under single host block', () => { it('generates separate subdomain blocks for each preview', () => {
const previews = new Map<string, GatewayRoute[]>(); const previews = new Map<string, GatewayRoute[]>();
previews.set('abc', [ previews.set('abc', [
{ containerName: 'cw-preview-abc-app', port: 3000, route: '/' }, { containerName: 'cw-preview-abc-app', port: 3000, route: '/' },
@@ -193,9 +194,8 @@ describe('generateGatewayCaddyfile', () => {
]); ]);
const caddyfile = generateGatewayCaddyfile(previews, 9100); const caddyfile = generateGatewayCaddyfile(previews, 9100);
expect(caddyfile).toContain(':80 {'); expect(caddyfile).toContain('abc.localhost:80 {');
expect(caddyfile).toContain('handle_path /abc/*'); expect(caddyfile).toContain('xyz.localhost:80 {');
expect(caddyfile).toContain('handle_path /xyz/*');
expect(caddyfile).toContain('reverse_proxy cw-preview-abc-app:3000'); expect(caddyfile).toContain('reverse_proxy cw-preview-abc-app:3000');
expect(caddyfile).toContain('reverse_proxy cw-preview-xyz-app:5000'); expect(caddyfile).toContain('reverse_proxy cw-preview-xyz-app:5000');
}); });
@@ -209,9 +209,9 @@ describe('generateGatewayCaddyfile', () => {
]); ]);
const caddyfile = generateGatewayCaddyfile(previews, 9100); const caddyfile = generateGatewayCaddyfile(previews, 9100);
const apiAuthIdx = caddyfile.indexOf('/abc/api/auth'); const apiAuthIdx = caddyfile.indexOf('/api/auth');
const apiIdx = caddyfile.indexOf('handle_path /abc/api/*'); const apiIdx = caddyfile.indexOf('handle_path /api/*');
const rootIdx = caddyfile.indexOf('handle_path /abc/*'); const rootIdx = caddyfile.indexOf('handle /* {');
expect(apiAuthIdx).toBeLessThan(apiIdx); expect(apiAuthIdx).toBeLessThan(apiIdx);
expect(apiIdx).toBeLessThan(rootIdx); expect(apiIdx).toBeLessThan(rootIdx);

18
apps/server/preview/gateway.ts
View File

@@ -2,7 +2,7 @@
* Gateway Manager * Gateway Manager
* *
* Manages a single shared Caddy reverse proxy (the "gateway") that routes * Manages a single shared Caddy reverse proxy (the "gateway") that routes
* path-prefixed requests to per-preview compose stacks on a shared Docker network. * subdomain-based requests to per-preview compose stacks on a shared Docker network.
* *
* Architecture: * Architecture:
* .cw-previews/gateway/ * .cw-previews/gateway/
@@ -195,8 +195,8 @@ export class GatewayManager {
/** /**
* Generate a Caddyfile for the gateway from all active preview routes. * Generate a Caddyfile for the gateway from all active preview routes.
* *
* Uses path-based routing under a single `localhost:<port>` block. * Uses subdomain-based routing: each preview gets its own `<previewId>.localhost:80` block.
* Each preview is accessible at `/<previewId>/...` — no subdomain DNS needed. * Chrome/Firefox resolve `*.localhost` to 127.0.0.1 natively — no DNS setup needed.
* Routes within a preview are sorted by specificity (longest path first). * Routes within a preview are sorted by specificity (longest path first).
*/ */
export function generateGatewayCaddyfile( export function generateGatewayCaddyfile(
@@ -209,8 +209,6 @@ export function generateGatewayCaddyfile(
'{', '{',
' auto_https off', ' auto_https off',
'}', '}',
'',
`:80 {`,
]; ];
for (const [previewId, routes] of previews) { for (const [previewId, routes] of previews) {
@@ -221,21 +219,25 @@ export function generateGatewayCaddyfile(
return b.route.length - a.route.length; return b.route.length - a.route.length;
}); });
lines.push('');
lines.push(`${previewId}.localhost:80 {`);
for (const route of sorted) { for (const route of sorted) {
if (route.route === '/') { if (route.route === '/') {
lines.push(` handle_path /${previewId}/* {`); lines.push(` handle /* {`);
lines.push(` reverse_proxy ${route.containerName}:${route.port}`); lines.push(` reverse_proxy ${route.containerName}:${route.port}`);
lines.push(` }`); lines.push(` }`);
} else { } else {
const path = route.route.endsWith('/') ? route.route.slice(0, -1) : route.route; const path = route.route.endsWith('/') ? route.route.slice(0, -1) : route.route;
lines.push(` handle_path /${previewId}${path}/* {`); lines.push(` handle_path ${path}/* {`);
lines.push(` reverse_proxy ${route.containerName}:${route.port}`); lines.push(` reverse_proxy ${route.containerName}:${route.port}`);
lines.push(` }`); lines.push(` }`);
} }
} }
lines.push('}');
} }
lines.push('}');
lines.push(''); lines.push('');
return lines.join('\n'); return lines.join('\n');

6
apps/server/preview/health-checker.ts
View File

@@ -1,7 +1,7 @@
/** /**
* Health Checker * Health Checker
* *
* Polls service healthcheck endpoints through the gateway's path-based routing * Polls service healthcheck endpoints through the gateway's subdomain-based routing
* to verify that preview services are ready. * to verify that preview services are ready.
*/ */
@@ -20,7 +20,7 @@ const DEFAULT_INTERVAL_MS = 3_000;
* Wait for all non-internal services to become healthy by polling their * Wait for all non-internal services to become healthy by polling their
* healthcheck endpoints through the gateway's subdomain routing. * healthcheck endpoints through the gateway's subdomain routing.
* *
* @param previewId - The preview deployment ID (used as path prefix) * @param previewId - The preview deployment ID (used as subdomain)
* @param gatewayPort - The gateway's host port * @param gatewayPort - The gateway's host port
* @param config - Preview config with service definitions * @param config - Preview config with service definitions
* @param timeoutMs - Maximum time to wait (default: 120s) * @param timeoutMs - Maximum time to wait (default: 120s)
@@ -60,7 +60,7 @@ export async function waitForHealthy(
const route = svc.route ?? '/'; const route = svc.route ?? '/';
const healthPath = svc.healthcheck!.path; const healthPath = svc.healthcheck!.path;
const basePath = route === '/' ? '' : route; const basePath = route === '/' ? '' : route;
const url = `http://localhost:${gatewayPort}/${previewId}${basePath}${healthPath}`; const url = `http://${previewId}.localhost:${gatewayPort}${basePath}${healthPath}`;
try { try {
const response = await fetch(url, { const response = await fetch(url, {

8
apps/server/preview/manager.test.ts
View File

@@ -220,7 +220,7 @@ describe('PreviewManager', () => {
expect(result.projectId).toBe('proj-1'); expect(result.projectId).toBe('proj-1');
expect(result.branch).toBe('feature-x'); expect(result.branch).toBe('feature-x');
expect(result.gatewayPort).toBe(9100); expect(result.gatewayPort).toBe(9100);
expect(result.url).toBe('http://localhost:9100/abc123test/'); expect(result.url).toBe('http://abc123test.localhost:9100/');
expect(result.mode).toBe('preview'); expect(result.mode).toBe('preview');
expect(result.status).toBe('running'); expect(result.status).toBe('running');
@@ -233,7 +233,7 @@ describe('PreviewManager', () => {
expect(buildingEvent).toBeDefined(); expect(buildingEvent).toBeDefined();
expect(readyEvent).toBeDefined(); expect(readyEvent).toBeDefined();
expect((readyEvent!.payload as Record<string, unknown>).url).toBe( expect((readyEvent!.payload as Record<string, unknown>).url).toBe(
'http://localhost:9100/abc123test/', 'http://abc123test.localhost:9100/',
); );
}); });
@@ -472,7 +472,7 @@ describe('PreviewManager', () => {
expect(previews).toHaveLength(2); expect(previews).toHaveLength(2);
expect(previews[0].id).toBe('aaa'); expect(previews[0].id).toBe('aaa');
expect(previews[0].gatewayPort).toBe(9100); expect(previews[0].gatewayPort).toBe(9100);
expect(previews[0].url).toBe('http://localhost:9100/aaa/'); expect(previews[0].url).toBe('http://aaa.localhost:9100/');
expect(previews[0].mode).toBe('preview'); expect(previews[0].mode).toBe('preview');
expect(previews[0].services).toHaveLength(1); expect(previews[0].services).toHaveLength(1);
expect(previews[1].id).toBe('bbb'); expect(previews[1].id).toBe('bbb');
@@ -573,7 +573,7 @@ describe('PreviewManager', () => {
expect(status!.status).toBe('running'); expect(status!.status).toBe('running');
expect(status!.id).toBe('abc'); expect(status!.id).toBe('abc');
expect(status!.gatewayPort).toBe(9100); expect(status!.gatewayPort).toBe(9100);
expect(status!.url).toBe('http://localhost:9100/abc/'); expect(status!.url).toBe('http://abc.localhost:9100/');
expect(status!.mode).toBe('preview'); expect(status!.mode).toBe('preview');
}); });

4
apps/server/preview/manager.ts
View File

@@ -239,7 +239,7 @@ export class PreviewManager {
await this.runSeeds(projectName, config); await this.runSeeds(projectName, config);
// 11. Success // 11. Success
const url = `http://localhost:${gatewayPort}/${id}/`; const url = `http://${id}.localhost:${gatewayPort}/`;
log.info({ id, url }, 'preview deployment ready'); log.info({ id, url }, 'preview deployment ready');
this.eventBus.emit<PreviewReadyEvent>({ this.eventBus.emit<PreviewReadyEvent>({
@@ -605,7 +605,7 @@ export class PreviewManager {
projectId, projectId,
branch, branch,
gatewayPort, gatewayPort,
url: `http://localhost:${gatewayPort}/${previewId}/`, url: `http://${previewId}.localhost:${gatewayPort}/`,
mode, mode,
status: 'running', status: 'running',
services: [], services: [],