Files
vtuber/README.md

5.2 KiB
Raw Blame History

VTuber

VTuber monorepo demo for live commerce (virtual streamer) workflow:

  • apps/webNext.js 前台(商品瀏覽、直播頁、購物車)
  • apps/adminNext.js 後台(商品、訂單、庫存)
  • apps/apiNestJS 後端 API
  • packages/dbPrisma schema 與資料庫工具
  • packages/ui:共享 UI 元件

快速開始

cd VTuber
git init
npm install
npm run db:generate
npm run db:push   # 需先啟動 PostgreSQL 並設定 DATABASE_URL
npm run seed

npm run dev

常用指令

  • npm run dev:啟動 web/admin/api 開發伺服器

  • 開發與示範域名:

    • APP_DOMAIN=vtuber.wooo.work(預設生產網域)
  • npm run build:打包三個 app

  • npm run lint:執行 lint

  • npm run test:執行 API 測試(目前為 API 空殼,日後補上)

  • npm run seed:建立 demo 資料10 商品、1 直播間、20 則留言)

  • npm run db:generate:重新產生 Prisma client

  • npm run db:push:依 schema 同步 DB 結構

  • npm run db:migrate:產生 migration 檔(可選)

日誌總覽

  • Day 1Monorepo + Prisma + Seed10 商品、20 留言)
  • Day 2前台商品頁、商品頁、購物車與結帳
  • Day 3直播 Demo左主播、右留言、下方主推
  • Day 4後台商品/訂單/庫存/作業台
  • Day 5AI 主播問答 API價格、庫存、尺寸、物流
  • Day 6真人 / 虛擬直播場景與動畫 placeholder
  • Day 7部署 + 端到端流程驗證

Day 3直播 Demo

  • 開啟 /live/demo 進入直播頁(預設會讀取直播間場景流與作業資訊)
  • 左側為虛擬主播區(可替換 video/avatar
  • 右側為留言輸入與列表
  • 下方為主推商品與「立即購買」

主播角色與作業流程MVP

  • 主持人HOST直播主講、回覆問題、引導下單
  • 場控/導播PRODUCER轉場與畫面節奏控制
  • 導演DIRECTOR逐字稿節奏、回合節奏與上鏡順序控管
  • 小編/編輯EDITOR腳本文案、備稿、字幕與直播素材
  • 小助手SUPPORT留言回覆、加購/售後疑問回應
  • 倉儲WAREHOUSE實體庫存核對、出貨前置
  • 行銷MARKETING促銷節奏、優惠提醒、活動執行
  • 運維OPERATOR直播間啟關、連線監控預留

主流程(可操作):

  1. 開播前:建立直播間與角色指派,完成 3~5 個主打腳本節點與核對清單;
  2. 直播中:開播/留言互動/AI 詢問回覆;
  3. 結帳:在直播頁可直接「加入購物車」或「立即購買」建立 mock 訂單;
  4. 結束後:在後台回顧腳本勾選與清單完成度。

正式環境推版(建議 188

  1. 在正式機先放好 VTuber repo並複製 deploy/.env.prod.exampledeploy/.env.prod
  2. 填寫 deploy/.env.prod
  3. 本機執行推版腳本:
chmod +x deploy/deploy-prod.sh
cp deploy/.env.prod.example deploy/.env.prod
./deploy/deploy-prod.sh

若你要直接做到「推版 + 內外網可用性檢查」一次完成,可直接執行:

./scripts/deploy-and-verify-vtuber110.sh

這支指令會先跑 deploy-prod.sh,再自動做 /live/demo 與 DNS/憑證健康檢查,部署完直接知道是否已恢復。 若外網 DNS 還是指到舊站,腳本會直接回傳失敗並停止,避免把錯誤版本上線。

  1. 正式環境驗證:
  • curl http://localhost:3000(前台)
  • curl http://localhost:3001(後台)
  • curl http://localhost:4000/api/healthAPI
  • curl http://localhost:3000/live/demo(直播頁)
  • curl -ksS https://vtuber.wooo.work/live/demo(正式網域直播頁)
  • curl -ksS https://vtuber.wooo.work/zh-TW/live/demo(正式網域繁中直播頁)

或者直接一鍵執行(包含部署驗證+兩條正式網域路徑):

./scripts/verify-live-domain-110.sh

如果你要直接在正式網域驗證,請先確認反向代理已將 443/80 轉到對應服務。

110 正式站快速可用性檢查

可直接執行:

./scripts/check-vtuber-offline-110.sh vtuber.wooo.work 114.32.151.246

內容會回報:

  • DNS A/AAAA 解析是否指到 114.32.151.246
  • TLS 憑證 Subject / Issuer / 到期日 / SAN
  • /live/demo/zh-TW/live/demo 直連、SNI 指向、IP+Host 直走、純 IP 訪問 5 種路徑結果
  • 若回應非 200腳本會直接列為失敗404 不會再被誤判為通過)
  • 失敗項目對應的提醒(例如要檢查哪個 DNS A Record

可加上 CHECK_STRICT_MODE=1 強制回傳非 0 讓流水線判斷失敗(預設已啟用)。

110 Nginx 404 保底導回設定

如果你要直接在 110 套用 404 fallback可先確認 deploy/.env.prod 已填好,再執行:

./deploy/apply-nginx-110-live-fallback.sh

腳本行為:

  • deploy/vtuber-nginx-110-live-fallback.conf 上傳到 /etc/nginx/snippets/vtuber-nginx-110-live-fallback.conf
  • NGINX_SERVER_CONFIG(預設 /etc/nginx/sites-available/${APP_DOMAIN} 插入 snippet include
  • nginx -t 後重新載入 Nginx

環境變數

請複製根目錄 .env.example.env 並修改:

  • DATABASE_URL
  • API_PORT
  • NEXT_PUBLIC_API_BASE_URL

各 app 也保留 .env.example 於專案下可作為參考。