第 4 週 · 關聯、登入與佈署
期末專案：佈署完整留言板
把 D1、登入、KV、靜態頁面收成一個專案，並用 wrangler deploy 佈署。
正在打開這一關…
學習目標
- 在本機走完註冊、登入、留言、刪除自己的留言、登出
- 說出佈署前要換掉的 id、秘密與允許來源
- 完成一次佈署，或清楚寫下卡在哪一個指令
這是期末。目標不是新名詞，是把一個月的櫃台、帳本、手環與頁面放在同一個專案裡，讓別人用網址打得開。範例在 examples/04-guestbook/。請先讓它在本機跑完，再佈署。
用生活例子理解
佈署是把店從你家廚房搬到街上。
- 食譜是 Git 裡的程式與 SQL。
- 本機試菜是
wrangler dev與--local。 - 開幕是
npx wrangler deploy。 - 保險櫃密碼用
wrangler secret put，開幕前放進去。 - 門牌是指令結束時印出的
workers.dev網址，或你自己的網域。
生活比喻：不要帶著練習用的全零資料庫編號開幕。那組編號只是廚房裡的假標籤。線上的 D1、KV、R2 要用建立指令給你的真編號。
佈署前核對：
database_id、KV 的id、R2 的bucket_name是你帳號裡的資源。- 遷移已對線上資料庫執行：
npx wrangler d1 migrations apply guestbook-db --remote。 PEPPER已用npx wrangler secret put PEPPER設定。值不要寫進檔案。- 你知道
secret put與deploy都會更新線上版本。 - 頁面與 API 同一個來源，cookie 的
Secure在https:會自動加上。
這門課的闖關網站是另一個專案，用 Pages 的 npm run build 輸出 dist。留言板不要和闖關網站混成同一個建置。兩個都可以放在 Cloudflare，但是兩種產物。
動手做
大約 40 分鐘，加上你自己除錯的時間。
cd examples/04-guestbook，閱讀README.md。npm install。- 複製
.dev.vars.example為.dev.vars，把PEPPER改成一長串只有你知道的字。 npx wrangler d1 migrations apply guestbook-db --local。npm run dev，打開終端機的網址。- 註冊一個帳號，登入，留下兩則留言。用另一個帳號登入，確認看得到留言，但刪不掉別人的（應是
403）。 - 登出後再新增，應是
401。 - 準備好 Cloudflare 帳號再佈署：建立真的 D1、KV、R2，改設定，
--remote遷移，secret put，最後npx wrangler deploy。 - 用佈署網址再走一次註冊與留言。完成後做第 4 週測驗，取得結業徽章。
沒有帳號也可以停在第 7 步。把「本機通過、尚未佈署」寫在筆記，也算你知道開幕還差哪一張清單。
案例
路由集中在 src/index.js，密碼在 src/password.js，手環在 src/session.js。核心路徑：
| 方法 | 路徑 | 誰可以 |
|---|---|---|
POST |
/api/register |
任何人，但要合規則 |
POST |
/api/login |
任何人 |
POST |
/api/logout |
有手環的人 |
GET |
/api/me |
有手環則回帳號，否則 401 |
GET |
/api/messages |
任何人 |
POST |
/api/messages |
有手環的人 |
DELETE |
/api/messages/:id |
原作者 |
POST |
/api/admin/backup |
有手環的人（作業用；正式環境應再縮小權限） |
刪除時的 SQL 帶兩個條件，避免只靠前端把按鈕藏起來：
DELETE FROM messages
WHERE id = ? AND user_id = ?;若 meta.changes 是 0，可能是沒有這則，或是別人的。先 SELECT user_id 分辨 404 與 403，範例裡就是這樣做。
靜態頁面在 public/。fetch 使用相對路徑 /api/...，所以佈署後不用改主機名稱。
常見錯誤
- 佈署了程式卻忘了
--remote遷移，線上沒有表，一寫入就 500。 - 胡椒只寫在
.dev.vars，線上env.PEPPER是空的，註冊與登入對不到。 - 用 GET 佈署或在網址上放密碼。註冊與登入維持 POST。
- 只在畫面上隱藏刪除鈕，API 卻沒檢查
user_id。 - 把闖關網站的
dist當成 Worker 的進入點。兩者的建置指令不同。
自我檢查
- 本機通過的哪一步，證明手環不是只藏在前端？
- 佈署清單裡，哪三樣絕對不能提交到 Git？
- 你的留言板網址是什麼？若還沒佈署，缺的是帳號、遷移，還是秘密？
四週到這裡。測驗通過後，地圖上的複習模式會打開，每一課都可以再讀。