Hướng dẫn triển khai ứng dụng Flutter Web lên Vercel

Vercel là một platform tuyệt vời để deploy Flutter Web applications với performance cao và dễ sử dụng. Bài viết này sẽ hướng dẫn bạn deploy Flutter Web lên Vercel.

Tại sao chọn Vercel?

Ưu điểm:

• ✅ Miễn phí: Hobby plan miễn phí
• ✅ Fast: CDN toàn cầu, performance cao
• ✅ Easy: Tích hợp GitHub, tự động deploy
• ✅ HTTPS: SSL tự động
• ✅ Preview: Preview cho mỗi PR

Chuẩn bị

1. Build Flutter Web

[object Object]

Kết quả: build/web/

2. Cấu hình base href

[object Object]

Cách 1: Deploy thủ công

1. Tạo vercel.json

[object Object]

2. Upload lên Vercel

1. Truy cập vercel.com
2. Đăng nhập với GitHub
3. Click New Project
4. Upload thư mục build/web
5. Deploy

Cách 2: Deploy với GitHub

1. Setup GitHub Repository

[object Object]

2. Kết nối với Vercel

1. Truy cập vercel.com
2. Click New Project
3. Import GitHub repository
4. Cấu hình build settings

3. Cấu hình Build Settings

[object Object]

4. Environment Variables (nếu cần)

Trong Vercel dashboard:

• Settings → Environment Variables
• Thêm các biến môi trường cần thiết

Cách 3: Sử dụng Vercel CLI

1. Cài đặt Vercel CLI

[object Object]

2. Login

[object Object]

3. Deploy

[object Object]

4. Deploy production

[object Object]

Cấu hình nâng cao

1. Custom Domain

1. Vào Vercel Dashboard
2. Settings → Domains
3. Thêm domain của bạn
4. Cấu hình DNS theo hướng dẫn

2. Environment Variables

[object Object]

3. Rewrites và Redirects

[object Object]

GitHub Actions (Tự động deploy)

1. Tạo workflow

[object Object]

2. Setup Secrets

Trong GitHub repository:

• Settings → Secrets → Actions
• Thêm:
  • VERCEL_TOKEN
  • ORG_ID
  • PROJECT_ID

Tối ưu Performance

1. Enable Tree Shaking

[object Object]

2. Optimize Assets

[object Object]

3. Lazy Loading

[object Object]

Troubleshooting

1. Lỗi 404 trên refresh

[object Object]

2. Lỗi CORS

[object Object]

3. Lỗi build

[object Object]

Best Practices

1. Environment Variables

✅ Nên: Sử dụng environment variables cho config
❌ Không nên: Hardcode sensitive data

2. Build Optimization

✅ Nên: Build với --release flag
❌ Không nên: Deploy debug build

3. Version Control

✅ Nên: Commit vercel.json vào git
❌ Không nên: Commit build artifacts

Kết luận

Deploy Flutter Web lên Vercel rất đơn giản:

• ✅ Dễ dàng: Tích hợp GitHub, tự động deploy
• ✅ Nhanh: CDN toàn cầu, performance cao
• ✅ Miễn phí: Hobby plan đủ cho hầu hết projects
• ✅ HTTPS: SSL tự động

Tóm tắt các bước:

1. Build Flutter Web: flutter build web --release
2. Kết nối GitHub repository với Vercel
3. Cấu hình build settings
4. Deploy tự động

Chúc bạn thành công trong việc deploy Flutter Web lên Vercel! 🚀

---

Tác giả: Admin
Ngày đăng: 01/02/2025
Chuyên mục: Flutter