部署到 Cloudflare Pages

Cloudflare Pages 提供快速、全球化且頻寬無上限的靜態網站託管。

快速部署

1. 前往 Cloudflare Pages
2. 點選「Create a project」
3. 連結您的 GitHub 儲存庫

建置設定

設定項目	值
Framework preset	None
Build command	npm run build
Build output directory	dist
Root directory	/

環境變數

在 Settings → Environment variables 中加入以下項目：

變數	值
NODE_VERSION	18
SIMPLE_MODE	false（選填）
VITE_BRAND_NAME	自訂品牌名稱（選填）
VITE_BRAND_LOGO	相對於 public/ 的標誌路徑（選填）
VITE_FOOTER_TEXT	自訂頁尾/版權文字（選填）
VITE_DEFAULT_LANGUAGE	預設介面語言，例如 fr（選填）

設定檔

在您的 public 資料夾中建立 _headers：

# Required security headers for SharedArrayBuffer (used by LibreOffice WASM)
/*
  Cross-Origin-Embedder-Policy: require-corp
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Resource-Policy: cross-origin

# Pre-compressed LibreOffice WASM binary
/libreoffice-wasm/soffice.wasm.gz
  Content-Type: application/wasm
  Content-Encoding: gzip
  Cache-Control: public, max-age=31536000, immutable

# Pre-compressed LibreOffice WASM data
/libreoffice-wasm/soffice.data.gz
  Content-Type: application/octet-stream
  Content-Encoding: gzip
  Cache-Control: public, max-age=31536000, immutable

# Cache WASM files aggressively
/*.wasm
  Cache-Control: public, max-age=31536000, immutable
  Content-Type: application/wasm

# Service worker
/sw.js
  Cache-Control: no-cache

重要

Word/ODT/Excel/PowerPoint 轉 PDF 需要 Cross-Origin-Embedder-Policy 與 Cross-Origin-Opener-Policy 標頭。缺少它們時，SharedArrayBuffer 將無法使用，LibreOffice WASM 引擎會初始化失敗。

為 SPA 路由建立 _redirects：

/*    /index.html   200

自訂網域

1. 前往您的 Pages 專案
2. 點選「Custom domains」
3. 加入您的網域
4. 若網域位於 Cloudflare 上，Cloudflare 會自動設定 DNS

優點

• 免費且無上限的頻寬
• 全球 CDN，擁有 300 個以上的邊緣節點
• 自動 HTTPS
• 針對 pull request 的預覽部署
• 快速建置

疑難排解

大型檔案上傳

Cloudflare Pages 支援最大 25 MB 的檔案。WASM 模組應該沒問題，但若遇到限制，可以考慮：

# Split large files during build
npm run build

Worker 大小限制

若使用 Cloudflare Workers 進行進階路由，請注意免費方案有 1 MB 的限制。

CORS 代理 Worker（用於數位簽章）

數位簽章工具需要 CORS 代理來擷取憑證鏈。請部署內附的 worker：

cd cloudflare
npx wrangler login
npx wrangler deploy

安全功能

功能	說明
URL 限制	僅允許憑證 URL
檔案大小限制	每個請求最大 10MB
速率限制	每 IP 每分鐘 60 次（需要 KV）
私人 IP 封鎖	封鎖 localhost 與內部 IP

啟用速率限制

# Create KV namespace
npx wrangler kv namespace create "RATE_LIMIT_KV"

# Add to wrangler.toml with returned ID:
# [[kv_namespaces]]
# binding = "RATE_LIMIT_KV"
# id = "YOUR_ID"

npx wrangler deploy

以代理 URL 建置

VITE_CORS_PROXY_URL=https://your-worker.workers.dev npm run build

或使用 Docker：

export VITE_CORS_PROXY_URL="https://your-worker.workers.dev"
DOCKER_BUILDKIT=1 docker build \
  --secret id=VITE_CORS_PROXY_URL,env=VITE_CORS_PROXY_URL \
  -t your-bentopdf .

注意： HMAC 簽章設定請參閱 README。