架構藍圖：部落格 / CMS

一個部落格或 CMS（內容管理系統，就是負責存放與供應文章的軟體）要做好四件事：把頁面顯示給讀者、跑一個 API、存放文字、存放圖片。Cloudflare 不是用一台大伺服器全包，而是把這些工作拆給數個小而專一的服務，全部都跑在邊緣（edge，指離讀者很近的資料中心）。

這一頁是「一眼看懂整個系統」的地圖。下面這張圖把每個零件串起來：讀者的瀏覽器同時跟 Pages（前端）和 Worker（API）對話；Worker 從 D1 讀文章、從 R2 讀圖片、從 KV 拿快取；而瀏覽器則透過 Images 抓最佳化過的圖片。

每個 Cloudflare 產品都只扮演一個明確的角色。把它們分開，正是讓系統便宜、快、又好理解的關鍵——你可以只動快取而不碰資料庫，或換掉前端卻不用重寫 API。

四張表就能描述一個部落格。一位作者寫多篇文章。一篇文章可以掛多個標籤，一個標籤也能出現在多篇文章上——這種「多對多」關係需要一張中介表，叫 post_tags。注意 posts 只存 cover_key（指向 R2 的指標），不存圖片本身的位元組。

CREATE TABLE authors (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  email TEXT UNIQUE
);

CREATE TABLE posts (
  id INTEGER PRIMARY KEY,
  author_id INTEGER NOT NULL REFERENCES authors(id),
  title TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL,
  body TEXT NOT NULL,
  cover_key TEXT,
  published INTEGER NOT NULL DEFAULT 0,
  created_at TEXT NOT NULL DEFAULT (datetime('now'))
);

CREATE TABLE tags (
  id INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  slug TEXT UNIQUE NOT NULL
);

CREATE TABLE post_tags (
  post_id INTEGER NOT NULL REFERENCES posts(id),
  tag_id INTEGER NOT NULL REFERENCES tags(id),
  PRIMARY KEY (post_id, tag_id)
);

讀一篇文章（含快取）

有人打開一篇文章時，Worker 會先看 KV。如果 JSON 已經在那裡（命中快取），就立刻回傳、完全不碰資料庫。如果不在（未命中），就去查 D1、組好回應，再存進 KV 給下次用。這就是為什麼熱門文章能一直又快又便宜。

發布一篇文章

寫入則是反方向。作者送出文字加上一張封面圖；Worker 把檔案存進 R2、把資料列（和它的標籤）寫進 D1，然後刪掉 KV 裡的快取副本，讓讀者馬上看到新版本。

綁定（binding）是一個有名字的連接器（例如 DB 或 CACHE），你在 wrangler.jsonc 裡宣告它，Worker 就能用 env.<名稱> 存取資源——程式碼裡不用放連線字串或密鑰。以下：建立資源、宣告綁定、定義結構，再寫 Worker 與前端。

1. 建立儲存資源

   資料庫、快取命名空間、圖片桶各一條指令。把 Wrangler 印出的 ID 複製起來。

   bashcontent_copy複製

   npx wrangler d1 create blog
   npx wrangler kv namespace create CACHE
   npx wrangler r2 bucket create blog-images

2. 宣告綁定

   把三個綁定都放進 wrangler.jsonc。這樣 Worker 裡就能用 env.DB、env.CACHE 與 env.BUCKET。

   jsoncontent_copy複製

   {
     "name": "blog-api",
     "main": "src/index.js",
     "compatibility_date": "2025-01-01",
     "d1_databases": [
       { "binding": "DB", "database_name": "blog", "database_id": "<your-d1-id>" }
     ],
     "kv_namespaces": [
       { "binding": "CACHE", "id": "<your-kv-id>" }
     ],
     "r2_buckets": [
       { "binding": "BUCKET", "bucket_name": "blog-images" }
     ]
   }

3. 套用資料庫結構

   用 --remote 把「資料模型」段落裡的 schema.sql 套到雲端上真正的資料庫。

   bashcontent_copy複製

   npx wrangler d1 execute blog --remote --file=./schema.sql

4. 寫 Worker API（讀取路徑）

   這個 handler 是整張藍圖的核心：先 KV、再 D1、最後寫回 KV。它也用 R2 的 cover_key 組出 Images 網址。

   jscontent_copy複製

   export default {
     async fetch(request, env) {
       const url = new URL(request.url);
       const slug = url.pathname.split("/").pop();
       const cacheKey = `post:${slug}`;
   
       // 1) Try the KV cache first
       const cached = await env.CACHE.get(cacheKey);
       if (cached) {
         return new Response(cached, {
           headers: { "content-type": "application/json", "x-cache": "HIT" },
         });
       }
   
       // 2) Cache miss -> read post + author from D1
       const post = await env.DB
         .prepare(
           "SELECT p.id, p.title, p.body, p.cover_key, a.name AS author " +
           "FROM posts p JOIN authors a ON a.id = p.author_id " +
           "WHERE p.slug = ? AND p.published = 1"
         )
         .bind(slug)
         .first();
   
       if (!post) return new Response("Not found", { status: 404 });
   
       // 3) Build an optimised image URL (R2 object served via Images)
       post.cover_url =
         `https://img.example.com/cdn-cgi/image/width=1200/${post.cover_key}`;
   
       const json = JSON.stringify(post);
   
       // 4) Save to KV for 5 minutes so the next read is instant
       await env.CACHE.put(cacheKey, json, { expirationTtl: 300 });
   
       return new Response(json, {
         headers: { "content-type": "application/json", "x-cache": "MISS" },
       });
     },
   };

5. 串接前端

   在 Pages 上，只要用原生 fetch() 打 Worker API 就夠了。頁面把標題、作者與最佳化過的封面圖渲染出來。

   jscontent_copy複製

   async function loadPost(slug) {
     const res = await fetch(`/api/posts/${slug}`);
     if (!res.ok) throw new Error("Post not found");
     const post = await res.json();
   
     document.querySelector("#title").textContent = post.title;
     document.querySelector("#author").textContent = "by " + post.author;
     document.querySelector("#cover").src = post.cover_url;
     document.querySelector("#body").innerHTML = post.body;
   }
   
   // Read the slug from the URL, e.g. /blog/hello-world
   loadPost(location.pathname.split("/").pop());

6. 部署上線

   發布 Worker；把你的 repo 接上 Pages 做前端。整個部落格就上線在 Cloudflare 的邊緣了。

   bashcontent_copy複製

   npx wrangler deploy

• 編輯或下架文章時一定要讓 KV 鍵失效，否則讀者會看到過時內容。
• D1 裡只存 cover_key（一個短字串）；真正的圖片位元組放在 R2。
• 在 posts(slug) 上建索引——它是你主要的查找欄位，能讓讀取一直很便宜。
• R2 沒有下載流量費，所以供應圖片比一般雲端儲存便宜很多。
• 密鑰（例如管理者 token）放在 wrangler secrets，千萬別寫進 wrangler.jsonc。