Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0835phút ước tínhThực chiến · Builder

8. Dự Án Tốt Nghiệp: Triển Khai Production 1-Click Lên Vercel & Trỏ Tên Miền Riêng

Đóng gói toàn bộ ứng dụng Full-Stack, thiết lập CI/CD tự động trên Vercel, trỏ tên miền riêng SSL miễn phí và bàn giao sản phẩm chạy thật.

🚀 3 Bước Triển Khai Lên Vercel Production

Liên kết GitHub: Đẩy toàn bộ mã nguồn lên kho lưu trữ riêng tư.
Cấu hình Environment Variables: Khai báo VITE_SUPABASE_URL và VITE_SUPABASE_ANON_KEY trên Dashboard Vercel.
Gắn Tên Miền Riêng: Cấu hình bản ghi CNAME/A Record tại nhà cung cấp tên miền trỏ về Vercel DNS.

 example.py
# CHECKLIST NGHIỆM THU DỰ ÁN WEB APP FULL-STACK
[x] 1. CSDL PostgreSQL chuẩn 3NF kèm bảo mật Row Level Security (RLS).
[x] 2. Hệ thống Authentication đăng nhập Email & Google OAuth hoạt động ổn định.
[x] 3. Tính năng CRUD và đồng bộ Realtime qua WebSocket mượt mà.
[x] 4. Tích hợp thanh toán VietQR / SePay tự động kích hoạt đơn hàng trong 3s.
[x] 5. Upload file an toàn lên Supabase Storage CDN.
[x] 6. Triển khai Production trên Vercel với tên miền riêng và SSL 100%.

Thực hành

Thực hành và tự đánh giá

Triển khai dự án của bạn lên Vercel, kiểm tra toàn bộ luồng đăng ký -> mua hàng -> thanh toán VietQR trên tên miền chính thức.

Cảnh báo & Bắt bệnh

⚠️ Cạm bẫy & Bắt bệnh khi build Web App Supabase:

Lỗi rò rỉ API Service Role Key: Để lộ key supabase_service_role ở mã nguồn Frontend (React/Vite) làm bất kỳ ai cũng có quyền xóa toàn bộ CSDL.

Cách khắc phục: Frontend CHỈ ĐƯỢC DÙNG anon_key kết hợp chính sách RLS. Service Role Key chỉ dùng ở Backend Edge Functions.

Lỗi Webhook VietQR bị gọi lặp (Idempotency): Ngân hàng gửi webhook 2 lần làm hệ thống cộng tiền 2 lần cho khách.

Cách khắc phục: Kiểm tra transaction_id trong bảng payment_logs, nếu đã tồn tại thì bỏ qua ngay.

Checklist nghiệm thu

📋 Checklist nghiệm thu Web App tự build:

[ ] Đã tự bật Row Level Security (RLS) trên 100% các bảng dữ liệu.
[ ] Đăng nhập Google OAuth / Email Magic Link hoạt động trơn tru.
[ ] Webhook thanh toán VietQR / SePay tự động kích hoạt đơn hàng trong 3 giây.

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.