Triển khai sản phẩm lên Vercel

Vercel là nền tảng triển khai hàng đầu dành cho các ứng dụng frontend tĩnh và serverless. Với tính năng mạnh mẽ như tích hợp liền mạch với GitHub và hỗ trợ build tự động, Vercel giúp quy trình triển khai trở nên nhanh chóng và đơn giản. Bài học này sẽ hướng dẫn chi tiết cách cấu hình ứng dụng, sử dụng GitHub Actions để CI/CD, và quản lý domain cùng SSL tích hợp.

Triển khai sản phẩm lên Vercel

1. Cấu hình ứng dụng cho Vercel

Bước 1: Đăng nhập vào Vercel

• Truy cập https://vercel.com và đăng nhập bằng GitHub.

Bước 2: Kết nối với GitHub Repository

• Nhấn “New Project” và chọn repository từ GitHub.

Bước 3: Cấu hình dự án

• Đối với ứng dụng React:
  • Build Command: npm run build
  • Output Directory: build/
• Đối với HTML tĩnh: Chỉ cần chọn thư mục chứa file HTML.

Bước 4: Deploy dự án

• Nhấn “Deploy” và chờ quá trình triển khai hoàn tất.

2. Sử dụng GitHub Actions để build và deploy liên tục

Tạo file cấu hình GitHub Actions:

• Thêm file .github/workflows/deploy.yml với nội dung sau:

name: Deploy to Vercel

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Check out code
        uses: actions/checkout@v3

      - name: Install dependencies
        run: npm install

      - name: Build project
        run: npm run build

      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          working-directory: .

Cấu hình Secrets trong GitHub:

• Thêm biến VERCEL_TOKEN lấy từ Dashboard của Vercel.

3. Quản lý domain và SSL tích hợp

Thêm domain riêng:

• Vào tab "Domains" và nhập domain cần liên kết.

Cấu hình DNS:

• Cập nhật record A và CNAME theo hướng dẫn từ Vercel.

SSL tự động:

• Vercel tự động cấp SSL cho mọi domain kết nối.

Kết luận

Bài học này giúp học viên hiểu và triển khai ứng dụng thành công lên Vercel, từ cấu hình cơ bản đến CI/CD với GitHub Actions. Đồng thời, học viên cũng biết cách quản lý domain và SSL để hoàn thiện sản phẩm trước khi đưa đến tay người dùng.