前端、後端、資料庫是怎麼串起來的

幾乎每個網頁應用都在做三件事：把東西「呈現」給人看、執行「邏輯與規則」、以及「記住」資料。在 Cloudflare 上，這三件事分別對應到三個元件——瀏覽器（前端 front-end）、一個 Worker（你的後端 API）、以及一個資料庫（D1、KV、R2 或 Durable Objects）。這篇就是要給你一張「它們怎麼接」的心智地圖。

「前端（front-end）」指的是跑在使用者瀏覽器裡的那一部分——也就是使用者真正看到、點得到的 HTML、CSS 和 JavaScript。「後端（back-end）」則是跑在伺服器上的程式碼（這裡就是 Worker），使用者不會直接看到它；它負責「思考」並跟資料庫溝通。「資料庫（database）」就是把資料存起來的地方，讓資料在這次請求結束後還活著。

注意從瀏覽器出發有兩種不同的箭頭：一種去載入組成頁面的靜態檔案（也就是「外觀」）；另一種是 API 呼叫，向 Worker 要最新的資料（也就是「內容」）。把這兩件事分開，正是整個模型的核心。

每一層都有一個明確的職責。把職責混在一起，是初學者最常犯的錯（例如把資料庫密碼寫在前端程式碼裡，結果任何人都看得到）。請像下面這樣，把責任分清楚：

理解全端應用最快的方法，就是「跟著一次點擊走一遍」。想像一個頁面上有一顆「載入待辦」按鈕。下面就是使用者按下去時，一步一步到底發生了什麼事。

每一步在做什麼

• 點擊：瀏覽器的 JavaScript 偵測到按鈕被按下，呼叫 fetch()。
• fetch GET /api/todos：一個 HTTP 請求離開瀏覽器，被導向你的 Worker。
• SELECT ...：Worker 向資料庫要它需要的那些列（rows）。
• 資料列：資料庫把符合的資料交還給 Worker。
• JSON 回應：Worker 把資料轉成 JSON（一種簡單的文字格式）回傳。
• 畫出來：瀏覽器收到 JSON 後更新頁面——完全不用整頁重新載入。

Worker 連資料庫的方式，不像舊式伺服器那樣靠「密碼 + 連線字串」。取而代之的是宣告一個 binding（綁定）——一條有名字、又安全的連線，由 Cloudflare 幫你接好。在程式碼裡，這個 binding 會以 env 物件上的屬性出現，例如 env.DB。

下面是三層一起運作的「最小版本」：一段會呼叫 fetch 的前端、一個從 D1 回傳 JSON 的 Worker、把它們綁在一起的 wrangler.toml，以及建立資料的 SQL。把這幾段放進同一個專案，你就有一個真正的全端應用了。

1. 1. 前端（跑在瀏覽器裡）

   純 JavaScript，點擊時呼叫你的 API，再把結果畫出來。不用任何框架就能看懂這個概念。

   htmlcontent_copy複製

   <!-- public/index.html -->
   <button id="load">Load todos</button>
   <ul id="list"></ul>
   
   <script>
     async function loadTodos() {
       // Ask the Worker (back-end) for data
       const res = await fetch("/api/todos");
       const todos = await res.json();
       // Paint the result into the page
       document.querySelector("#list").innerHTML =
         todos.map((t) => `<li>${t.title}</li>`).join("");
     }
     document.querySelector("#load").addEventListener("click", loadTodos);
   </script>

2. 2. 後端 Worker（回傳 JSON）

   一般路徑它供應靜態檔案；遇到 /api/todos 時，它透過 env.DB 讀取 D1，再回傳 JSON。注意：使用者的請求從不直接碰資料庫——只有 Worker 會。

   jscontent_copy複製

   // src/index.js
   export default {
     async fetch(request, env, ctx) {
       const url = new URL(request.url);
       if (url.pathname === "/api/todos") {
         // env.DB is the D1 binding from wrangler.toml
         const { results } = await env.DB
           .prepare("SELECT id, title FROM todos")
           .all();
         return Response.json(results);
       }
       // Everything else is served as a static asset
       return env.ASSETS.fetch(request);
     },
   };

3. 3. wrangler.toml（接好綁定）

   這個設定檔告訴 Cloudflare：你的 Worker 進入檔在哪、靜態檔案放哪、以及要把哪個資料庫以 env.DB 的名義開放出來。

   tomlcontent_copy複製

   name = "my-fullstack-app"
   main = "src/index.js"
   compatibility_date = "2025-01-01"
   
   # Serve the front-end from ./public, exposed as env.ASSETS
   [assets]
   directory = "./public"
   binding = "ASSETS"
   
   # Bind a D1 database; reach it in code as env.DB
   [[d1_databases]]
   binding = "DB"
   database_name = "my-app-db"
   database_id = "<paste-your-database-id>"

4. 4. 資料層（建立資料表）

   把這段 SQL 跑一次，建立 todos 資料表並塞幾筆資料，這樣你的 /api/todos 端點才有東西可以回傳。

   sqlcontent_copy複製

   CREATE TABLE IF NOT EXISTS todos (
     id INTEGER PRIMARY KEY,
     title TEXT NOT NULL
   );
   
   INSERT INTO todos (title) VALUES
     ('Learn the full-stack model'),
     ('Wire a Worker to D1');

5. 5. 先在本機跑，再部署

   wrangler dev 會在本機把所有東西跑起來，網址是 http://localhost:8787。覺得 OK 後，wrangler deploy 一次就把三層全部部署到 Cloudflare 的全球網路上。

   bashcontent_copy複製

   npx wrangler d1 execute my-app-db --local --file=./schema.sql
   npx wrangler dev
   npx wrangler deploy

初學者常踩的雷

• CORS 錯誤：如果前端和 API 在同一個 Worker 上，通常就完全避開了——用同一個來源（origin）供應兩者是最簡單的做法。
• 忘了 await：fetch() 和 D1 查詢都是非同步的；一定要 await，不然你拿到的會是 Promise 而不是資料。
• 想回 JSON 卻回了 HTML：用 Response.json(data)，前端才能乾淨地呼叫 res.json()。
• 綁定名稱對不上：wrangler.toml 裡的名字要和你在 env 上讀的一致（env.DB 就要有 binding = "DB"）。
• 改到本機還是遠端資料庫：--local 動的是你電腦上的副本；拿掉它（或用 --remote）才會改到已部署的資料庫。