DU LỊCH EA SÚP: BẢN SẮC, DẤU ẤN ĐẠI NGÀN
Trang này được thiết kế chuyên biệt để bạn kiểm tra trực quan toàn bộ các trang chức năng, chạy thử nghiệm các API Backend, xác thực tiêu chí thiết kế di sản và sao chép kịch bản dòng lệnh triển khai lên Termius.
Kiểm Tra Trực Quan Các Trang Chức Năng
Trang Chủ Công Cộng
Hero di sản, Bento Grid bất đối xứng, Mini Audio Player & Bản đồ GIS Leaflet.
Chi Tiết Tháp Yang PRông
Tạp chí di sản, Audio Player Bar, mô phỏng quét mã QR thực địa, cẩm nang du khách.
Chi Tiết Hồ Ea Súp Thượng
Mặt hồ mênh mông, tọa độ địa chính, ẩm thực cá bống kho nghệ & form gửi cảm nhận.
Ban Quản Trị CMS
Quản lý danh sách, ghim trang chủ, bản đồ chấm GPS trực quan, kéo-thả nén ảnh WebP.
Chạy Thử Nghiệm API Handlers Trực Tiếp (Live API Tester)
Bấm vào các nút bên dưới để gửi request đến hệ thống Backend Next.js và xem kết quả JSON trả về
// Bấm một trong các nút phía trên để kiểm tra phản hồi API thực tế
Danh Mục Nghiệm Thu Kỹ Thuật (Pre-flight Checklist)
1. Kiến Trúc & Build Next.js 15 Standalone
Next.js 15.1 + App Router + TypeScript 5.7
100% Type-safe, phân tách Server Components & Client Components.
Cấu hình output: "standalone"
Trong next.config.js để xuất gói chạy tối giản cho Docker không cần node_modules nặng.
Biên dịch kiểm thử sản phẩm (npm run build)
Toàn bộ 11 routes tĩnh và động đã build hoàn tất không lỗi (Exit code 0).
2. Chuẩn Thiết Kế Di Sản Taste-Skill Anti-Slop
Bộ 3 Khóa Bất Biến (The 3 Locks)
Màu be kem #FBF9F5, chữ than chì #1C1917, xanh rêu #0066CC & bazan #A64B2A. Không neon/AI gradients.
Hero Discipline
Tiêu đề <= 2 dòng Noto Serif, dẫn nhập < 20 từ, tra cứu & bản đồ trong màn hình đầu, navbar < 80px.
Bố cục Asymmetrical Bento Grid (Anti-Slop)
Thẻ chính 7 cột Tháp Yang PRông tích hợp Mini Audio Player + 3 thẻ vệ tinh chuyên đề.
Bản đồ Du lịch GIS Leaflet.js
Custom SVG Pin di sản, Popup định vị địa lý, nút chỉ đường Google Maps trực tiếp.
3. Cơ Sở Dữ Liệu & API Handlers
PostgreSQL 16 & Prisma ORM
Schema đầy đủ User, Category, Destination, Review, ItineraryItem với tọa độ GPS và audio.
Cơ chế Resilient Fallback
Fallback mượt mà sang dữ liệu mẫu khi chưa kết nối Postgres, không làm đứt gãy trải nghiệm.
API Upload & Tự động nén WebP bằng Sharp
Tự động giảm tải dung lượng ảnh xuống WebP chất lượng cao 82% trước khi lưu trữ.
Phân quyền RBAC & JWT Authentication
Bảo mật các endpoint chỉnh sửa, thêm mới, xóa điểm đến cho EDITOR và ADMIN.
4. Đóng Gói Docker & An Toàn Bảo Mật
Dockerfile Multi-stage & Non-root User
Mô hình deps -> builder -> runner trên nền node:20-alpine an toàn, user nextjs uid 1001.
docker-compose.yml Cách Ly Cổng 5432
Postgres chạy trong mạng nội bộ app_net, tuyệt đối không expose cổng 5432 ra Internet.
Nginx Reverse Proxy & Dozzle
Cấu hình gzip, cache static headers và trình xem log container tại cổng 8888.
Bitwarden Security Vault Guideline
Khóa 32 ký tự ngẫu nhiên cho DB_PASSWORD và AUTH_SECRET lưu trữ an toàn trong Secure Note.
Kịch Bản Khởi Động Hệ Thống Một Chạm (1-Touch Command)
# 1. Kết nối SSH Termius vào VPS sudo apt update && sudo apt install -y git docker.io docker-compose-plugin # 2. Kéo mã nguồn về VPS git clone https://github.com/<YOUR_USER>/danh-thang-ky.git /opt/danhthangky cd /opt/danhthangky # 3. Tạo file cấu hình môi trường từ Bitwarden cp .env.example .env nano .env # 4. KHỞI CHẠY HỆ THỐNG MỘT CHẠM docker compose up -d --build && docker compose exec web npx prisma db push && docker compose exec web npm run db:seed
ENV_HE_THONG_EASUPSO.[email protected] / AdminEaSup@2025!