149 lines
5.2 KiB
Markdown
149 lines
5.2 KiB
Markdown
# 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` 於專案下可作為參考。
|