Từ GitHub lên Internet trong vài phút
Vercel và Netlify biến việc deploy — thứ từng cần cả đội DevOps — thành vài cú click. Chúng tự build từ GitHub và cho bạn một URL live.
Quy trình deploy (Vercel, tương tự Netlify)
- Đăng nhập Vercel bằng tài khoản GitHub
- Import repo của bạn
- Vercel tự nhận diện framework (Next.js...) và cấu hình build
- Bấm Deploy → vài phút sau có URL
your-app.vercel.app
Từ đó, mỗi lần git push lên main → tự động deploy lại. Push nhánh khác → tạo "preview deployment" riêng để xem trước. Đây là CI/CD miễn phí.
Biến môi trường (Environment Variables) — phần quan trọng nhất
Code của bạn cần secret (Supabase key, API key...) nhưng chúng KHÔNG nằm trong code (đã bị .gitignore). Vậy production lấy đâu ra? Bạn khai báo chúng trong dashboard:
- Vercel: Project → Settings → Environment Variables
- Netlify: Site settings → Environment variables
Thêm từng cặp KEY = value, ví dụ:
NEXT_PUBLIC_SUPABASE_URL = https://xxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY = eyJ...
SUPABASE_SERVICE_ROLE_KEY = eyJ... (chỉ server, KHÔNG có prefix NEXT_PUBLIC)
Quy tắc vàng về biến môi trường
| Quy tắc | Vì sao |
|---|---|
Prefix NEXT_PUBLIC_ = lộ ra trình duyệt | Chỉ dùng cho key công khai (anon key). KHÔNG đặt service key dạng này |
| Service role / secret = KHÔNG prefix | Chỉ chạy ở server, không lộ ra client |
| Khai báo đủ cho mọi môi trường | Production, Preview, Development |
| Đổi biến → cần redeploy | Vercel/Netlify chỉ nạp biến lúc build |
⚠️ Bài học thực tế: thiếu một biến môi trường là nguyên nhân số 1 khiến "chạy local OK nhưng deploy lỗi". Khi build production fail với lỗi kiểu "URL and API key are required", 90% là quên khai báo env var trên dashboard.
Deploy lỗi? Đừng hoảng
Vercel cho xem build log chi tiết. Copy log lỗi đưa cho AI:
"Build trên Vercel fail với log sau: [dán log]. Phân tích nguyên nhân và cách sửa."
Lỗi build thường gặp: thiếu env var, lỗi TypeScript, thiếu dependency. Đều sửa nhanh khi đọc đúng log.
Bài tập
Deploy một dự án lên Vercel: import repo → khai báo đủ env var → deploy thành công → mở URL live. Thử push một thay đổi nhỏ và xem nó tự deploy lại.