04-web-deployment.md

網頁部署 (Web Deployment)

AI Agent Target: Contains instructions for compiling the Flutter web target, deploying to Cloudflare Pages, and configuring proxy workers.
Human Target: 將 MockExam 應用程式網頁版部署至 Cloudflare Pages 的指南。

網頁編譯設定 (Web Build Configuration)

編譯網頁版應用程式：

flutter build web --release --dart-define=FIREBASE_API_KEY="..."

注意：請確保包含所有必要的編譯期變數。

編譯腳本 (Build Scripts)

自動化部署腳本：

• build_web.ps1: 編譯正式網頁版。
• build_web_internal.ps1: 編譯內部測試版。

Cloudflare Pages 部署

我們使用 Cloudflare Pages 來託管網頁版。

1. 安裝 Wrangler: npm install -g wrangler
2. 登入: wrangler login
3. 部署:

   wrangler pages deploy build/web --project-name mockexam-web
   

Cloudflare Worker 代理

由於瀏覽器的 CORS 限制，網頁客戶端直接連線至 MongoDB 會失敗。我們使用 Cloudflare Worker 作為代理伺服器。

在 workers/mongo-proxy/ 目錄中部署代理 worker：

wrangler deploy

網頁版特殊考量

• 無原生內購 (No Native IAP): 網頁版不支援 RevenueCat 原生計費。我們使用網頁替代方案或提示使用者使用行動應用程式。
• 瀏覽器 TTS: 文字轉語音 (TTS) 使用瀏覽器內建的 Web Speech API，在 Chrome、Firefox 和 Safari 上的發音可能不同。