Mục tiêu

Kết nối GitHub với Vercel để app tự động cập nhật mỗi khi bạn push code. Hiểu khái niệm CI/CD cơ bản.

Sau bài này, bạn sẽ:

• ✅ Deploy app từ GitHub lên Vercel thành công
• ✅ Cấu hình Environment Variables trên Vercel
• ✅ Hiểu luồng CI/CD: push code → tự động deploy
• ✅ Gắn custom domain (nếu có)

Nội dung chính

7.1 — Từ Localhost ra Internet

TRƯỚC (Course 1):
  Code → Bolt.new Deploy (1 click) → Link

BÂY GIỜ (Course 2):
  Code → Push lên GitHub → Vercel tự động lấy code → Deploy → Link
               ↑                    ↑
            Save game         "Đầu bếp tự nấu khi có nguyên liệu mới"

Mẹo: Vercel miễn phí cho project cá nhân. Bạn có thể deploy bao nhiêu project tùy thích, mỗi project có link riêng dạng ten-app.vercel.app.

7.2 — CI/CD: “Đầu bếp tự động”

Khái niệm CS lồng ghép: CI/CD

• CI (Continuous Integration): Mỗi lần bạn push code mới, hệ thống tự kiểm tra code có lỗi không.
• CD (Continuous Deployment): Nếu không lỗi, hệ thống tự deploy lên internet.

Giống như bạn gửi nguyên liệu mới vào kho (push code) → bếp tự nhận → tự nấu → tự bưng ra phòng ăn (deploy).

Luồng CI/CD thực tế:

1. Bạn sửa code trong Cursor
   ↓
2. git add . → git commit → git push
   ↓
3. GitHub nhận code mới
   ↓
4. Vercel tự động detect có code mới
   ↓
5. Vercel chạy "npm run build" (kiểm tra + đóng gói)
   ↓
6a. Build thành công → Deploy lên internet → Link cập nhật
6b. Build thất bại → Gửi email báo lỗi → Link giữ phiên bản cũ

Mẹo: Nếu build thất bại, app cũ vẫn hoạt động bình thường. Vercel chỉ cập nhật khi build thành công. Bạn có thể sửa lỗi rồi push lại mà không sợ app sập.

7.3 — Kết nối GitHub + Vercel (Hướng dẫn từng bước)

Bước 1: Vào vercel.com → Bấm “Sign Up” → Chọn “Continue with GitHub”

Bước 2: Cho phép Vercel truy cập GitHub repositories của bạn

• Chọn “All Repositories” hoặc chỉ repo cần deploy

Bước 3: Bấm “New Project” → Bạn sẽ thấy danh sách repo từ GitHub → Bấm “Import” repo app To-do

Bước 4: Cấu hình project:

Project Name: my-todo-app (hoặc tên bạn muốn)
Framework Preset: Vite (Vercel thường tự detect)
Root Directory: ./ (giữ mặc định)
Build Command: npm run build (giữ mặc định)
Output Directory: dist (giữ mặc định cho Vite)

Bước 5: CHƯA BẤM DEPLOY! → Thêm Environment Variables trước (xem phần 7.4)

Bước 6: Bấm “Deploy” → Chờ 1-2 phút

Bước 7: Nhận link: my-todo-app.vercel.app → Mở trình duyệt kiểm tra!

7.4 — Environment Variables trên Vercel

Nhớ file .env ở Bài 4? File đó chỉ hoạt động trên máy bạn (localhost). Khi deploy lên Vercel, cần thêm các biến đó vào Vercel:

Cách thêm Environment Variables:

Vercel Dashboard → chọn Project → Settings → Environment Variables

Thêm từng biến:
┌──────────────────────────┬──────────────────────────────────────────┐
│ Key                      │ Value                                    │
├──────────────────────────┼──────────────────────────────────────────┤
│ VITE_SUPABASE_URL        │ https://xxxxx.supabase.co                │
│ VITE_SUPABASE_ANON_KEY   │ eyJxxxxxxx (paste đầy đủ, ~170 ký tự)   │
└──────────────────────────┴──────────────────────────────────────────┘

Environments: tick cả 3 — Production, Preview, Development
→ Bấm "Save"

SAU KHI thêm Environment Variables: cần redeploy để Vercel nhận biến mới:

Vercel Dashboard → Deployments → bấm "..." ở deployment mới nhất → "Redeploy"

Mẹo: Một sai lầm rất phổ biến: thêm env vars nhưng quên bấm Redeploy. Vercel chỉ đọc env vars tại thời điểm build. Nếu thêm sau khi deploy, phải deploy lại.

7.5 — Cập nhật Supabase cho production

Khi app chạy trên Vercel (không còn localhost), cần cập nhật một số cài đặt trong Supabase:

Supabase Dashboard → Authentication → URL Configuration:
- Site URL: https://my-todo-app.vercel.app
- Redirect URLs: thêm https://my-todo-app.vercel.app/**

Nếu dùng Google OAuth:
- Thêm URL mới vào Google Cloud Console → Authorized redirect URIs

Nếu không cập nhật, Auth sẽ redirect về localhost thay vì URL thật.

7.6 — Test luồng tự động deploy

Bây giờ hãy test luồng CI/CD hoàn chỉnh:

1. Mở Cursor → Sửa gì đó nhỏ (ví dụ: đổi tiêu đề trang chủ)
2. git add .
3. git commit -m "Đổi tiêu đề trang chủ"
4. git push
5. Mở Vercel Dashboard → thấy "Building..." tự động
6. Chờ 1-2 phút → Mở link app → Thấy thay đổi!

Từ giờ, mỗi lần git push → Vercel tự deploy. Bạn không cần vào Vercel bấm gì cả.

7.7 — Custom Domain (tùy chọn)

Nếu bạn có domain riêng (ví dụ: myapp.com), có thể gắn vào Vercel:

1. Vercel Dashboard → Project → Settings → Domains
2. Nhập domain: myapp.com → Bấm "Add"
3. Vercel sẽ cho bạn DNS records cần cấu hình:
   - Type: A, Value: 76.76.21.21
   - Type: CNAME, Name: www, Value: cname.vercel-dns.com
4. Vào nhà cung cấp domain (Namecheap, GoDaddy, Tenten...)
   → DNS Settings → Thêm records ở bước 3
5. Chờ 5-30 phút → Domain hoạt động!
6. Vercel tự cấp SSL (HTTPS) miễn phí

Mẹo: Nếu chưa có domain, link xxx.vercel.app hoàn toàn đủ để chia sẻ với bạn bè hoặc đưa vào portfolio. Domain riêng chỉ cần khi bạn muốn “chuyên nghiệp hóa” app.

Lỗi thường gặp

Vấn đề: “Build failed” — Vercel báo lỗi khi deploy → Bấm vào deployment bị lỗi → xem Build Logs. Lỗi phổ biến nhất: (1) Code chạy OK trên localhost nhưng có warning bị build coi là error. Nói AI: “Vercel build failed với lỗi: [paste lỗi]. Cách sửa?”. (2) Thiếu dependency — chạy npm install rồi commit lại.

Vấn đề: “Env vars không nhận” — app deploy nhưng không kết nối được Supabase → Kiểm tra 3 thứ: (1) Tên biến phải bắt đầu bằng VITE_ (với Vite) hoặc NEXT_PUBLIC_ (với Next.js). (2) Đã bấm Redeploy sau khi thêm env vars chưa? (3) Tick đủ cả 3 environments (Production, Preview, Development).

Vấn đề: “Auth redirect về localhost thay vì URL thật” → Vào Supabase → Authentication → URL Configuration → cập nhật Site URL thành https://your-app.vercel.app. Thêm cả redirect URL. Xem lại phần 7.5.

Vấn đề: “Trang trắng sau khi deploy” — link Vercel mở ra trang trắng → Kiểm tra Build Logs xem có lỗi không. Nếu build OK nhưng trang trắng: (1) Mở Console (F12) trên trang Vercel. (2) Thường là lỗi env vars — app không kết nối được Supabase. (3) Kiểm tra Output Directory có đúng dist không.

Vấn đề: “Deploy quá lâu” — chờ hơn 5 phút → Thường build Vite chỉ mất 30-60 giây. Nếu lâu hơn, có thể project quá nặng hoặc dependency bị loop. Kiểm tra Build Logs xem đang stuck ở bước nào.

Bài tập thực hành — ĐỒ ÁN CUỐI KHOÁ

Nhiệm vụ: Deploy app To-do (có Auth + Supabase) lên Vercel.

Bước 1 (3 phút): Đảm bảo code đã push lên GitHub

• Tiêu chí: git status hiện “nothing to commit, working tree clean”

Bước 2 (5 phút): Tạo tài khoản Vercel, import repo từ GitHub

• Tiêu chí: thấy trang cấu hình project trên Vercel
• Gợi ý nếu bị stuck: chọn “Continue with GitHub” để tự động liên kết repo

Bước 3 (5 phút): Thêm Environment Variables trên Vercel (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY)

• Tiêu chí: 2 biến đã thêm, tick đủ 3 environments
• Gợi ý nếu bị stuck: copy chính xác từ file .env trên máy, paste vào Vercel

Bước 4 (5 phút): Deploy và kiểm tra app hoạt động trên link thật

• Tiêu chí: mở link xxx.vercel.app, đăng nhập được, thêm task được, tải lại trang task vẫn còn
• Gợi ý nếu bị stuck: nếu trang trắng, kiểm tra Console (F12) và đọc phần “Lỗi thường gặp”

Bước 5 (5 phút): Cập nhật Supabase URL Configuration (phần 7.5), test Auth trên link thật

• Tiêu chí: đăng ký tài khoản mới trên link Vercel, nhận email xác nhận, đăng nhập thành công

Bước 6 (2 phút): Thêm 1 thay đổi nhỏ → Push → Xem Vercel tự deploy lại

• Tiêu chí: thấy “Building…” trên Vercel Dashboard sau khi push

Thời gian: 25 phút Deliverable: Link Vercel app chạy hoàn chỉnh (có login, có database, có auto-deploy)

Tổng kết bài 7