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

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

Cách 2: Deploy với GitHub

1. Setup GitHub Repository

[object Object]

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

Truy cập vercel.com
Click New Project
Import GitHub repository
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]

[object Object]

3. Deploy

[object Object]

4. Deploy production

[object Object]

Cấu hình nâng cao

1. Custom Domain

Vào Vercel Dashboard
Settings → Domains
Thêm domain của bạn
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

Ba vấn đề thường gặp khi đưa Flutter Web lên production

Deploy thì nhanh, nhưng ba vấn đề dưới đây gần như chắc chắn xuất hiện ở lần triển khai thật đầu tiên:

1. Tải lại trang ở đường dẫn con bị 404. Flutter Web là ứng dụng một trang, nên máy chủ cần chuyển mọi đường dẫn không khớp tệp về tệp index.html. Nếu không cấu hình, người dùng đang ở /khoa-hoc mà bấm tải lại sẽ thấy lỗi 404.

2. Đường dẫn tài nguyên sai khi đặt trong thư mục con. Nếu ứng dụng không nằm ở gốc tên miền, cần khai báo đường dẫn gốc khi build để các tệp tài nguyên không bị tìm sai chỗ.

3. Thời gian tải đầu tiên lâu. Bản mặc định khá nặng vì chưa nén và chưa loại bỏ thành phần không dùng. Cách cải thiện: build ở chế độ phát hành, bật nén, và cân nhắc tải theo từng phần nếu ứng dụng lớn — xem thêm bài tối ưu hiệu năng Flutter.

Cấu hình cần kiểm tra trước khi triển khai

Trước khi đẩy lên máy chủ, hãy rà bốn điểm sau:

Tên miền trong cấu hình canonical và thẻ chia sẻ. Nếu để lại địa chỉ mặc định, thẻ chia sẻ trên mạng xã hội sẽ trỏ sai địa chỉ.
Biến theo môi trường. Địa chỉ API, khoá dịch vụ phải được truyền khi build, không hard-code trong mã nguồn.
Biểu tượng và tiêu đề trang. Flutter Web sinh kèm tệp index.html riêng — đây là nơi đặt tiêu đề, mô tả và biểu tượng.
Tệp chuyển hướng. Nếu bạn đổi đường dẫn của một trang đã tồn tại, cần khai báo chuyển hướng thay vì để người dùng gặp trang lỗi.

Flutter Web có phù hợp để làm website không?

Đây là câu hỏi nên trả lời trước khi đầu tư thời gian, vì hai mục tiêu rất khác nhau:

Ứng dụng nội bộ, bảng điều khiển, công cụ nội bộ — Flutter Web rất hợp: một mã nguồn cho cả mobile và web, giao diện nhất quán.
Website cần máy tìm kiếm đọc nội dung — cần cân nhắc kỹ. Flutter Web vẽ giao diện bằng canvas, nội dung không tự động có trong HTML. Nếu mục tiêu là SEO, giải pháp hợp lý hơn là dùng framework web cho phần nội dung và giữ Flutter cho phần ứng dụng.

Cách quyết định thực dụng: nếu người dùng vào bằng cách gõ từ khoá trên Google, Flutter Web không phải lựa chọn tốt. Nếu người dùng vào bằng liên kết trực tiếp, bằng ứng dụng, hoặc bằng tài khoản nội bộ, Flutter Web tiết kiệm rất nhiều công sức.

Câu hỏi thường gặp

Có cần máy chủ riêng không?

Không. Bản build tĩnh có thể đặt trên bất kỳ dịch vụ lưu trữ tĩnh nào. Yêu cầu duy nhất là máy chủ biết chuyển các đường dẫn không khớp về tệp index.html.

Làm sao kiểm tra bản build giống bản thật trước khi triển khai?

Hãy chạy bản build ở chế độ phát hành trên máy và mở bằng trình duyệt, chứ không chỉ chạy chế độ phát triển. Chế độ phát triển nhanh hơn nhưng khác biệt đáng kể về kích thước và hành vi.

Có nên dùng cùng một mã nguồn cho web và mobile không?

Nên, nhưng hãy tách phần khác biệt: bố cục rộng hơn cho web, và những tính năng chỉ có trên một nền tảng. Việc này được trình bày ở bài responsive design trong Flutter.

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:

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

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

Đọc thêm: Khám phá Flutter Web: Xây dựng ứng dụng web với Flutter 3.0

Học Flutter bài bản theo lộ trình

Nếu bạn muốn học có người sửa bài thay vì tự ghép tài liệu, Flutter Hướng Nghiệp đào tạo theo 3 cấp:

Flutter Cơ Bản — Dart, widget, giao diện, 28 buổi.
Flutter Nâng Cao — state management, REST API, Firebase, 28 buổi.
Flutter Chuyên Sâu — back-end, AI/ML, publish lên store, 53 buổi.

Lớp online trực tiếp qua Zoom/Google Meet, có bản ghi lại — không bắt buộc đến cơ sở.
Xem lịch khai giảng hoặc so sánh 5 cách học lập trình mobile nếu còn phân vân.

Tóm tắt nhanh