Cloudflare로 GitHub Pages 블로그에 조회수 붙이기 - 2편

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
  "$schema": "node_modules/wrangler/config-schema.json",
  "name": "worker",
  "main": "src/index.ts",
  "compatibility_date": "2026-09-21",
  "vars": {
    "ALLOWED_ORIGINS": "https://example.github.io"
  },
  "durable_objects": {
    "bindings": [
      {
        "name": "MY_DURABLE_OBJECT",
        "class_name": "MyDurableObject"
      }
    ]
  },
  "migrations": [
    {
      "tag": "v1",
      "new_sqlite_classes": ["MyDurableObject"]
    }
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

import { DurableObject } from "cloudflare:workers";

// Keep the generated class/binding names and v1 SQLite migration stable.
export class MyDurableObject extends DurableObject<Env> {
	constructor(ctx: DurableObjectState, env: Env) {
		super(ctx, env);
		ctx.storage.sql.exec(`CREATE TABLE IF NOT EXISTS counter (
			id INTEGER PRIMARY KEY CHECK (id = 1),
			views INTEGER NOT NULL CHECK (views >= 0)
		)`);
		ctx.storage.sql.exec(`CREATE TABLE IF NOT EXISTS counted_requests (
			request_id TEXT PRIMARY KEY
		)`);
	}

	getViews(): number {
		return this.ctx.storage.sql.exec<{ views: number }>(
			"SELECT views FROM counter WHERE id = 1",
		).toArray()[0]?.views ?? 0;
	}

	incrementViews(requestId: string): number {
		// Persist the receipt and increment together: neither can commit alone.
		return this.ctx.storage.transactionSync(() => {
			const inserted = this.ctx.storage.sql.exec<{ request_id: string }>(
				"INSERT INTO counted_requests (request_id) VALUES (?) ON CONFLICT DO NOTHING RETURNING request_id",
				requestId,
			).toArray();
			if (inserted.length === 0) return this.getViews();
			return this.ctx.storage.sql.exec<{ views: number }>(`
				INSERT INTO counter (id, views) VALUES (1, 1)
				ON CONFLICT (id) DO UPDATE SET views = views + 1
				RETURNING views
			`).one().views;
		});
	}

}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function normalizePostId(value: string | null): string | null {
	if (!value || value.length > 1024) return null;
	try {
		// Accept a pathname (including percent-encoded Korean), never a full URL.
		const decoded = decodeURIComponent(value);
		const match = /^\/posts\/([\p{L}\p{M}\p{N}_-]+)\/?$/u.exec(decoded);
		if (!match) return null;
		const canonical = `/posts/${encodeURIComponent(match[1])}/`;
		return canonical.length <= 1024 ? canonical : null;
	} catch {
		return null;
	}
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

export default {
	async fetch(request, env): Promise<Response> {
		const url = new URL(request.url);
		const origin = request.headers.get("Origin");
		const allowedOrigins = env.ALLOWED_ORIGINS.split(",").map((value) => value.trim());
		const headers = new Headers({ "Cache-Control": "no-store", Vary: "Origin" });
		if (origin && allowedOrigins.includes(origin)) {
			headers.set("Access-Control-Allow-Origin", origin);
		}
		const json = (body: object, status = 200) => Response.json(body, { status, headers });

		// Reject disallowed browser origins before storage access, even for simple POSTs.
		// Requests without Origin (e.g. curl) remain supported; CORS is not authentication.
		if (origin && !allowedOrigins.includes(origin)) {
			return json({ error: "Origin not allowed" }, 403);
		}
		if (url.pathname !== "/api/views") return json({ error: "Not found" }, 404);
		const methods = ["GET", "POST", "OPTIONS"];
		if (!methods.includes(request.method)) {
			headers.set("Allow", methods.join(", "));
			return json({ error: "Method not allowed" }, 405);
		}
		if (request.method === "OPTIONS") {
			const method = request.headers.get("Access-Control-Request-Method");
			if (method && (!methods.includes(method) || method === "OPTIONS")) {
				headers.set("Allow", methods.join(", "));
				return json({ error: "Method not allowed" }, 405);
			}
			const requestedHeaders = request.headers.get("Access-Control-Request-Headers");
			if (requestedHeaders?.split(",").some((value) => !["content-type", "idempotency-key"].includes(value.trim().toLowerCase()))) {
				return json({ error: "Request headers not allowed" }, 400);
			}
			headers.set("Access-Control-Allow-Methods", methods.join(", "));
			headers.set("Access-Control-Allow-Headers", "Content-Type, Idempotency-Key");
			return new Response(null, { status: 204, headers });
		}

		const postId = normalizePostId(url.searchParams.get("postId"));
		if (!postId || url.searchParams.getAll("postId").length !== 1) {
			return json({ error: "Provide one valid postId: /posts/<slug>/ (maximum 1024 characters)" }, 400);
		}
		const requestId = request.headers.get("Idempotency-Key");
		if (request.method === "POST" && (!requestId || !/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(requestId))) {
			return json({ error: "POST requires a UUID v4 Idempotency-Key header" }, 400);
		}
		try {
			const counter = env.MY_DURABLE_OBJECT.getByName(postId);
			const views = request.method === "POST" ? await counter.incrementViews(requestId!.toLowerCase()) : await counter.getViews();
			return json({ views });
		} catch (error) {
			console.error("View counter storage request failed", error);
			return json({ error: "View counter temporarily unavailable" }, 503);
		}
	},
} satisfies ExportedHandler<Env>;

1
2

npm run cf-typegen
npx tsc --noEmit

1
2

npm run dev -- --local \
  --var ALLOWED_ORIGINS:https://example.github.io,http://localhost:1313,http://127.0.0.1:1313

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

curl 'http://localhost:8787/api/views?postId=/posts/counter-check/'
# {"views":0}

curl -X POST \
  -H 'Idempotency-Key: 11111111-1111-4111-8111-111111111111' \
  'http://localhost:8787/api/views?postId=/posts/counter-check/'
# {"views":1}

curl -X POST \
  -H 'Idempotency-Key: 11111111-1111-4111-8111-111111111111' \
  'http://localhost:8787/api/views?postId=/posts/counter-check/'
# {"views":1} — 같은 ID이므로 추가 집계하지 않는다.

curl -X POST \
  -H 'Idempotency-Key: 22222222-2222-4222-8222-222222222222' \
  'http://localhost:8787/api/views?postId=/posts/counter-check/'
# {"views":2} — 새로운 ID이므로 1 증가한다.

curl 'http://localhost:8787/api/views?postId=/posts/counter-check/'
# {"views":2}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

curl -i 'http://localhost:8787/api/views'
# postId가 없으므로 400

curl -i -X POST \
  'http://localhost:8787/api/views?postId=/posts/counter-check/'
# Idempotency-Key가 없으므로 400

curl -i -X DELETE \
  'http://localhost:8787/api/views?postId=/posts/counter-check/'
# 지원하지 않는 메서드이므로 405

curl -i -X OPTIONS \
  -H 'Origin: http://localhost:1313' \
  -H 'Access-Control-Request-Method: POST' \
  -H 'Access-Control-Request-Headers: idempotency-key' \
  'http://localhost:8787/api/views'
# 204 및 Access-Control-Allow-* 응답 헤더