Hướng dẫn Deploy VueJS lên Vercel App trong một nốt nhạc

Trong bài này mình sẽ hướng dẫn các bạn Deploy VueJS lên Vercel App cực kỳ dễ dàng và nhanh chóng. Nói qua một chút thì Vercel là một nền tảng hosting cho các ứng dụng web và các trang web tĩnh. Nó cho phép người dùng triển khai các ứng dụng web động được xây dựng bằng nhiều ngôn ngữ lập trình như JavaScript, TypeScript, Python, Go và nhiều hơn nữa. Nền tảng này cũng hỗ trợ các framework phổ biến như React, Next.js, Vue và Angular,…

Hướng dẫn Deploy VueJS lên Vercel App

Dưới đây là các bước mình thực hiện Deploy VueJS lên Vercel App.

Bước 1: Tạo Project VueJS

Ở đây mình sử dụng Vite để tạo một project mặc định với cấu trúc của VueJS nhé. Chi tiết thì các bạn tham khảo tài liệu tại https://vitejs.dev/guide/. Dưới đây là hình ảnh khi chạy ứng dụng:

Bước 2: Đẩy code lên GitHub

Tại sao lại phải đẩy code lên Github? Vì Vercel cho phép chúng ta import trực tiếp các repository trên Github của chúng ta và tự động Deploy khi có thay đổi. Việc này cũng giúp hạn chế thời gian Deploy VueJS lên Vercel App. Dưới đây là hình ảnh, kết quả code của mình trên Github(https://github.com/thangdangblog/demo-deploy-vuejs):

Bước 3: Tạo ứng dụng deploy trên vercel

Note: Ở mình đã đăng nhập Vercel bằng tài khoản GitHub của mình.

Ở bước này các bạn thực hiện import repository đã tạo ở bước số 2 vào ứng dụng. Tại màn hình Overview các bạn thực hiện chọn Create a New Project:

Lúc này bạn sẽ thấy được Repository mình đã cấp quyền cho Vercel đọc. Để tùy chỉnh lại quyền vercel đọc các repository các bạn có thể chọn Adjust GitHub App Permissions và thực hiện chọn các Reposity muốn hiển thị hoặc là tất cả tại mục Repository access:

Ở đây mình chọn Repository lúc nãy mình đã đẩy lên Github và thực hiện Import:

Tiếp tục nhấn Deploy ở màn hình kế tiếp:

Tiếp tục chờ đợi khoảng 10-20s và đây là kết quả khi deploy thành công ứng dụng của mình:

Và thế là mình đã có một Deploy hoàn chỉnh cho ứng dụng của mình tại địa chỉ: https://demo-deploy-vuejs.vercel.app/

Cấu hình nâng cao

Trên là hướng dẫn cơ bản cách Deploy một ứng dụng VueJS lên Vercel. Thực tế các ứng dụng khác sẽ cũng có cách Deploy tương tự như vậy. Ngoài ra, nâng cao thêm một chút các bạn có thể cấu hình thêm nhiều thứ khác nữa trong phần cài đặt của Vercel như:

• Environment Variables: Cấu hình các biến môi trường để không phải lại build code khi thay các param.
• Production Branch: Chọn nhánh Deploy cho ứng dụng trên Github.
• Domains: Cấu hình Domain.
• Build & Development Settings: Cấu hình lệnh build cho các ứng dụng đặc thù mà vercel chưa có config mặc định.
• …

Chúc các bạn thành công! Hãy để lại bình luận nếu bạn gặp vấn đề nhé,