# VTuber VTuber monorepo demo for live commerce (virtual streamer) workflow: - `apps/web`:Next.js 前台(商品瀏覽、直播頁、購物車) - `apps/admin`:Next.js 後台(商品、訂單、庫存) - `apps/api`:NestJS 後端 API - `packages/db`:Prisma schema 與資料庫工具 - `packages/ui`:共享 UI 元件 ## 快速開始 ```bash 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 1:Monorepo + Prisma + Seed(10 商品、20 留言) - Day 2:前台商品頁、商品頁、購物車與結帳 - Day 3:直播 Demo(左主播、右留言、下方主推) - Day 4:後台商品/訂單/庫存/作業台 - Day 5:AI 主播問答 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.example` 為 `deploy/.env.prod` 2. 填寫 `deploy/.env.prod` 3. 本機執行推版腳本: ```bash chmod +x deploy/deploy-prod.sh cp deploy/.env.prod.example deploy/.env.prod ./deploy/deploy-prod.sh ``` 若你要直接做到「推版 + 內外網可用性檢查」一次完成,可直接執行: ```bash ./scripts/deploy-and-verify-vtuber110.sh ``` 這支指令會先跑 `deploy-prod.sh`,再自動做 `/live/demo` 與 DNS/憑證健康檢查,部署完直接知道是否已恢復。 若外網 DNS 還是指到舊站,腳本會直接回傳失敗並停止,避免把錯誤版本上線。 4. 正式環境驗證: - `curl http://localhost:3000`(前台) - `curl http://localhost:3001`(後台) - `curl http://localhost:4000/api/health`(API) - `curl http://localhost:3000/live/demo`(直播頁) - `curl -ksS https://vtuber.wooo.work/live/demo`(正式網域直播頁) - `curl -ksS https://vtuber.wooo.work/zh-TW/live/demo`(正式網域繁中直播頁) 或者直接一鍵執行(包含部署驗證+兩條正式網域路徑): ```bash ./scripts/verify-live-domain-110.sh ``` 如果你要直接在正式網域驗證,請先確認反向代理已將 443/80 轉到對應服務。 ### 110 正式站快速可用性檢查 可直接執行: ```bash ./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` 已填好,再執行: ```bash ./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` 於專案下可作為參考。