npm - botrun-horse - Versions diffs - 2.29.2 → 2.30.0 - Mend

botrun-horse 2.29.2 → 2.30.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (574) hide show

package/botrun-c/html-architecture/architecture/deployment.html ADDED Viewed

@@ -0,0 +1,664 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>部署架構圖 - 日本醫療表單系統</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <!-- 導覽列 -->
+  <nav class="nav">
+    <div class="nav-container">
+      <a href="index.html" class="nav-logo">
+        🏥 日本醫療表單系統
+      </a>
+      <ul class="nav-links">
+        <li><a href="index.html" class="nav-link">總覽</a></li>
+        <li><a href="user-flow.html" class="nav-link">使用者流程</a></li>
+        <li><a href="system-components.html" class="nav-link">系統元件</a></li>
+        <li><a href="deployment.html" class="nav-link active">部署架構</a></li>
+      </ul>
+    </div>
+  </nav>
+  <!-- 主內容 -->
+  <div class="container">
+    <!-- 頁面標題 -->
+    <div class="section fade-in">
+      <h1>🚀 部署架構圖</h1>
+      <p class="text-center" style="font-size: 1.15rem; color: var(--text-secondary);">
+        這個頁面說明系統如何部署在 Google Cloud Platform 上，包含完整的基礎設施配置
+      </p>
+    </div>
+    <!-- Google Cloud 部署架構 SVG -->
+    <div class="diagram-container fade-in">
+      <div class="diagram-title">☁️ Google Cloud Platform 部署架構</div>
+      <svg viewBox="0 0 1100 1300" xmlns="http://www.w3.org/2000/svg">
+        <!-- 定義箭頭 -->
+        <defs>
+          <marker id="arrowhead" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+            <polygon points="0 0, 10 3, 0 6" fill="#2196F3" />
+          </marker>
+          <marker id="arrowhead-green" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto">
+            <polygon points="0 0, 10 3, 0 6" fill="#4CAF50" />
+          </marker>
+          <!-- 雲端圖案 -->
+          <path id="cloud" d="M 25,60 Q 25,25 55,25 Q 60,5 80,5 Q 100,5 100,25 Q 130,25 130,55 Q 130,75 110,75 L 35,75 Q 25,75 25,60" fill="#4285F4" opacity="0.1"/>
+        </defs>
+        <!-- GCP 背景 -->
+        <rect x="50" y="50" width="1000" height="1150" rx="15" fill="#F8F9FA" stroke="#4285F4" stroke-width="3" stroke-dasharray="10,5"/>
+        <text x="550" y="90" text-anchor="middle" fill="#4285F4" font-size="24" font-weight="bold">☁️ Google Cloud Platform (GCP)</text>
+        <text x="550" y="115" text-anchor="middle" fill="#607D8B" font-size="14">專案: scoop-386004 | 區域: asia-east1 (台灣)</text>
+        <!-- 網際網路層 -->
+        <g id="internet">
+          <ellipse cx="550" cy="180" rx="120" ry="50" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
+          <text x="550" y="175" text-anchor="middle" fill="#1976D2" font-size="16" font-weight="bold">🌍 網際網路</text>
+          <text x="550" y="193" text-anchor="middle" fill="#1565C0" font-size="12">HTTPS 請求</text>
+        </g>
+        <!-- 箭頭：網際網路 → Cloud DNS -->
+        <line x1="550" y1="230" x2="550" y2="280" stroke="#2196F3" stroke-width="3" marker-end="url(#arrowhead)"/>
+        <text x="580" y="255" fill="#1976D2" font-size="12">DNS 查詢</text>
+        <!-- Cloud DNS -->
+        <g id="cloud-dns">
+          <rect x="400" y="280" width="300" height="80" rx="10" fill="#4CAF50" stroke="#388E3C" stroke-width="2"/>
+          <text x="550" y="310" text-anchor="middle" fill="white" font-size="16" font-weight="bold">🌐 Cloud DNS</text>
+          <text x="550" y="333" text-anchor="middle" fill="white" font-size="13">j.cameo.tw</text>
+          <text x="550" y="351" text-anchor="middle" fill="white" font-size="11">→ Load Balancer IP</text>
+        </g>
+        <!-- 箭頭：Cloud DNS → Load Balancer -->
+        <line x1="550" y1="360" x2="550" y2="410" stroke="#2196F3" stroke-width="3" marker-end="url(#arrowhead)"/>
+        <!-- Load Balancer -->
+        <g id="load-balancer">
+          <rect x="350" y="410" width="400" height="140" rx="10" fill="#9C27B0" stroke="#7B1FA2" stroke-width="3"/>
+          <text x="550" y="440" text-anchor="middle" fill="white" font-size="18" font-weight="bold">⚖️ Cloud Load Balancer</text>
+          <text x="550" y="463" text-anchor="middle" fill="white" font-size="13">(Global HTTPS Load Balancer)</text>
+          <!-- 路由規則 -->
+          <rect x="370" y="475" width="360" height="65" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="550" y="493" text-anchor="middle" fill="white" font-size="12" font-weight="bold">URL Map 路由規則</text>
+          <text x="550" y="509" text-anchor="middle" fill="white" font-size="10">/u/53288a47/* → botrun-j-53288a47 (Backend Service)</text>
+          <text x="550" y="524" text-anchor="middle" fill="white" font-size="10">/u/aee12461/* → botrun-j-aee12461 (Backend Service)</text>
+          <text x="550" y="539" text-anchor="middle" fill="white" font-size="10">/* → botrun-j-unified (預設)</text>
+        </g>
+        <!-- 箭頭：Load Balancer → Cloud Run -->
+        <line x1="350" y1="480" x2="200" y2="620" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <line x1="550" y1="550" x2="550" y2="620" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <line x1="750" y1="480" x2="900" y2="620" stroke="#2196F3" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <text x="250" y="540" fill="#1976D2" font-size="10">路由 A</text>
+        <text x="560" y="590" fill="#1976D2" font-size="10">路由 B</text>
+        <text x="820" y="540" fill="#1976D2" font-size="10">預設</text>
+        <!-- Cloud Run: 統一前端 -->
+        <g id="cloud-run-unified">
+          <rect x="750" y="620" width="250" height="140" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="875" y="650" text-anchor="middle" fill="white" font-size="15" font-weight="bold">🚀 Cloud Run</text>
+          <text x="875" y="670" text-anchor="middle" fill="white" font-size="13">botrun-j-unified</text>
+          <text x="875" y="688" text-anchor="middle" fill="white" font-size="11">(統一前端)</text>
+          <rect x="770" y="700" width="210" height="50" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="875" y="718" text-anchor="middle" fill="white" font-size="10">Next.js + React</text>
+          <text x="875" y="733" text-anchor="middle" fill="white" font-size="10">登入頁面 + 權限檢查</text>
+          <text x="875" y="748" text-anchor="middle" fill="white" font-size="10">⚡ 自動擴展 0-100 實例</text>
+        </g>
+        <!-- Cloud Run: 個人後端 A -->
+        <g id="cloud-run-a">
+          <rect x="80" y="620" width="250" height="140" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="205" y="650" text-anchor="middle" fill="white" font-size="15" font-weight="bold">🚀 Cloud Run</text>
+          <text x="205" y="670" text-anchor="middle" fill="white" font-size="13">botrun-j-53288a47</text>
+          <text x="205" y="688" text-anchor="middle" fill="white" font-size="11">(bohachu@gmail.com)</text>
+          <rect x="100" y="700" width="210" height="50" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="205" y="718" text-anchor="middle" fill="white" font-size="10">Hono + TypeScript</text>
+          <text x="205" y="733" text-anchor="middle" fill="white" font-size="10">表單生成 API + MCP</text>
+          <text x="205" y="748" text-anchor="middle" fill="white" font-size="10">⚡ 自動擴展 0-10 實例</text>
+        </g>
+        <!-- Cloud Run: 個人後端 B -->
+        <g id="cloud-run-b">
+          <rect x="415" y="620" width="250" height="140" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="540" y="650" text-anchor="middle" fill="white" font-size="15" font-weight="bold">🚀 Cloud Run</text>
+          <text x="540" y="670" text-anchor="middle" fill="white" font-size="13">botrun-j-aee12461</text>
+          <text x="540" y="688" text-anchor="middle" fill="white" font-size="11">(cbh@cameo.tw)</text>
+          <rect x="435" y="700" width="210" height="50" rx="6" fill="rgba(255,255,255,0.2)" stroke="white" stroke-width="1"/>
+          <text x="540" y="718" text-anchor="middle" fill="white" font-size="10">Hono + TypeScript</text>
+          <text x="540" y="733" text-anchor="middle" fill="white" font-size="10">表單生成 API + MCP</text>
+          <text x="540" y="748" text-anchor="middle" fill="white" font-size="10">⚡ 自動擴展 0-10 實例</text>
+        </g>
+        <!-- 更多實例提示 -->
+        <text x="550" y="790" text-anchor="middle" fill="#607D8B" font-size="13" font-weight="bold">... 更多 Cloud Run 實例 ...</text>
+        <text x="550" y="808" text-anchor="middle" fill="#90A4AE" font-size="10">(每位使用者一個獨立實例)</text>
+        <!-- 箭頭：Cloud Run → Firebase / Firestore / GCS -->
+        <line x1="875" y1="760" x2="875" y2="840" stroke="#4CAF50" stroke-width="2" marker-end="url(#arrowhead-green)"/>
+        <line x1="205" y1="760" x2="205" y2="900" stroke="#FF9800" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <line x1="540" y1="760" x2="540" y2="900" stroke="#FF9800" stroke-width="2" marker-end="url(#arrowhead)"/>
+        <!-- Firebase Authentication -->
+        <g id="firebase-auth">
+          <rect x="750" y="840" width="250" height="100" rx="10" fill="#4CAF50" stroke="#388E3C" stroke-width="2"/>
+          <text x="875" y="870" text-anchor="middle" fill="white" font-size="16" font-weight="bold">🔐 Firebase Authentication</text>
+          <text x="875" y="893" text-anchor="middle" fill="white" font-size="12">Google Sign-In</text>
+          <text x="875" y="910" text-anchor="middle" fill="white" font-size="11">Custom Claims 管理</text>
+          <text x="875" y="927" text-anchor="middle" fill="white" font-size="11">Token 驗證</text>
+        </g>
+        <!-- Firestore -->
+        <g id="firestore">
+          <rect x="750" y="970" width="250" height="100" rx="10" fill="#FF9800" stroke="#F57C00" stroke-width="2"/>
+          <text x="875" y="1000" text-anchor="middle" fill="white" font-size="16" font-weight="bold">📊 Firestore Database</text>
+          <text x="875" y="1023" text-anchor="middle" fill="white" font-size="12">system/allowedUsers</text>
+          <text x="875" y="1040" text-anchor="middle" fill="white" font-size="11">白名單資料</text>
+          <text x="875" y="1057" text-anchor="middle" fill="white" font-size="11">使用者權限配置</text>
+        </g>
+        <!-- GCS -->
+        <g id="gcs">
+          <rect x="80" y="900" width="585" height="100" rx="10" fill="#2196F3" stroke="#1976D2" stroke-width="2"/>
+          <text x="372" y="930" text-anchor="middle" fill="white" font-size="16" font-weight="bold">💾 Google Cloud Storage (GCS)</text>
+          <text x="372" y="953" text-anchor="middle" fill="white" font-size="12">Bucket: scoop-temp-forms-jp</text>
+          <text x="372" y="970" text-anchor="middle" fill="white" font-size="11">暫存生成的 HTML 表單</text>
+          <text x="372" y="987" text-anchor="middle" fill="white" font-size="11">⏱️ 3 小時後自動刪除 (Lifecycle Policy)</text>
+        </g>
+        <!-- 部署工具層 -->
+        <g id="deployment-tools">
+          <rect x="80" y="1100" width="920" height="80" rx="10" fill="#E3F2FD" stroke="#2196F3" stroke-width="2"/>
+          <text x="540" y="1130" text-anchor="middle" fill="#1976D2" font-size="16" font-weight="bold">🛠️ 部署工具與腳本</text>
+          <rect x="100" y="1145" width="180" height="25" rx="4" fill="#2196F3" stroke="#1976D2" stroke-width="1"/>
+          <text x="190" y="1162" text-anchor="middle" fill="white" font-size="11">sh/deploy.sh (統一前端)</text>
+          <rect x="300" y="1145" width="180" height="25" rx="4" fill="#2196F3" stroke="#1976D2" stroke-width="1"/>
+          <text x="390" y="1162" text-anchor="middle" fill="white" font-size="11">sh/deploy.sh (個人後端)</text>
+          <rect x="500" y="1145" width="180" height="25" rx="4" fill="#4CAF50" stroke="#388E3C" stroke-width="1"/>
+          <text x="590" y="1162" text-anchor="middle" fill="white" font-size="11">sh/lb.sh (Load Balancer)</text>
+          <rect x="700" y="1145" width="180" height="25" rx="4" fill="#FF9800" stroke="#F57C00" stroke-width="1"/>
+          <text x="790" y="1162" text-anchor="middle" fill="white" font-size="11">sh/users.sh (使用者管理)</text>
+        </g>
+        <!-- 圖例 -->
+        <g id="legend">
+          <text x="100" y="1230" fill="#607D8B" font-size="13" font-weight="bold">圖例：</text>
+          <rect x="100" y="1240" width="20" height="20" fill="#2196F3" stroke="#1976D2" stroke-width="1"/>
+          <text x="130" y="1255" fill="#607D8B" font-size="11">Cloud Run 服務</text>
+          <rect x="250" y="1240" width="20" height="20" fill="#4CAF50" stroke="#388E3C" stroke-width="1"/>
+          <text x="280" y="1255" fill="#607D8B" font-size="11">認證服務</text>
+          <rect x="400" y="1240" width="20" height="20" fill="#FF9800" stroke="#F57C00" stroke-width="1"/>
+          <text x="430" y="1255" fill="#607D8B" font-size="11">資料庫/儲存</text>
+          <rect x="550" y="1240" width="20" height="20" fill="#9C27B0" stroke="#7B1FA2" stroke-width="1"/>
+          <text x="580" y="1255" fill="#607D8B" font-size="11">負載平衡</text>
+        </g>
+      </svg>
+    </div>
+    <!-- 部署流程 -->
+    <div class="section fade-in">
+      <h2>🚀 部署流程說明</h2>
+      <div class="steps">
+        <div class="step">
+          <div class="step-number">1</div>
+          <div class="step-content">
+            <div class="step-title">部署統一前端</div>
+            <div class="step-description">
+              首先部署統一前端服務，提供登入頁面和權限檢查功能：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 編譯前端並部署到 Cloud Run</span>
+sh/deploy.sh
+<span style="color: var(--text-secondary);"># 部署後會得到：</span>
+Service Name: botrun-j-unified
+Service URL: https://botrun-j-unified-xxx.run.app
+</pre>
+              ⏱️ 約 7-10 分鐘（首次部署）
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">2</div>
+          <div class="step-content">
+            <div class="step-title">設定 Load Balancer</div>
+            <div class="step-description">
+              設定 Google Cloud Load Balancer，提供統一域名 (j.cameo.tw)：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 初始化 Load Balancer（首次執行）</span>
+sh/lb.sh --init
+<span style="color: var(--text-secondary);"># 互動式設定：</span>
+1. 輸入統一前端 Service Name (botrun-j-unified)
+2. 輸入域名 (j.cameo.tw)
+3. 等待 SSL 憑證 PROVISIONING (約 15 分鐘)
+</pre>
+              ⏱️ 約 15-20 分鐘（SSL 憑證生成）
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">3</div>
+          <div class="step-content">
+            <div class="step-title">新增使用者並部署個人後端</div>
+            <div class="step-description">
+              為每位使用者部署獨立的後端服務：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 1. 新增使用者到白名單</span>
+sh/users.sh add bohachu@gmail.com
+<span style="color: var(--text-secondary);"># 2. 部署個人後端</span>
+sh/deploy.sh bohachu@gmail.com
+<span style="color: var(--text-secondary);"># 3. 更新 Load Balancer 路由規則</span>
+sh/lb.sh setup
+</pre>
+              ⏱️ 約 8-10 分鐘（每位使用者）
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">4</div>
+          <div class="step-content">
+            <div class="step-title">設定 Custom Claims</div>
+            <div class="step-description">
+              設定 Firebase Custom Claims，授予使用者存取權限：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 批次設定所有使用者的 Custom Claims</span>
+npx tsx api/src/setup-custom-claims.ts --batch
+<span style="color: var(--text-secondary);"># 驗證設定</span>
+node api/list-users.mjs
+</pre>
+              ⚠️ <strong>注意：</strong>使用者需要先登入一次，Firebase 才會建立帳號記錄。
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">5</div>
+          <div class="step-content">
+            <div class="step-title">更新 Firebase 授權域名</div>
+            <div class="step-description">
+              每次部署新服務後，需要更新 Firebase Authentication 的授權域名：
+              <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 自動同步所有 Cloud Run 域名到 Firebase</span>
+sh/users.sh domains-sync
+<span style="color: var(--text-secondary);"># 驗證授權域名列表</span>
+sh/users.sh domains-list
+</pre>
+              否則會出現 <code style="color: var(--error);">auth/unauthorized-domain</code> 錯誤。
+            </div>
+          </div>
+        </div>
+        <div class="step">
+          <div class="step-number">6</div>
+          <div class="step-content">
+            <div class="step-title">驗證部署</div>
+            <div class="step-description">
+              完成部署後，進行驗證測試：
+              <ul style="padding-left: 1.5rem; margin-top: 0.5rem;">
+                <li>✅ 造訪 <code>j.cameo.tw</code> 確認 HTTPS 正常</li>
+                <li>✅ 使用 Google 帳號登入</li>
+                <li>✅ 檢查是否正確重定向到個人後端 (<code>/u/{hash}/</code>)</li>
+                <li>✅ 測試生成表單功能</li>
+                <li>✅ 檢查瀏覽器 Console 的版本號</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- GCP 資源清單 -->
+    <div class="section fade-in">
+      <h2>📦 Google Cloud Platform 資源清單</h2>
+      <div class="grid">
+        <!-- Cloud Run -->
+        <div class="card">
+          <div class="badge badge-primary">運算資源</div>
+          <h3 class="card-title">Cloud Run</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li><code>botrun-j-unified</code> - 統一前端</li>
+            <li><code>botrun-j-53288a47</code> - 個人後端 (bohachu)</li>
+            <li><code>botrun-j-aee12461</code> - 個人後端 (cbh)</li>
+            <li>... 更多個人後端</li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>區域：</strong>asia-east1 (台灣)<br>
+            <strong>擴展：</strong>0-100 實例（自動）<br>
+            <strong>費用：</strong>按使用量計費
+          </p>
+        </div>
+        <!-- Load Balancer -->
+        <div class="card">
+          <div class="badge badge-accent">網路資源</div>
+          <h3 class="card-title">Load Balancer</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li>Global HTTPS Load Balancer</li>
+            <li>SSL Certificate (j.cameo.tw)</li>
+            <li>Backend Services (多個)</li>
+            <li>URL Map (路由規則)</li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>類型：</strong>Global (全球)<br>
+            <strong>SSL：</strong>自動管理憑證<br>
+            <strong>費用：</strong>約 $18/月 + 流量費
+          </p>
+        </div>
+        <!-- Cloud Storage -->
+        <div class="card">
+          <div class="badge badge-primary">儲存資源</div>
+          <h3 class="card-title">Cloud Storage</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li><code>scoop-temp-forms-jp</code> - 表單暫存</li>
+            <li>Lifecycle Policy (3 小時自動刪除)</li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>區域：</strong>asia-east1 (台灣)<br>
+            <strong>類別：</strong>Standard Storage<br>
+            <strong>費用：</strong>約 $0.02/GB/月
+          </p>
+        </div>
+        <!-- Firebase -->
+        <div class="card">
+          <div class="badge badge-secondary">認證 & 資料庫</div>
+          <h3 class="card-title">Firebase</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li>Firebase Authentication</li>
+            <li>Firestore Database</li>
+            <li>集合：<code>system/allowedUsers</code></li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>專案：</strong>scoop-386004<br>
+            <strong>區域：</strong>Multi-region<br>
+            <strong>費用：</strong>免費額度內
+          </p>
+        </div>
+        <!-- Cloud DNS -->
+        <div class="card">
+          <div class="badge badge-accent">DNS 服務</div>
+          <h3 class="card-title">Cloud DNS</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li>Zone: cameo.tw</li>
+            <li>記錄：j.cameo.tw → Load Balancer IP</li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>類型：</strong>A Record<br>
+            <strong>TTL：</strong>300 秒<br>
+            <strong>費用：</strong>約 $0.2/月
+          </p>
+        </div>
+        <!-- Service Accounts -->
+        <div class="card">
+          <div class="badge badge-secondary">權限管理</div>
+          <h3 class="card-title">Service Accounts</h3>
+          <ul style="padding-left: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.5rem;">
+            <li><code>botrun-j-bohachu-gmail-com</code></li>
+            <li><code>botrun-j-cbh-cameo-tw</code></li>
+            <li>... 更多 Service Accounts</li>
+          </ul>
+          <p style="margin-top: 0.5rem; color: var(--text-secondary); font-size: 0.9rem;">
+            <strong>角色：</strong>Storage Object Admin<br>
+            <strong>用途：</strong>GCS 存取權限<br>
+            <strong>費用：</strong>免費
+          </p>
+        </div>
+      </div>
+    </div>
+    <!-- 成本估算 -->
+    <div class="highlight-box fade-in">
+      <h2>💰 每月成本估算</h2>
+      <div class="grid-2">
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">固定成本</h3>
+          <ul style="color: rgba(255, 255, 255, 0.95); padding-left: 1.5rem;">
+            <li>Load Balancer: <strong>$18/月</strong></li>
+            <li>Cloud DNS: <strong>$0.2/月</strong></li>
+            <li>SSL Certificate: <strong>$0</strong> (免費)</li>
+            <li><strong>小計: 約 $18.2/月</strong></li>
+          </ul>
+        </div>
+        <div>
+          <h3 style="color: white; margin-bottom: 1rem;">變動成本（按使用量）</h3>
+          <ul style="color: rgba(255, 255, 255, 0.95); padding-left: 1.5rem;">
+            <li>Cloud Run: 閒置時 <strong>$0</strong></li>
+            <li>GCS 儲存: <strong>$0.02/GB/月</strong></li>
+            <li>網路流量: <strong>$0.12/GB</strong> (亞洲出站)</li>
+            <li>Firestore: 免費額度內通常 <strong>$0</strong></li>
+          </ul>
+        </div>
+      </div>
+      <p style="color: white; text-align: center; margin-top: 1.5rem; font-size: 1.1rem;">
+        💡 <strong>估算：</strong>一般使用情況下，每月總成本約 <span style="font-size: 1.3rem; font-weight: bold;">台幣 $600-800</span>
+      </p>
+    </div>
+    <!-- 部署腳本說明 -->
+    <div class="section fade-in">
+      <h2>🛠️ 部署腳本詳細說明</h2>
+      <div class="grid">
+        <div class="card">
+          <div class="badge badge-primary">統一前端</div>
+          <h3 class="card-title">sh/deploy.sh</h3>
+          <p class="card-text">
+            部署統一前端服務到 Cloud Run。
+          </p>
+          <pre style="background: var(--bg-main); padding: 0.75rem; border-radius: 4px; font-size: 0.85rem; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 執行部署</span>
+sh/deploy.sh
+<span style="color: var(--text-secondary);"># 自動執行：</span>
+1. 編譯 Next.js 前端
+2. 編譯 TypeScript 後端
+3. 建立 Docker 映像檔
+4. 推送到 Artifact Registry
+5. 部署到 Cloud Run
+6. 更新 Firestore serviceUrl
+</pre>
+        </div>
+        <div class="card">
+          <div class="badge badge-primary">個人後端</div>
+          <h3 class="card-title">sh/deploy.sh</h3>
+          <p class="card-text">
+            為單一使用者部署個人後端服務。
+          </p>
+          <pre style="background: var(--bg-main); padding: 0.75rem; border-radius: 4px; font-size: 0.85rem; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 部署個人後端</span>
+sh/deploy.sh user@example.com
+<span style="color: var(--text-secondary);"># 自動執行：</span>
+1. 計算 user email hash
+2. 建立 Service Name
+3. 編譯並部署到 Cloud Run
+4. 更新 Firestore serviceUrl
+5. 顯示部署結果
+</pre>
+        </div>
+        <div class="card">
+          <div class="badge badge-secondary">負載平衡</div>
+          <h3 class="card-title">sh/lb.sh</h3>
+          <p class="card-text">
+            管理 Load Balancer 配置。
+          </p>
+          <pre style="background: var(--bg-main); padding: 0.75rem; border-radius: 4px; font-size: 0.85rem; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 初始化 (首次執行)</span>
+sh/lb.sh --init
+<span style="color: var(--text-secondary);"># 更新路由規則</span>
+sh/lb.sh setup
+<span style="color: var(--text-secondary);"># 檢查狀態</span>
+sh/lb.sh status
+</pre>
+        </div>
+        <div class="card">
+          <div class="badge badge-accent">使用者管理</div>
+          <h3 class="card-title">sh/users.sh</h3>
+          <p class="card-text">
+            統一的使用者管理工具。
+          </p>
+          <pre style="background: var(--bg-main); padding: 0.75rem; border-radius: 4px; font-size: 0.85rem; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 新增使用者</span>
+sh/users.sh add user@example.com
+<span style="color: var(--text-secondary);"># 計算 hash</span>
+sh/users.sh hash user@example.com
+<span style="color: var(--text-secondary);"># 同步域名</span>
+sh/users.sh domains-sync
+</pre>
+        </div>
+      </div>
+    </div>
+    <!-- 智慧編譯 -->
+    <div class="section fade-in">
+      <h2>⚡ 智慧編譯與快速部署</h2>
+      <p style="margin-bottom: var(--space-md);">
+        系統支援 Git Diff 自動檢測，根據變更範圍選擇最佳編譯策略，大幅加快部署速度：
+      </p>
+      <div class="grid-3">
+        <div class="card">
+          <div class="badge badge-secondary">策略 1</div>
+          <h3 class="card-title">僅前端變更</h3>
+          <p class="card-text">
+            只編譯 Next.js 前端，跳過後端編譯。
+          </p>
+          <p style="margin-top: 0.5rem; color: var(--secondary); font-weight: bold;">
+            ⚡ 1.5 分鐘（加速 70%）
+          </p>
+        </div>
+        <div class="card">
+          <div class="badge badge-accent">策略 2</div>
+          <h3 class="card-title">僅後端變更</h3>
+          <p class="card-text">
+            只編譯 TypeScript 後端，使用前端快取。
+          </p>
+          <p style="margin-top: 0.5rem; color: var(--accent); font-weight: bold;">
+            ⚡ 2 分鐘（加速 60%）
+          </p>
+        </div>
+        <div class="card">
+          <div class="badge badge-primary">策略 3</div>
+          <h3 class="card-title">全部編譯</h3>
+          <p class="card-text">
+            前後端都有變更，或修改 package.json。
+          </p>
+          <p style="margin-top: 0.5rem; color: var(--primary); font-weight: bold;">
+            🔧 7 分鐘（完整編譯）
+          </p>
+        </div>
+      </div>
+      <p style="margin-top: var(--space-md); color: var(--text-secondary);">
+        💡 <strong>測試工具：</strong>執行 <code>sh/test-smart-build.sh</code> 可查看當前變更會觸發哪種策略。
+      </p>
+    </div>
+    <!-- 常見問題 -->
+    <div class="section fade-in">
+      <h2>❓ 部署常見問題</h2>
+      <div class="card mb-md">
+        <h3 class="card-title">Q: 部署失敗，出現 "permission denied" 錯誤？</h3>
+        <p class="card-text">
+          <strong>可能原因：</strong>
+        </p>
+        <ul style="padding-left: 1.5rem; color: var(--text-secondary);">
+          <li>Service Account 權限不足 → 確認 IAM 設定</li>
+          <li>未登入 gcloud → 執行 <code>gcloud auth login</code></li>
+          <li>專案 ID 錯誤 → 檢查 <code>gcloud config get-value project</code></li>
+        </ul>
+      </div>
+      <div class="card mb-md">
+        <h3 class="card-title">Q: SSL 憑證一直顯示 "PROVISIONING"？</h3>
+        <p class="card-text">
+          <strong>可能原因：</strong>
+        </p>
+        <ul style="padding-left: 1.5rem; color: var(--text-secondary);">
+          <li>DNS 記錄未生效 → 等待 DNS 傳播（最多 48 小時，通常 5-15 分鐘）</li>
+          <li>DNS 指向錯誤 IP → 檢查 A Record 是否指向 Load Balancer IP</li>
+          <li>Google 驗證中 → 耐心等待 15-30 分鐘</li>
+        </ul>
+      </div>
+      <div class="card">
+        <h3 class="card-title">Q: 登入後出現 "auth/unauthorized-domain" 錯誤？</h3>
+        <p class="card-text">
+          <strong>解決方法：</strong>
+        </p>
+        <pre style="background: var(--bg-main); padding: 1rem; border-radius: 6px; margin-top: 0.5rem; overflow-x: auto;">
+<span style="color: var(--text-secondary);"># 自動同步所有域名到 Firebase</span>
+sh/users.sh domains-sync
+<span style="color: var(--text-secondary);"># 或手動新增單一域名</span>
+sh/users.sh domains-add botrun-j-xxx.run.app
+</pre>
+      </div>
+    </div>
+    <!-- 頁尾導覽 -->
+    <div class="section text-center fade-in">
+      <p style="font-size: 1.1rem; margin-bottom: var(--space-md);">
+        🎉 恭喜！你已經完整了解系統的部署架構
+      </p>
+      <div style="display: flex; gap: var(--space-sm); justify-content: center; flex-wrap: wrap;">
+        <a href="user-flow.html" class="btn btn-primary">查看使用者流程圖 →</a>
+        <a href="system-components.html" class="btn btn-secondary">查看系統元件圖 →</a>
+        <a href="index.html" class="btn btn-outline">返回總覽</a>
+      </div>
+    </div>
+  </div>
+  <script>
+    // 頁面淡入效果
+    document.addEventListener('DOMContentLoaded', () => {
+      const fadeElements = document.querySelectorAll('.fade-in');
+      fadeElements.forEach((el, index) => {
+        el.style.opacity = '0';
+        setTimeout(() => {
+          el.style.transition = 'opacity 0.6s ease-out';
+          el.style.opacity = '1';
+        }, index * 100);
+      });
+    });
+  </script>
+</body>
+</html>