Skip to content

README.md

Latest commit

 

History

History
151 lines (106 loc) · 5.02 KB

README.md

File metadata and controls

151 lines (106 loc) · 5.02 KB

Vue SSR on Cloudflare Workers

這個專案使用 Hono + Vue 3 在 Cloudflare Workers 上進行 SSR，沒有 App.vue、沒有 vue-router，每個頁面獨立維護於 src/views。

檔案結構

  • src/views/*.vue：頁面來源。
  • scripts/build-views.ts：將 .vue 轉成 Worker 可用的 SSR 元件，輸出到 src/.generated/views。
  • scripts/build-assets.ts：將 public/ 靜態資源複製到 www/（給 ASSETS 使用）。
  • scripts/build-search-index.ts：建置搜尋基線索引、manifest 與 www/stats.json，並同步到 R2（部署前需執行，見「部署」一節）。
  • src/index.ts：Hono Worker，直接渲染各頁。

開發

bun install
bun run dev

本專案 package manager 統一用 bun（lockfile 為 bun.lock）；唯一例外是 wrangler 仍走 npx wrangler …，因為 bun runtime 已知會讓 wrangler deploy 在 async upload 完成前提早 exit。

bun run dev 會先把 .vue 編譯到 src/.generated/views，再啟動 wrangler dev。修改 .vue 後需重跑一次 bun run dev 或單獨執行 bun run build:views 讓編譯檔更新。

清理快取(暫時)

  1. 到dashboard。
  2. 手動清理。

清理快取(未來)

  1. 用TOKEN證明下指令者是管理員
  2. 用API清理

API 測試清單

  • 取得演講目錄表 > http://localhost:8787/api/speech_index.json
  • 取得講者列表 > http://localhost:8787/api/speakers_index.json
  • 取得單一講者詳情 > http://localhost:8787/api/speaker_detail/{route_pathname}.json
    • http://localhost:8787/api/speaker_detail/%E5%94%90%E9%B3%B3-3.json
  • 取得單一演講全文 > http://localhost:8787/api/speech/{filename}
    • http://localhost:8787/api/speech/2025-11-10-柏林自由會議ai-的角色
  • 取得指定段落詳情 > http://localhost:8787/api/section/{section_id}
    • http://localhost:8787/api/section/628198
  • 取得原始 .an 檔（支援 GET/HEAD）> http://localhost:8787/api/an/{path}.an
    • http://localhost:8787/api/an/2025-11-10-柏林自由會議ai-的角色.an

靜態資源建置

bun run build:assets

會把 public/ 同步到 www/。若要近端預覽靜態檔：

bun run preview:assets

（等同 python3 -m http.server 4173 -d www）

SSR 路由注意事項

  • 所有頁面皆為 SSR 路由，並搭配 R2/Edge 快取。
  • 部署或開發前，仍需先執行 bun run build:views 生成 src/.generated/views 供 Worker 匯入。

部署

bun run deploy 預設已包含搜尋索引建置；若只想單獨重建搜尋資料，也可直接執行 bun run build:search。

搜尋索引建置（build:search）

bun run build:search
  • 產出：scripts/build-search-index.ts 會產生壓縮後的搜尋基線索引、即時 overlay manifest、以及首頁統計用的 www/stats.json。大型搜尋索引會上傳到 R2，部署時不直接塞進 ASSETS。
  • 特性：建置腳本會保留本地快取供下次增量建置使用，並重新抓取變動過的 speeches，避免沿用過期 dump。

一鍵完成搜尋建置＋部署：

bun run deploy

等同 bun run build:views && bun run build:assets && bun run build:search && npx wrangler deploy。

只更新 Worker / ASSETS

bun run deploy:assets

只重建視圖與靜態資源，不重建搜尋索引；適合純版面或資產更新。

先建置資源再部署 Worker（ASSETS）

若要在遠端或本地先跑完 build:assets 後，再像 bun run deploy 一樣更新 Worker 與 ASSETS：

bun run deploy:assets

等同 bun run build:assets && npx wrangler deploy：先產出 www/，再一併上傳 Worker 與靜態資源。CI 上可依序執行 build:assets 與 npx wrangler deploy 達到相同效果。

資料庫與儲存

D1 資料庫

D1 資料庫用於儲存演講的索引資訊與講者資料，包含以下資料表：

speech_index

儲存演講檔案的基本索引資訊。

欄位 類型 說明
id INTEGER 主鍵
filename TEXT 檔案名稱
speakers TEXT 講者資訊

speakers

儲存講者的詳細資訊。

欄位 類型 說明
id INTEGER 主鍵
name TEXT 講者名稱
photoURL TEXT 講者照片 URL
speeches INTEGER 演講數量（預設 0）
longest_speech INTEGER 最長演講時長（預設 0）

speech_content

儲存演講內容的分段資料。

欄位 類型 說明
filename TEXT 檔案名稱
section_id INTEGER 段落 ID（主鍵）
section_speaker TEXT 段落講者
section_content TEXT 段落內容

初始化 SQL 檔案位於 sql/ 目錄下：

  • sql/init-speech_index.sql
  • sql/init-speakers.sql
  • sql/init-speech_content.sql

GitHub Actions 整合

後端支援透過 GitHub Actions 進行自動化操作。需要以下認證：

  • Authorization: Bearer {token} header
  • X-GitHub-Repository: {repo} header

允許的儲存庫：

  • audreyt/transcript
  • bestian/transcript