Giáo trình tự học miễn phí · Dịch vụ hỗ trợ theo nhu cầu.

Bài 0335phút ước tínhCơ bản đến Thực chiến

3. Deploy Frontend & Static Web Lên Vercel Siêu Tốc: Kết Nối Git, Preview Deployment & Edge Network

Triển khai ứng dụng Web lên Vercel chỉ trong 3 bước: Kết nối GitHub Repo, cấu hình build command, quản trị Preview URL cho từng commit và tối ưu tốc độ tải trang.

⚡ Quy Trình Triển Khai Vercel 3 Bước

Import Project: Đăng nhập Vercel bằng tài khoản GitHub $ ightarrow$ Chọn Repository cần deploy.
Cấu hình Build & Output:

Framework Preset: Next.js / Vite / Other.
Build Command: npm run build hoặc để trống với Static HTML.
Output Directory: dist hoặc public hoặc ./.

Deploy & Instant CDN: Vercel phân phối website lên mạng lưới máy chủ Edge toàn cầu trong 10-20 giây.

 example.py
// vercel.json - CẤU HÌNH CHUYỂN HƯỚNG & HEADER TỐI ƯU
{
  "rewrites": [
    { "source": "/api/(.*)", "destination": "https://api.yourbackend.com/$1" }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        { "key": "X-Frame-Options", "value": "DENY" }
      ]
    }
  ]
}

Thực hành

Thực hành và tự đánh giá

Kết nối một GitHub repo chứa trang web HTML/React của bạn với Vercel và kiểm tra đường link *.vercel.app trực tiếp trên điện thoại.

Tiến độ tự học lưu trên trình duyệt này. Chỉ đánh dấu khi đã kiểm tra sản phẩm thực hành.