網頁部署教學

註冊

打開 dash.cloudflare.com/sign-up，用工作用的 Email 註冊、設密碼。

認證

收認證信、點連結完成。登入後看到的畫面叫 Dashboard（後台），之後會常回來。

路線 A｜瀏覽器授權（最簡單，先試這個）

npx wrangler login

會自動打開瀏覽器，按 Allow 授權即可。

路線 B｜API Token（卡關時用，也是最可控的做法）

Token 就是一把「限定用途的鑰匙」：

1. Dashboard 右上角頭像 → My Profile → API Tokens → Create Token
2. 選範本 Edit Cloudflare Workers（Pages 和 Worker 部署都夠用）
3. 名稱寫用途 + 日期（例如 deploy-mjlive-20260804）、帳號只選自己的、有效期限設短一點
4. 按 Create → 畫面顯示一長串 Token，只會顯示這一次，先複製起來
5. 回終端機執行（把「貼上你的token」換掉）：

export CLOUDFLARE_API_TOKEN=貼上你的token

這行只對「目前這個終端機視窗」有效，關掉視窗鑰匙就自動失效 — 這是優點，不是缺點。

準備網頁資料夾

把要上線的檔案集中在一個資料夾，首頁檔名必須是 index.html：

檢查方式：直接雙擊 index.html 用瀏覽器開，本機看起來是對的，上線後就會是對的。

資安檢查（30 秒，不可跳過）

• 資料夾裡沒有 Excel 名單、沒有 .env、沒有任何金鑰檔
• 網頁內容沒有手機、私人 Email、地址、統編
• 確認過這個網址就是要公開的 — 放上去等於全世界看得到

幫專案取名字

專案名會直接變成網址：取 mj-super-218，網址就是 https://mj-super-218.pages.dev。

規則：只能用小寫英文、數字、連字號 -（不能有中文、空格、底線）。建議格式「品牌或課程-識別」，例如 tuo-0829-yewuli。名字全 Cloudflare 不能重複，被用走就換一個。

上鑰匙

照「00 前置準備」的路線 A 或 B。用 Token 路線的話：

export CLOUDFLARE_API_TOKEN=貼上你的token

部署（就一行）

npx wrangler pages deploy my-event-page --project-name=my-event-page --commit-dirty=true

把兩個 my-event-page 換成你的資料夾名和專案名（兩者可以不同）。第一次跑會問 Create a new project? → 按 Enter 選 Yes。

成功的樣子：最後印出 ✨ Deployment complete! 和一串網址。

驗證（別跳過，用無痕視窗）

開無痕視窗（Cmd + Shift + N）輸入網址，檢查：首頁有出來、圖片有顯示、按鈕點得動。手機也開一次 — 大部分使用者是用手機看的。

刪 Token

回 Dashboard → My Profile → API Tokens → 把剛剛那把刪掉。每次都刪，養成習慣。

寫設定檔 wrangler.jsonc

{
  // ⚠️ 這個檔會進 git，絕不可寫入任何 token / 密碼
  "name": "my-signup",
  "main": "src/index.js",
  "compatibility_date": "2025-01-01",
  "assets": { "directory": "./public", "binding": "ASSETS" },
  "d1_databases": [{
    "binding": "DB",
    "database_name": "my_signup_db",
    "database_id": "先留空，步驟 3 會拿到"
  }]
}

第一行註解不是裝飾 — 真的不要把任何密碼寫進這個檔。

先在本機測試（不用碰雲端）

cd my-signup
npx wrangler dev --local

會在 http://localhost:8787 跑起完整的本機版，連資料庫都是本機假帳本，隨便測、隨便填，跟雲端完全無關。

後台需要密碼的話，在專案夾建一個 .dev.vars 檔（本機測試專用），並確認 .gitignore 有 .dev.vars 這行：

ADMIN_KEY=本機測試用的隨便密碼

建立正式的 D1 資料庫（一次性）

先上鑰匙（Token 權限要包含 D1 Edit），然後：

npx wrangler d1 create my_signup_db

成功會回一串 database_id，把它複製、貼回 wrangler.jsonc。接著把帳本格式建到雲端（--remote 表示操作正式資料庫）：

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

設定正式站的密碼（Secret）

機密不寫在任何檔案裡，用 secret 存到 Cloudflare 後台：

npx wrangler secret put ADMIN_KEY

它會請你輸入密碼（畫面不顯示字，正常）。這個密碼只存在 Cloudflare 那端，程式裡用 env.ADMIN_KEY 讀取。

部署

cd my-signup   # 一定要先進到專案資料夾！
npx wrangler deploy

成功會印出正式網址：https://my-signup.你的帳號.workers.dev

驗證

無痕視窗開正式網址 → 實際填一筆測試報名（名字標明「測試」）→ 開後台用步驟 4 的密碼登入 → 看得到那筆資料 → 手機也開一次。

刪 Token

跟 01 一樣，每次都刪。

先把網站部署上 Pages

照 01 教學做完，拿到 https://你的專案名.pages.dev。

開通 Zero Trust（一次性）

Dashboard 左側選單找 Zero Trust → 第一次進入會請你取一個 team name（內部識別用，跟網址無關）→ 方案選 Free。

把 Pages 網站設為受保護的應用程式

Zero Trust → Access → Applications → Add an application → 類型選 Self-hosted。

Application domain（保護哪個網址）：填 你的專案名.pages.dev。

登入方式：勾 One-time PIN（Email 驗證碼）就好，不用接 Google 登入那些。

設定白名單（Policy）

Policy name 取例如 allow-team；Action 選 Allow；Include 區塊 Selector 選 Emails，填要放行的 Email 一行一個（先填自己的，確保自己進得去）→ 儲存。

驗證（兩邊都要測）

• 測擋得住：無痕視窗開網址 → 應該看到登入頁，不是網頁內容
• 測進得去：填白名單內的 Email → 收信 → 輸入驗證碼 → 看到網頁
• 測資料檔也被擋：無痕視窗直接開 .../data.js 這類路徑 → 一樣被登入頁擋下

之後要加人／移除人

Zero Trust → Access → Applications → 找到你的應用 → Policies → 編輯 → 在 Emails 加一行或刪一行 → 儲存。立即生效，網站不用重新部署。