Quy trình deploy web app lên Vercel giúp đưa toàn bộ mã nguồn từ kho lưu trữ Git lên Internet nhanh chóng. Hệ thống tự động nhận diện framework, thiết lập hạ tầng đám mây và trả về đường dẫn xem trước mà không cần cấu hình máy chủ thủ công.

Sau khi hoàn thành các bước thiết lập, ứng dụng sẽ tự động cập nhật bản chạy mới mỗi khi có mã nguồn được đẩy lên nhánh chính.

Điều kiện cần chuẩn bị

Trước khi bắt đầu, cần chuẩn bị các mục sau:

  • Tài khoản Vercel đang hoạt động bình thường.
  • Tài khoản Git (GitHub, GitLab hoặc Bitbucket) đã liên kết với Vercel.
  • Mã nguồn dự án web app đã đẩy lên một repository trên Git.
  • Danh sách các khoá API và biến môi trường mẫu phục vụ kiểm thử.

Các bước deploy web app lên Vercel từ Git

Thực hiện tuần tự các thao tác dưới đây từ bảng điều khiển Vercel để khởi tạo dự án mới.

Nhập kho lưu trữ vào dự án mới

Truy cập vào giao diện quản trị để chọn mã nguồn cần đưa lên Internet.

  1. Đăng nhập vào bảng điều khiển Vercel trên trình duyệt.
  2. Nhấn nút New Project hoặc Add New rồi chọn Project tuỳ phiên bản giao diện.
  3. Chọn tài khoản Git từ danh sách nhà cung cấp đã liên kết.
  4. Tìm tên repository chứa mã nguồn web app cần xuất bản.
  5. Nhấn Import tại dòng chứa repository tương ứng.

Thiết lập cấu trúc thư mục và biến môi trường

Cấu hình các thông số nền tảng để hệ thống hiểu cấu trúc mã nguồn trước khi biên dịch.

  1. Kiểm tra mục Framework Preset để đảm bảo hệ thống đã nhận diện đúng framework của dự án.
  2. Nhấn Edit tại mục Root Directory nếu thư mục chứa file package.json nằm ở thư mục con.
  3. Mở rộng mục Environment Variables để thêm các tham số chạy ứng dụng.
  4. Nhập tên biến vào ô Key và nhập giá trị tương ứng vào ô Value.
  5. Nhấn nút Add để lưu từng cặp biến môi trường vào hệ thống.
API_SERVICE_KEY=sample_secret_key_12345
DATABASE_MODE=test

Khởi chạy đóng gói và kiểm tra bản chạy

Bắt đầu quá trình biên dịch mã nguồn và nhận đường dẫn truy cập website.

  1. Nhấn nút Deploy để kích hoạt quy trình đóng gói tự động.
  2. Theo dõi log biên dịch trực tiếp hiển thị trên màn hình trong khoảng 1 đến 3 phút.
  3. Chờ màn hình chuyển sang trạng thái thông báo thành công kèm giao diện chụp trước của web app.
  4. Nhấp vào đường dẫn có đuôi vercel.app được cấp phát để mở website trên trình duyệt.
  5. Thử nghiệm các tính năng cơ bản trên tên miền xem trước vừa tạo.

Lỗi thường gặp và cách xử lý

Trong quá trình biên dịch dự án, một số vấn đề kỹ thuật có thể khiến tiến trình dừng lại.

Sự cố Nguyên nhân Cách xử lý
Build thất bại do thiếu biến môi trường Mã nguồn gọi biến bí mật nhưng chưa khai báo trong phần cấu hình Vào Project Settings, mở mục Environment Variables, bổ sung biến và nhấn Redeploy
Báo lỗi không tìm thấy package.json Cấu hình Root Directory trỏ sai vị trí thư mục chứa tệp quản lý thư viện Vào mục Root Directory trong Project Settings, chỉnh lại đường dẫn chính xác và lưu lại
Lỗi kiểm tra cú pháp nghiêm ngặt Tiến trình build bị chặn bởi các cảnh báo TypeScript hoặc kiểm tra chuẩn mã Chạy lệnh kiểm tra và sửa toàn bộ lỗi cú pháp ở máy cục bộ trước khi đẩy lên Git 
npm run build

Khi nào nên và không nên dùng

Cần cân nhắc mô hình kiến trúc của ứng dụng trước khi lựa chọn nền tảng này.

Nên dùng khi Không nên dùng khi
Ứng dụng web tĩnh, frontend Single Page Application hoặc Next.js Ứng dụng yêu cầu duy trì kết nối mạng thời gian thực liên tục (stateful server)
Cần triển khai nhanh các trang giới thiệu, bảng điều khiển nội bộ, bản thử nghiệm Hệ thống phụ thuộc vào tiến trình nền chạy liên tục không thời hạn
Đội ngũ phát triển làm việc trực tiếp trên quy trình Git chuẩn Dự án chỉ lưu trữ mã nguồn offline không sử dụng các dịch vụ Git hỗ trợ

Nguồn chính thức đã tham khảo

Thông tin trong bài viết được đối chiếu trực tiếp từ tài liệu kỹ thuật chính thức:

Sau khi nắm rõ quy trình, bạn hãy thực hành nhập thử một kho lưu trữ mẫu chứa trang web đơn giản để kiểm tra toàn bộ luồng hoạt động. Khi dự án chạy ổn định, việc gắn thêm tên miền riêng hoặc phân quyền nhánh sẽ được thực hiện dễ dàng trên bảng điều khiển.