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

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

@@ -2,7 +2,7 @@
* Gateway Manager
*
* 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:
* .cw-previews/gateway/
@@ -195,8 +195,8 @@ export class GatewayManager {
/**
* Generate a Caddyfile for the gateway from all active preview routes.
*
* Uses path-based routing under a single `localhost:<port>` block.
* Each preview is accessible at `/<previewId>/...` — no subdomain DNS needed.
* Uses subdomain-based routing: each preview gets its own `<previewId>.localhost:80` block.
* 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).
*/
export function generateGatewayCaddyfile(
@@ -209,8 +209,6 @@ export function generateGatewayCaddyfile(
'{',
' auto_https off',
'}',
'',
`:80 {`,
];
for (const [previewId, routes] of previews) {
@@ -221,21 +219,25 @@ export function generateGatewayCaddyfile(
return b.route.length - a.route.length;
});
lines.push('');
lines.push(`${previewId}.localhost:80 {`);
for (const route of sorted) {
if (route.route === '/') {
lines.push(` handle_path /${previewId}/* {`);
lines.push(` handle /* {`);
lines.push(` reverse_proxy ${route.containerName}:${route.port}`);
lines.push(` }`);
} else {
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(` }`);
}
}
lines.push('}');
}
lines.push('}');
lines.push('');
return lines.join('\n');

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

@@ -1,7 +1,7 @@
/**
* 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.
*/
@@ -20,7 +20,7 @@ const DEFAULT_INTERVAL_MS = 3_000;
* Wait for all non-internal services to become healthy by polling their
* 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 config - Preview config with service definitions
* @param timeoutMs - Maximum time to wait (default: 120s)
@@ -60,7 +60,7 @@ export async function waitForHealthy(
const route = svc.route ?? '/';
const healthPath = svc.healthcheck!.path;
const basePath = route === '/' ? '' : route;
const url = `http://localhost:${gatewayPort}/${previewId}${basePath}${healthPath}`;
const url = `http://${previewId}.localhost:${gatewayPort}${basePath}${healthPath}`;
try {
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.branch).toBe('feature-x');
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.status).toBe('running');
@@ -233,7 +233,7 @@ describe('PreviewManager', () => {
expect(buildingEvent).toBeDefined();
expect(readyEvent).toBeDefined();
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[0].id).toBe('aaa');
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].services).toHaveLength(1);
expect(previews[1].id).toBe('bbb');
@@ -573,7 +573,7 @@ describe('PreviewManager', () => {
expect(status!.status).toBe('running');
expect(status!.id).toBe('abc');
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');
});

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

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