Tự động Deploy lên Vercel bằng GitHub Action: Hướng dẫn chi tiết
Tự động Deploy lên Vercel bằng GitHub Action: Hướng dẫn chi tiết
Bạn đang tìm cách tự động hóa quá trình deploy ứng dụng web của mình lên Vercel mỗi khi có thay đổi trên GitHub? Bài viết này sẽ hướng dẫn bạn từng bước cách thiết lập quy trình CI/CD (Continuous Integration/Continuous Deployment) hoàn chỉnh sử dụng GitHub Actions và Vercel. Chúng ta sẽ cùng nhau khám phá những lợi ích mà tự động hóa mang lại, từ việc tiết kiệm thời gian, giảm thiểu lỗi đến việc cải thiện năng suất làm việc của cả team. Hãy cùng bắt đầu nhé!
Tại sao nên sử dụng GitHub Actions và Vercel để tự động deploy?
Trước khi đi sâu vào chi tiết kỹ thuật, hãy cùng điểm qua những lợi ích mà việc tự động hóa deploy mang lại.
- Tiết kiệm thời gian: Không cần phải deploy thủ công sau mỗi lần commit, quy trình được tự động hóa hoàn toàn.
- Giảm thiểu lỗi: Loại bỏ khả năng xảy ra lỗi do thao tác thủ công trong quá trình deploy.
- Tăng năng suất: Tập trung vào phát triển tính năng mới thay vì lo lắng về việc deploy.
- Phản hồi nhanh chóng: Phát hiện lỗi và khắc phục nhanh chóng nhờ quy trình kiểm tra tự động.
- Đảm bảo tính nhất quán: Quy trình deploy luôn được thực hiện theo cùng một cách, tránh sai sót do sự khác biệt giữa các môi trường.
Vercel là một nền tảng tuyệt vời để hosting các ứng dụng web tĩnh và serverless functions. GitHub Actions cung cấp một cơ sở hạ tầng CI/CD mạnh mẽ, cho phép bạn tự động hóa quy trình xây dựng, kiểm tra và deploy ứng dụng của mình. Kết hợp cả hai, bạn sẽ có một quy trình làm việc mượt mà và hiệu quả.
Các bước chuẩn bị
Trước khi bắt đầu, bạn cần đảm bảo rằng mình đã có những thứ sau:
- Tài khoản GitHub: Nếu chưa có, hãy tạo một tài khoản miễn phí tại đây.
- Tài khoản Vercel: Tương tự, tạo một tài khoản Vercel miễn phí tại đây.
- Ứng dụng web: Chuẩn bị sẵn một ứng dụng web đơn giản (ví dụ: React, Vue, Next.js, Gatsby) đã được đẩy lên repository GitHub.
- Vercel CLI (Tùy chọn): Cài đặt Vercel CLI nếu bạn muốn kiểm tra và deploy ứng dụng cục bộ trước khi sử dụng GitHub Actions. Bạn có thể cài đặt bằng lệnh:
npm install -g vercel
Hướng dẫn từng bước thiết lập tự động deploy
Bây giờ chúng ta sẽ đi vào phần quan trọng nhất: thiết lập quy trình tự động deploy.
Bước 1: Tạo project Vercel và liên kết với GitHub
Đầu tiên, bạn cần tạo một project Vercel và liên kết nó với repository GitHub của bạn.
- Đăng nhập vào Vercel: Truy cập vào trang web Vercel và đăng nhập bằng tài khoản của bạn.
- Tạo project mới: Nhấn vào nút "Add New..." hoặc "New Project".
- Import GitHub repository: Chọn "Import Git Repository" và chọn repository GitHub chứa ứng dụng web của bạn. Vercel sẽ yêu cầu quyền truy cập vào repository của bạn.
- Cấu hình project: Vercel sẽ tự động phát hiện framework bạn đang sử dụng (ví dụ: Next.js, React, Vue). Kiểm tra lại cấu hình và điều chỉnh nếu cần thiết.
- Deploy project: Nhấn vào nút "Deploy". Vercel sẽ tiến hành deploy ứng dụng của bạn lần đầu tiên.
Bước 2: Lấy Vercel Access Token
Để GitHub Actions có thể deploy ứng dụng lên Vercel, bạn cần cung cấp một Vercel Access Token.
- Truy cập trang Tokens: Trong Vercel, truy cập vào trang "Settings" -> "Tokens".
- Tạo token mới: Nhấn vào nút "Create" để tạo một token mới. Đặt tên cho token (ví dụ: "GitHub Actions Token") và chọn quyền truy cập phù hợp (thường là quyền "Deploy").
- Sao chép token: Lưu lại token này cẩn thận, vì bạn sẽ không thể xem lại nó sau này.
Bước 3: Lưu Vercel Access Token vào GitHub Secrets
Để bảo mật, bạn không nên lưu trực tiếp Vercel Access Token vào file workflow của GitHub Actions. Thay vào đó, hãy lưu nó vào GitHub Secrets.
- Truy cập trang Settings của repository: Trên GitHub, truy cập vào repository của bạn, sau đó vào "Settings" -> "Secrets and variables" -> "Actions".
- Tạo secret mới: Nhấn vào nút "New repository secret".
- Đặt tên và giá trị cho secret: Đặt tên cho secret là `VERCEL_TOKEN` và dán Vercel Access Token bạn đã sao chép vào ô "Value".
- Lưu secret: Nhấn vào nút "Add secret".
Bước 4: Tạo file workflow GitHub Actions
File workflow là nơi bạn định nghĩa các bước cần thực hiện để tự động deploy ứng dụng.
- Tạo thư mục .github/workflows: Trong repository của bạn, tạo thư mục `.github/workflows` nếu nó chưa tồn tại.
- Tạo file workflow: Tạo một file mới trong thư mục `.github/workflows` với tên bất kỳ (ví dụ: `vercel.yml`).
- Thêm nội dung workflow: Dán đoạn mã YAML sau vào file workflow của bạn:
name: Deploy to Vercel
on:
push:
branches:
- main # Thay đổi thành branch bạn muốn deploy
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Install Vercel CLI
run: npm install -g vercel
- name: Deploy to Vercel
run: vercel deploy --prod --token ${{ secrets.VERCEL_TOKEN }}
- name: Alias Production Domain
run: vercel alias set ${{ secrets.VERCEL_URL }} --token ${{ secrets.VERCEL_TOKEN }}
env:
VERCEL_URL: your-production-url.vercel.app
Giải thích đoạn mã:
- `name`: Tên của workflow.
- `on`: Định nghĩa khi nào workflow sẽ được kích hoạt. Trong trường hợp này, workflow sẽ chạy khi có commit mới được đẩy lên branch `main`.
- `jobs`: Định nghĩa các công việc cần thực hiện.
- `runs-on`: Xác định môi trường chạy cho công việc. Ở đây, chúng ta sử dụng `ubuntu-latest`.
- `steps`: Liệt kê các bước thực hiện trong công việc.
- `uses: actions/checkout@v3`: Sử dụng action `checkout` để tải mã nguồn từ repository.
- `name: Install Vercel CLI`: Cài đặt Vercel CLI.
- `name: Deploy to Vercel`: Deploy ứng dụng lên Vercel bằng lệnh `vercel deploy`. `--prod` đảm bảo rằng ứng dụng được deploy lên môi trường production. `${{ secrets.VERCEL_TOKEN }}` sử dụng giá trị của secret `VERCEL_TOKEN` mà bạn đã lưu trước đó.
Bước 5: Commit và push thay đổi
Cuối cùng, commit và push file workflow lên repository của bạn.
git add .github/workflows/vercel.yml
git commit -m "Add Vercel deployment workflow"
git push origin main
Bước 6: Kiểm tra kết quả
Sau khi push thay đổi, GitHub Actions sẽ tự động kích hoạt workflow của bạn.
- Truy cập trang Actions của repository: Trên GitHub, truy cập vào repository của bạn, sau đó vào tab "Actions".
- Kiểm tra workflow: Bạn sẽ thấy workflow `Deploy to Vercel` đang chạy. Nhấn vào workflow để xem chi tiết các bước thực hiện.
- Xác nhận deploy thành công: Nếu tất cả các bước đều thành công, ứng dụng của bạn đã được deploy lên Vercel. Bạn có thể truy cập vào trang web Vercel để kiểm tra.
Tùy chỉnh workflow
Bạn có thể tùy chỉnh workflow của mình để phù hợp với nhu cầu cụ thể của dự án. Dưới đây là một vài ví dụ:
- Chạy tests trước khi deploy: Thêm một bước để chạy các test cases của bạn trước khi deploy.
- Deploy lên môi trường staging: Thay đổi workflow để deploy lên môi trường staging thay vì production.
- Sử dụng biến môi trường: Truyền các biến môi trường vào quá trình deploy.
- Thông báo deploy thành công/thất bại: Gửi thông báo đến Slack, email hoặc các kênh khác khi deploy thành công hoặc thất bại.
Khắc phục sự cố
Trong quá trình thiết lập và sử dụng, bạn có thể gặp phải một số vấn đề. Dưới đây là một vài vấn đề thường gặp và cách khắc phục:
- Lỗi xác thực: Kiểm tra lại Vercel Access Token và đảm bảo rằng nó đã được lưu đúng cách trong GitHub Secrets.
- Lỗi deploy: Xem log của workflow để tìm hiểu nguyên nhân gây ra lỗi. Có thể do cấu hình không đúng, thiếu dependencies hoặc lỗi trong mã nguồn.
- Workflow không chạy: Đảm bảo rằng workflow đã được kích hoạt đúng cách (ví dụ: có commit mới trên branch được chỉ định).
Kết luận
Chúc mừng bạn đã hoàn thành việc thiết lập tự động deploy lên Vercel bằng GitHub Actions! Với quy trình này, bạn có thể tập trung vào việc phát triển ứng dụng mà không cần lo lắng về việc deploy thủ công. Hy vọng bài viết này hữu ích cho bạn. Chúc bạn thành công!
