BNG Booking Platform — Triển khai bản Demo

Mục tiêu: có một link demo chạy được để gửi khách. Hệ thống là frontend-only (Next.js 16, mock data, không backend/DB/secret). Ảnh là file tĩnh trong public/. → Deploy cực nhẹ. Ưu tiên Phương án A (Vercel) vì nhanh + an toàn + tự có HTTPS.

---

0. Kiểm tra trước khi deploy (bắt buộc)

cd bng-booking-demo
npm ci                 # cài đúng theo package-lock
npm run lint           # phải 0 error
npm run build          # phải "✓ Compiled successfully" + 29/29 routes

• npm run lint → 0 error, 0 warning
• npm run build → build sạch, 29 routes
• (tùy chọn) npm start rồi mở http://localhost:3000 thử nhanh trước khi đẩy lên

⚠️ Gotcha đã biết: nếu vừa chạy npm run build (production) rồi muốn npm run dev, phải rm -rf .next trước (cache turbopack xung đột). Không ảnh hưởng deploy.

---

Phương án A — Vercel (KHUYẾN NGHỊ, ~5 phút)

Next.js là sản phẩm gốc của Vercel → tự nhận diện, không cấu hình gì thêm.

A1. Qua Vercel CLI (không cần git remote)

npm i -g vercel          # hoặc: npx vercel
vercel login             # đăng nhập (email/GitHub)
vercel                   # deploy preview — trả về link https://...vercel.app
vercel --prod            # deploy production khi ưng

• Framework Preset: Next.js (tự nhận).
• Build Command: next build (mặc định) · Output: tự động · Install: npm install.
• Không cần khai báo biến môi trường (frontend-only, không secret).

A2. Qua Git (nếu muốn auto-deploy mỗi lần push)

1. Tạo repo trên GitHub, push code (project đã có .git):

   git add -A && git commit -m "demo: BNG Booking 5 portals"
   git remote add origin <github-repo-url>
   git push -u origin main
   

2. Trên vercel.com → Add New Project → import repo → Deploy. Mỗi push tạo preview URL; merge vào nhánh chính → production.

A3. Biến môi trường (tùy chọn, KHÔNG bắt buộc)

Hiện demo không cần biến nào. Nếu sau này muốn link giới thiệu CTV trỏ đúng domain thật thay vì https://bngbooking.vn mặc định:

• Thêm NEXT_PUBLIC_BASE_URL trên Vercel (Project → Settings → Environment Variables).
• Và refactor src/lib/mock/data/affiliate-portal.ts đọc process.env.NEXT_PUBLIC_BASE_URL thay vì hard-code (việc nhỏ, làm khi cần — không cần cho demo).

Tuyệt đối không đưa secret production / khóa thanh toán thật vào — demo dùng payment mock.

---

Phương án B — VPS / Docker (khi cần domain riêng, kiểm soát hạ tầng)

B1. Chạy trực tiếp bằng PM2 + Nginx

# trên VPS (Node 20+)
git clone <repo> bng-booking-demo && cd bng-booking-demo
npm ci
npm run build
pm2 start "npm start" --name bng-booking-demo   # Next mặc định cổng 3000
pm2 save

Nginx reverse proxy (thay <demo-domain> bằng domain bạn cấu hình, không hard-code trong code):

server {
  server_name <demo-domain>;
  location / {
    proxy_pass http://127.0.0.1:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

Cấp SSL: certbot --nginx -d <demo-domain>.

B2. Docker (tùy chọn, tái lập sạch)

Tạo Dockerfile (multi-stage, dùng next start):

FROM node:20-alpine AS deps
WORKDIR /app
COPY package*.json ./
RUN npm ci
FROM node:20-alpine AS build
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
RUN npm run build
FROM node:20-alpine AS run
WORKDIR /app
ENV NODE_ENV=production
COPY --from=build /app ./
EXPOSE 3000
CMD ["npm","start"]

docker build -t bng-booking-demo .
docker run -d --name bng-demo -p 3000:3000 bng-booking-demo

Tối ưu hơn: bật output: "standalone" trong next.config.ts rồi chỉ copy .next/standalone — giảm image. Không bắt buộc cho demo.

---

✅ Checklist sau deploy (mở link production, click từng mục)

Trang load được:

• / (Guest home + search bar + ảnh load)
• /search (kết quả + filter)
• /partner (dashboard + chart + KPI)
• /platform (GMV 702.900.000₫ + donut)
• /customer (dashboard khách)
• /affiliate (dashboard CTV)

Chất lượng:

• Dark mode: toggle ở header → 5 portal đều đọc tốt (charts/table/badge/legend)
• Mobile: mở trên điện thoại → sidebar thành menu, không vỡ layout, bảng cuộn ngang
• Console: F12 → Console → không có lỗi đỏ (warning React dev không xuất hiện ở production build)
• Ảnh: ảnh điểm đến/khách sạn hiển thị (file tĩnh, không phụ thuộc mạng ngoài)
• Flow đặt phòng: / → search → listing → Chọn phòng → thanh toán mock → confirmation chạy mượt

---

🔁 Rollback nếu deploy lỗi

Vercel:

• Dashboard → Project → Deployments → chọn bản chạy tốt trước đó → ⋯ → Promote to Production (rollback tức thì, không downtime).
• Hoặc CLI: vercel rollback <deployment-url>.

VPS/PM2:

• Giữ thư mục build trước đó (vd bng-booking-demo-prev). Nếu bản mới lỗi:

  pm2 stop bng-booking-demo
  cd ../bng-booking-demo-prev && pm2 restart bng-booking-demo
  

• Hoặc git checkout <commit-tốt> → npm run build → pm2 restart bng-booking-demo.

Docker:

• Giữ tag image cũ: docker run -d -p 3000:3000 bng-booking-demo:<tag-cũ>; xóa container lỗi.

---

Ghi chú

• Không backend, không DB, không auth thật, không secret → bề mặt rủi ro tối thiểu.
• Mọi hành động "thanh toán/đăng nhập/lưu" là mock (toast/điều hướng).
• next.config.ts còn remotePatterns cho picsum (di sản, không còn dùng vì ảnh đã local) — vô hại, có thể dọn sau.
• Khi gửi link khách: kèm 1 câu "Đây là bản demo, dữ liệu minh hoạ, không có giao dịch thật."