Engineering

Cloudflare Pages 部署陷阱:5 個踩過的坑

2026 年 5 月 5 日約 9 分鐘閱讀作者:Hao0321 Studio

本站及遊戲大廳一年來累積 100+ 次部署,踩過幾個 Cloudflare Pages 文件沒寫清楚的坑。這篇給後來的人省時間。

陷阱 1:Universal SSL 只覆蓋兩層子網域

免費版 Cloudflare 的 Universal SSL 只簽 example.com + *.example.com。如果你用三層子網域(如 api.game.example.com),瀏覽器會回 ERR_SSL_VERSION_OR_CIPHER_MISMATCH。

修法:把子網域留在兩層內。本站把 api.game.hao0321.com 改成 api.hao0321.com 才解決。

陷阱 2:_headers 必須在輸出根目錄

很多人把 _headers 放在 src/public/,部署後發現 header 沒生效。

修法_headers 要在 wrangler pages deploy <dir> 那個 <dir> 的根。對 zero-build 專案是專案根、對 Vite 專案是 dist/。建構流程要把 _headers 也複製過去。

陷阱 3:Direct Upload Mode 跟 Git 不會自動同步

Pages 有兩種模式:

選 Direct Upload 後,git push 不會觸發任何 deploy。我曾經以為 push 完就上線,結果發現 production 還是舊版。

修法:寫一條 alias:

alias deploy='git push origin main && \
  wrangler pages deploy . --project-name=YOUR_PROJECT \
  --branch=main --commit-dirty=true'

陷阱 4:Preview Deployment 不會自動清除

每次 wrangler pages deploy 都產生一個 preview URL(如 https://abc123.your-project.pages.dev)。免費版這些 preview 永久保留,累積上百個之後 dashboard 載入超慢。

修法

npx wrangler pages deployment list --project-name=YOUR_PROJECT
# 找到舊的 deployment ID
npx wrangler pages deployment delete <id> --project-name=YOUR_PROJECT

或寫個 script 批次刪除超過 30 天的 preview。

陷阱 5:wrangler.toml 在子目錄會被誤抓

本站結構:

/                  ← 主站 (Pages)
/game/             ← 遊戲大廳 (另一個 Pages 專案)
/game-api/
  wrangler.toml    ← Worker 設定

wrangler pages deploy 在主站根目錄執行時,wrangler 會「向下找」找到 game-api/wrangler.toml,把它的設定當成 Pages 設定,跳出警告:

WARNING: We detected a configuration file at game-api/wrangler.toml
but it is missing the "pages_build_output_dir" field

實際上沒影響,但每次部署都看到這個警告很煩。

修法:在 Pages 部署目錄根放一個空 wrangler.toml,明確指定 pages_build_output_dir = "."

額外:CWD 陷阱(自己踩的)

用腳本自動部署時,最常見的錯誤是「CWD 不在預期位置」。例如:

# 危險寫法
cd game-api && wrangler deploy
# 然後接著
wrangler pages deploy . --project-name=hao0321-studio
# 此時 CWD 是 game-api/,部署的是 game-api/ 而不是專案根!

修法:每次 deploy 都用絕對路徑

wrangler pages deploy "/full/path/to/project" \
  --project-name=hao0321-studio --branch=main

額外:commit message UTF-8 問題

如果 git 最近一次 commit message 是中文且編碼異常,wrangler pages deploy 會回:

Invalid commit message, it must be a valid UTF-8 string. [code: 8000111]

修法:手動指定 commit message:

wrangler pages deploy . --commit-message="Manual deploy"

結語

Cloudflare Pages 90% 體驗很順,剩下 10% 是這些細節文件沒寫清楚。希望這份清單能幫到後來的人。

還有其他踩過的坑想分享,歡迎寄信 lo246179268@gmail.com