feat: use caddy to serve static bundles to reduce manually reinventing it all in bun server
This commit is contained in:
@@ -0,0 +1,19 @@
|
||||
import index from "./index.html";
|
||||
import { createServer } from "./server";
|
||||
|
||||
export function createDevServer() {
|
||||
const server = createServer();
|
||||
|
||||
return {
|
||||
...server,
|
||||
routes: {
|
||||
...server.routes,
|
||||
"/d/:id": index,
|
||||
},
|
||||
} satisfies Parameters<typeof Bun.serve>[0];
|
||||
}
|
||||
|
||||
if (import.meta.main) {
|
||||
const server = Bun.serve(createDevServer());
|
||||
console.log(`Listening on http://${server.hostname}:${server.port}`);
|
||||
}
|
||||
+38
-66
@@ -1,13 +1,18 @@
|
||||
import { afterEach, describe, expect, test } from "bun:test";
|
||||
import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
|
||||
import { mkdtempSync, rmSync } from "node:fs";
|
||||
import { tmpdir } from "node:os";
|
||||
import { join } from "node:path";
|
||||
import { pathToFileURL } from "node:url";
|
||||
import { createProductionClientAssets } from "./server";
|
||||
import { createDrawingStore, type DrawingStore } from "./db";
|
||||
import { createServer } from "./server";
|
||||
|
||||
const cleanup: string[] = [];
|
||||
const stores: DrawingStore[] = [];
|
||||
|
||||
afterEach(() => {
|
||||
while (stores.length > 0) {
|
||||
stores.pop()?.close();
|
||||
}
|
||||
|
||||
while (cleanup.length > 0) {
|
||||
const dir = cleanup.pop();
|
||||
if (dir) {
|
||||
@@ -16,83 +21,50 @@ afterEach(() => {
|
||||
}
|
||||
});
|
||||
|
||||
function createClientAssetsFixture() {
|
||||
const dir = mkdtempSync(join(tmpdir(), "excali-client-assets-"));
|
||||
function createServerFixture() {
|
||||
const dir = mkdtempSync(join(tmpdir(), "excali-server-"));
|
||||
cleanup.push(dir);
|
||||
|
||||
writeFileSync(join(dir, "index.html"), "<!doctype html><html><body>ok</body></html>");
|
||||
writeFileSync(join(dir, "index-abc123.js"), "console.log('ok');");
|
||||
writeFileSync(join(dir, "index-abc123.js.br"), "compressed-brotli");
|
||||
const store = createDrawingStore(join(dir, "test.sqlite"));
|
||||
stores.push(store);
|
||||
|
||||
return createProductionClientAssets(
|
||||
{
|
||||
index: "./index.html",
|
||||
files: [
|
||||
{
|
||||
path: "./index.html",
|
||||
loader: "html",
|
||||
headers: {
|
||||
"content-type": "text/html;charset=utf-8",
|
||||
},
|
||||
},
|
||||
{
|
||||
path: "./index-abc123.js",
|
||||
loader: "js",
|
||||
headers: {
|
||||
"content-type": "text/javascript;charset=utf-8",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
pathToFileURL(`${dir}/`),
|
||||
);
|
||||
return {
|
||||
store,
|
||||
server: createServer({ drawingStore: store }),
|
||||
};
|
||||
}
|
||||
|
||||
describe("production client assets", () => {
|
||||
test("serves the HTML shell with revalidation headers", async () => {
|
||||
const assets = createClientAssetsFixture();
|
||||
describe("createServer", () => {
|
||||
test("redirects / to the latest drawing", () => {
|
||||
const { server, store } = createServerFixture();
|
||||
|
||||
const response = assets.serveHtml(new Request("http://local/d/abc123"));
|
||||
const response = server.routes["/"]?.(new Request("http://local/")) as Response;
|
||||
const created = store.listDrawings();
|
||||
|
||||
expect(response.status).toBe(200);
|
||||
expect(response.headers.get("cache-control")).toBe("no-cache");
|
||||
expect(response.headers.get("etag")).toBeNull();
|
||||
expect(await response.text()).toContain("<!doctype html>");
|
||||
expect(created).toHaveLength(1);
|
||||
expect(response.status).toBe(302);
|
||||
expect(response.headers.get("location")).toBe(`http://local/d/${created[0]?.id}`);
|
||||
});
|
||||
|
||||
test("serves immutable hashed assets as Brotli", async () => {
|
||||
const assets = createClientAssetsFixture();
|
||||
|
||||
const response = assets.serveAsset(
|
||||
new Request("http://local/index-abc123.js", {
|
||||
headers: {
|
||||
"accept-encoding": "gzip, br",
|
||||
},
|
||||
}),
|
||||
);
|
||||
test("keeps Bun responsible for API routes", async () => {
|
||||
const { server } = createServerFixture();
|
||||
const response = await server.routes["/api/health"]?.GET?.();
|
||||
|
||||
expect(response?.status).toBe(200);
|
||||
expect(response?.headers.get("cache-control")).toBe("public, max-age=31536000, immutable");
|
||||
expect(response?.headers.get("content-encoding")).toBe("br");
|
||||
expect(response?.headers.get("vary")).toBe("Accept-Encoding");
|
||||
expect(response?.headers.get("etag")).toBeNull();
|
||||
expect(await response?.text()).toBe("compressed-brotli");
|
||||
expect(await response?.json()).toEqual({ ok: true });
|
||||
});
|
||||
|
||||
test("rejects asset requests without Brotli support", async () => {
|
||||
const assets = createClientAssetsFixture();
|
||||
test("does not expose a Bun static route for drawings in production", () => {
|
||||
const { server } = createServerFixture();
|
||||
|
||||
const response = assets.serveAsset(
|
||||
new Request("http://local/index-abc123.js", {
|
||||
headers: {
|
||||
"accept-encoding": "gzip",
|
||||
},
|
||||
}),
|
||||
);
|
||||
expect(Object.hasOwn(server.routes, "/d/:id")).toBe(false);
|
||||
});
|
||||
|
||||
expect(response?.status).toBe(406);
|
||||
expect(response?.headers.get("cache-control")).toBe("no-store");
|
||||
expect(response?.headers.get("vary")).toBe("Accept-Encoding");
|
||||
expect(await response?.text()).toBe("Brotli encoding is required");
|
||||
test("returns JSON 404 for unmatched requests", async () => {
|
||||
const { server } = createServerFixture();
|
||||
const response = await server.fetch(new Request("http://local/index-abc123.js"));
|
||||
|
||||
expect(response.status).toBe(404);
|
||||
expect(await response.json()).toEqual({ ok: false, error: "Not found" });
|
||||
});
|
||||
});
|
||||
|
||||
+6
-153
@@ -1,152 +1,13 @@
|
||||
import { existsSync } from "node:fs";
|
||||
import { basename } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
import index from "./index.html";
|
||||
import { createApi } from "./api";
|
||||
import { getDefaultDrawingStore } from "./db";
|
||||
import { type DrawingStore, getDefaultDrawingStore } from "./db";
|
||||
|
||||
type ClientManifestFile = {
|
||||
path: string;
|
||||
loader: string;
|
||||
headers?: Record<string, string>;
|
||||
type CreateServerOptions = {
|
||||
drawingStore?: DrawingStore;
|
||||
};
|
||||
|
||||
type ClientManifest = {
|
||||
index: string;
|
||||
files: ClientManifestFile[];
|
||||
};
|
||||
|
||||
type ProductionClientAssets = {
|
||||
serveHtml: (request: Request) => Response;
|
||||
serveAsset: (request: Request) => Response | null;
|
||||
};
|
||||
|
||||
type AssetFile = ClientManifestFile & {
|
||||
brotliPath: string;
|
||||
fileUrl: URL;
|
||||
};
|
||||
|
||||
function isClientManifest(value: unknown): value is ClientManifest {
|
||||
if (!value || typeof value !== "object") {
|
||||
return false;
|
||||
}
|
||||
|
||||
const candidate = value as Partial<ClientManifest>;
|
||||
return typeof candidate.index === "string" && Array.isArray(candidate.files);
|
||||
}
|
||||
|
||||
function toRequestPath(path: string): string {
|
||||
if (path.startsWith("/")) {
|
||||
return path;
|
||||
}
|
||||
|
||||
return `/${path.replace(/^\.\//, "")}`;
|
||||
}
|
||||
|
||||
function isClientAssetFile(path: string): boolean {
|
||||
const name = basename(path);
|
||||
return name !== "server.js" && !name.startsWith("server-");
|
||||
}
|
||||
|
||||
function acceptsBrotli(acceptEncoding: string | null): boolean {
|
||||
if (!acceptEncoding) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return acceptEncoding
|
||||
.split(",")
|
||||
.map((value) => value.trim().toLowerCase())
|
||||
.some((value) => value === "br" || value.startsWith("br;"));
|
||||
}
|
||||
|
||||
function createStaticResponse(
|
||||
fileUrl: URL,
|
||||
headersInit: Record<string, string> | undefined,
|
||||
cacheControl: string,
|
||||
extraHeaders?: Record<string, string>,
|
||||
): Response {
|
||||
const headers = new Headers(headersInit);
|
||||
headers.delete("ETag");
|
||||
headers.set("Cache-Control", cacheControl);
|
||||
if (extraHeaders) {
|
||||
for (const [name, value] of Object.entries(extraHeaders)) {
|
||||
headers.set(name, value);
|
||||
}
|
||||
}
|
||||
|
||||
return new Response(Bun.file(fileUrl), {
|
||||
headers,
|
||||
});
|
||||
}
|
||||
|
||||
export function createProductionClientAssets(
|
||||
manifest: ClientManifest,
|
||||
baseUrl = new URL("./", import.meta.url),
|
||||
): ProductionClientAssets {
|
||||
const htmlEntry = manifest.files.find((file) => file.loader === "html" || file.path === manifest.index);
|
||||
if (!htmlEntry) {
|
||||
throw new Error("Production client manifest is missing the HTML shell");
|
||||
}
|
||||
|
||||
const htmlUrl = new URL(htmlEntry.path, baseUrl);
|
||||
const assetEntries = new Map(
|
||||
manifest.files
|
||||
.filter((file) => file.path !== htmlEntry.path && isClientAssetFile(file.path))
|
||||
.map((file) => {
|
||||
const brotliPath = `${file.path}.br`;
|
||||
const brotliUrl = new URL(brotliPath, baseUrl);
|
||||
if (!existsSync(fileURLToPath(brotliUrl))) {
|
||||
throw new Error(`Missing Brotli asset for ${file.path}`);
|
||||
}
|
||||
|
||||
return [
|
||||
toRequestPath(file.path),
|
||||
{
|
||||
...file,
|
||||
brotliPath,
|
||||
fileUrl: new URL(file.path, baseUrl),
|
||||
} satisfies AssetFile,
|
||||
] as const;
|
||||
}),
|
||||
);
|
||||
|
||||
return {
|
||||
serveHtml() {
|
||||
return createStaticResponse(htmlUrl, htmlEntry.headers, "no-cache");
|
||||
},
|
||||
serveAsset(request) {
|
||||
const pathname = new URL(request.url).pathname;
|
||||
const asset = assetEntries.get(pathname);
|
||||
if (!asset) {
|
||||
return null;
|
||||
}
|
||||
if (!acceptsBrotli(request.headers.get("accept-encoding"))) {
|
||||
return new Response("Brotli encoding is required", {
|
||||
status: 406,
|
||||
headers: {
|
||||
"Cache-Control": "no-store",
|
||||
Vary: "Accept-Encoding",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return createStaticResponse(
|
||||
new URL(asset.brotliPath, asset.fileUrl),
|
||||
asset.headers,
|
||||
"public, max-age=31536000, immutable",
|
||||
{
|
||||
"Content-Encoding": "br",
|
||||
Vary: "Accept-Encoding",
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export function createServer() {
|
||||
const drawingStore = getDefaultDrawingStore();
|
||||
export function createServer(options: CreateServerOptions = {}) {
|
||||
const drawingStore = options.drawingStore ?? getDefaultDrawingStore();
|
||||
const api = createApi(drawingStore);
|
||||
const productionClient = isClientManifest(index) ? createProductionClientAssets(index) : null;
|
||||
|
||||
return {
|
||||
port: Number(process.env.PORT ?? "3000"),
|
||||
@@ -156,7 +17,6 @@ export function createServer() {
|
||||
const drawing = drawingStore.ensureInitialDrawing();
|
||||
return Response.redirect(new URL(`/d/${drawing.id}`, request.url), 302);
|
||||
},
|
||||
"/d/:id": productionClient ? (request: Request) => productionClient.serveHtml(request) : index,
|
||||
"/api/health": {
|
||||
GET: () => api.health(),
|
||||
},
|
||||
@@ -170,14 +30,7 @@ export function createServer() {
|
||||
DELETE: (request: Request & { params: Record<string, string> }) => api.deleteDrawing(request),
|
||||
},
|
||||
},
|
||||
fetch(request: Request) {
|
||||
const assetResponse = productionClient?.serveAsset(request);
|
||||
if (assetResponse) {
|
||||
return assetResponse;
|
||||
}
|
||||
|
||||
return Response.json({ ok: false, error: "Not found" }, { status: 404 });
|
||||
},
|
||||
fetch: (_request: Request) => Response.json({ ok: false, error: "Not found" }, { status: 404 }),
|
||||
} satisfies Parameters<typeof Bun.serve>[0];
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user