Vercel là gì? Hướng dẫn deploy dự án Next.js bằng Vercel

Bạn vừa mới hoàn thành một porfolio, dự án cá nhân bằng Next.js, React, HTML/CSS/JS tĩnh muốn share cho bạn bè, đồng nghiệp hay thậm chí là nhà tuyển dụng, nhưng không muốn mất quá nhiều thời gian vào việc cấu hình server, thêm SSL hay tìm cách tối ưu tốc độ cho người truy cập.

Vercel sẽ giúp bạn đưa ứng dụng của lên internet chỉ bằng vài thao tác đơn giản, hoàn toàn miễn phí cho các dự án nhỏ. Không những thế, Vercel còn cung cấp các tính năng tối ưu, chẳng hạn như: CDN toàn cầu, serverless functions và tích hợp chặt chẽ với Git, để mỗi lần bạn cập nhật code, website của bạn tự động được deploy lại version mới.

Trong bài viết này, hãy cùng mình tìm hiểu kỹ hơn về cách Vercel, hướng dẫn bạn cách deploy dự án lên Vercel.

1. Vercel là gì?

Vercel, trước đây được biết đến với tên gọi Zeit, là một nền tảng đám mây cho phép các developer deploy các ứng dụng tĩnh và serverless nhanh chóng, an toàn và hiệu quả. Vercel hỗ trợ nhiều framework phổ biến như: Next.js, React, Vue.js, Angular, Svelte,...

Điểm mạnh của Vercel là khả năng tối ưu hóa hiệu suất và trải nghiệm người dùng thông qua việc cung cấp CDN (Content Delivery Network) toàn cầu và các tính năng như Serverless Functions.

Giả sử bạn có một dự án nhỏ đơn giản, bạn muốn đưa ứng dụng này lên để mọi người có thể truy cập. Vercel giúp bạn làm điều đó chỉ trong vài bước đơn giản.

2. Tại sao nên sử dụng Vercel?

• Dễ dàng triển khai: chỉ với vài thao tác đơn giản, bạn có thể deploy dự án của mình mà không cần các cấu hình phức tạp. Mọi thứ đều được tự động hoá, giúp bạn tiết kiệm thời gian và công sức.
• Hiệu suất cao: Vercel sử dụng CDN toàn cầu giúp nội dung website/ứng dụng của bạn được tải cực nhanh, phân phối từ máy chủ gần với người dùng nhất, giảm thiểu độ trễ và nâng cao trải nghiệm.
• Hỗ trợ Serverless Functions: Vercel cho phép bạn viết và chạy code phía server mà không cần tốn công thiết lập hay quản lý server. Điều này giúp dễ dàng mở rộng tính năng và xử lý logic phức tạp, đồng thời tối ưu chi phí.
• Tích hợp chặt chẽ với Git: mỗi khi bạn push code lên GitHub, GitLab hoặc Bitbucket, Vercel sẽ tự động build và deploy phiên bản mới. Quá trình này đảm bảo ứng dụng luôn cập nhật và giúp bạn dễ dàng kiểm soát.
• Miễn phí cho dự án cá nhân: Vercel cung cấp gói miễn phí đủ cho các dự án nhỏ, thử nghiệm ý tưởng hoặc xây dựng sản phẩm MVP, giúp bạn bắt đầu nhanh chóng mà không lo lắng về chi phí.
• Tự động hoá: Bạn không cần quản lý server, không cần thiết lập Nginx hay Apache, không phải tự cài đặt SSL. Tất cả các tác vụ liên quan đến bảo trì, bảo mật, và tối ưu hạ tầng đều do Vercel lo liệu.
• Hỗ trợ đa ngôn ngữ và framework: Vercel tương thích tốt với Next.js, React, Vue, Svelte, Nuxt và nhiều framework phổ biến khác. Bạn có thể linh hoạt lựa chọn công nghệ phù hợp với dự án.
• Quản lý nhóm và tích hợp công cụ: Vercel cho phép cộng tác hiệu quả giữa các thành viên trong nhóm, dễ dàng cấu hình, tích hợp với nhiều công cụ hỗ trợ phát triển và giám sát khác, tối ưu hoá quy trình làm việc và nâng cao năng suất.

3. Các tính năng nổi bật của Vercel

3.1 Serverless Functions

Serverless functions là các đoạn code ngắn (snippet) chạy khi có sự kiện kích hoạt, thay vì phải duy trì server riêng biệt liên tục hoạt động. Chúng giúp bạn giải quyết nhiều tác vụ khác nhau như: xử lý lưu lượng truy cập web, xử lý thanh toán, hoặc gửi thông báo mà không cần tốn công sức triển khai.

• Thay vì phải thiết lập server, cài đặt hệ điều hành, hoặc quản lý phần mềm trung gian (middleware), bạn chỉ cần viết code và push lên repository. Vercel sẽ tự động build và triển khai functions đó cho bạn.
• Bạn có thể sử dụng JavaScript, TypeScript, hoặc nhiều ngôn ngữ khác để viết serverless functions. Không bị ràng buộc bởi một stack công nghệ cố định, bạn có quyền lựa chọn công cụ phù hợp nhất với dự án.
• Serverless functions không chỉ thực thi các tác vụ đơn giản. Nhờ khả năng tùy chỉnh linh hoạt, bạn có thể ghép nối nhiều functions để tạo thành chuỗi xử lý phức tạp (workflows), tự động hoá quá trình và tích hợp với các dịch vụ bên thứ ba. Ví dụ, bạn có thể xử lý dữ liệu đầu vào, gọi API khác để phân tích, sau đó trả kết quả về cho người dùng hoặc lưu trữ vào hệ thống.
• Khác với mô hình server truyền thống, bạn chỉ trả tiền cho thời gian và tài nguyên thực tế sử dụng. Khi không có request gửi tới hàm, bạn không tốn chi phí duy trì server, rất hữu ích cho các dự án nhỏ, MVP (Minimal Viable Product), hoặc các tính năng chỉ cần hoạt động khi có sự kiện, giúp tiết kiệm đáng kể chi phí vận hành.

Nhờ việc kết hợp Vercel cùng serverless functions, bạn không cần tốn thời gian cấu hình server, SSL, hay chứng chỉ bảo mật. Hạ tầng đã được Vercel xử lý. Bạn chỉ tập trung vào viết code, logic nghiệp vụ và trải nghiệm người dùng.

3.2 Preview Deployments

Mỗi lần bạn tạo một pull request hoặc push code lên branch mới, Vercel sẽ tự động tạo một bản deploy preview.

Ví dụ như:

• Bạn tạo một new branch với tên feature/new-ui và push lên GitHub.
• Vercel sẽ tự động deploy phiên bản của nhánh này tại một URL riêng, ví dụ: https://my-vercel-app-git-feature-new-ui-your-username.vercel.app.
• Bạn có thể share URL này với team hoặc khách hàng để họ có thể xem trước các thay đổi.

3.3 Rollbacks

Nếu bạn phát hiện lỗi sau khi deploy, Vercel cho phép bạn back lại version trước đó chỉ với vài thao tác click chuột đơn giản. Thực hiện như sau:

1. Trong dashboard của dự án, chọn tab "Deployments".
2. Tìm version mà bạn muốn back lại.
3. Nhấn vào nút "Rollback".

3.4 Sử dụng Alias cho URL

Bạn có thể tạo alias cho các bản deploy để dễ dàng truy cập và quản lý.

1. Trong tab "Deployments", chọn bản deploy mà bạn muốn.
2. Nhấn chọn "Aliases" và thêm alias mong muốn.

3.5 Thiết lập Redirects và Rewrites

Trong Next.js, bạn có thể thiết lập trong file next.config.js.

// next.config.js

module.exports = {
  async redirects() {
    return [
      {
        source: '/old-page',
        destination: '/new-page',
        permanent: true,
      },
    ];
  },
};

3.6 Bảo mật với Password Protection

Vercel cho phép bạn thiết lập mật khẩu cho các bản deploy preview.

1. Trong cài đặt dự án, chọn "Password Protection".
2. Thiết lập mật khẩu và áp dụng cho môi trường mong muốn.

4. So sánh Vervel với các nền tảng khác

• Nếu bạn đang dev ứng dụng Next.js và muốn tận dụng các tính năng SSR và serverless functions, Vercel sẽ là lựa chọn tốt nhất.
• Nếu bạn có một website tĩnh được xây dựng bằng Gatsby hoặc Hugo và muốn triển khai nhanh chóng, Netlify sẽ phù hợp.
• Nếu bạn cần triển khai một ứng dụng backend với Node.js hoặc Python và cần quản lý database, Heroku sẽ là lựa chọn hợp lý.

5. Hướng dẫn sử dụng, deploy dự án lên Vercel

B1: Đầu tiên, bạn cần truy cập vào trang chủ, đăng ký tài khoản Vercel hoàn toàn miễn phí nha. Bạn cũng có thể đăng ký bằng tài khoản GitHub, GitLab, Bitbucket,... Cá nhân mình sẽ sử dụng GitHub.

B2: Hãy đảm bảo rằng dự án của bạn đã được push lên một trong các dịch vụ Git như GitHub. Nếu chưa, bạn hãy tạo một repository và push code lên nhé!

Giả sử bạn có một ứng dụng Next.js đơn giản như sau:

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>Chào mừng bạn đến với website của tôi!</h1>
    </div>
  );
}

B3: Kết nối Vercel với repository của bạn

Sau khi đăng nhập vào Vercel, bạn nhấn vào "Add Project". Vercel sẽ yêu cầu bạn kết nối với tài khoản Git của bạn để truy cập các repository.

Chọn repository "my-vercel-app" mà bạn vừa tạo.

Nhấn "Import" để tiếp tục.

B4: Cấu hình dự án trên Vercel

Khi chọn repository, Vercel sẽ tự động nhận diện framework mà bạn đang sử dụng.

Kiểm tra các thiết lập:

• Framework Preset: đảm bảo là Next.js.
• Root Directory: nếu dự án của bạn nằm trong thư mục con, thì bạn phải chỉ định đường dẫn.
• Build Command: default là npm run build.
• Output Directory: default là .next.

B5: Thêm biến môi trường (.env) nếu trong dự án bạn cần

Nếu dự án của bạn sử dụng biến môi trường, bạn có thể thêm vào phần "Environment Variables".

Giả sử mình có biến môi trường tên là HOST_API

// pages/index.js

export default function Home() {
  return (
    <div>
      <h1>API Key của bạn là: {process.env.HOST_API}</h1>
    </div>
  );
}

Thêm HOST_KEY vào Vercel:

1. Trong phần "Environment Variables", chọn "Add More".
2. Điền Name: HOST_KEY.
3. Điền Value: your-api-key.

Nhấn "Deploy" để bắt đầu quá trình deploy.

B6: Quản lý domain

Nếu bạn muốn sử dụng domain riêng, bạn có thể thêm vào trong phần "Domains", hoặc mua domains của dự án trên Vercel.

1. Trong dashboard của dự án, chọn tab "Domains".
2. Nhấn "Add" và nhập domain của bạn, ví dụ: www.yourdomain.com.
3. Vercel sẽ hướng dẫn bạn thêm các bản DNS.

• Thêm bản ghi A trỏ đến địa chỉ IP của Vercel nếu được yêu cầu.
• Thêm bản ghi CNAME trỏ đến cname.vercel-dns.com.
• Sau khi cấu hình DNS, quay lại Vercel và chọn "Verify".

6. Một vài lưu ý khi sử dụng Vercel

Trước khi lựa chọn Vercel cho dự án, bạn cần phải xem xét một số hạn chế và yêu cầu có thể ảnh hưởng đến quá trình phát triển:

• Vercel chủ yếu phù hợp để triển khai các ứng dụng tĩnh hoặc frontend. Dịch vụ này không hỗ trợ backend động hay cơ sở dữ liệu tùy chỉnh. Nếu bạn cần một giải pháp "All in one", vừa xử lý logic phía server, vừa quản lý dữ liệu, thì Vercel không phải là sự lựa chọn hợp lý. Lúc này bạn có thể cân nhắc AWS.
• Để khai thác tối đa những tính năng mà Vercel mang lại, bạn cần am hiểu về các công nghệ mới. Nếu bạn là người mới chưa có kinh nghiệm có thể gặp khó khăn trong việc tối ưu hoá quy trình triển khai cũng như tích hợp với hạ tầng hiện có.
• Mặc dù, Vercel giúp việc triển khai front-end nhanh chóng, bạn vẫn cần lưu trữ source code ở nơi khác (như là GitHub) và có thể phải kết hợp với các dịch vụ backend, database, hoặc CDN riêng. Có thể sẽ làm tăng độ phức tạp và đòi hỏi thêm nhiều thiết lập thủ công khác.
• Nếu bạn đang tìm kiếm giải pháp giảm thiểu tối đa công việc quản trị, cấu hình phức tạp, hay mong muốn quy trình tự động hoá hoàn toàn, Vercel có thể không đáp ứng đầy đủ.

Vercel phù hợp nhất với dev nhiều năm kinh nghiệm, sẵn sàng custom và kết hợp nhiều services khác nhau để đạt được kiến trúc mong muốn.

7. Vercel Pricing

Trước khi lựa chọn Vercel, bạn cũng cần xem xét về chi phí và các tính năng tương ứng với từng gói. Vercel cung cấp nhiều lựa chọn, từ miễn phí cho đến gói enterprise, đáp ứng đa dạng nhu cầu của người dùng.

7.1 Hobby (Miễn phí)

Phù hợp với các dự án cá nhân, portfolio, hoặc cho các giai đoạn thử nghiệm ý tưởng.

Hạn mức tài nguyên:

• Băng thông: 100GB/tháng
• Edge Middleware: 1.000.000 lần
• Thời gian tính toán hàm serverless: 100GB-giờ
• Giới hạn thời gian chạy serverless: 10 giây/hàm
• Thời gian build: 6.000 phút
• Tối ưu hoá hình ảnh trong quá trình build: 1.000 ảnh

Cá nhân mình đánh giá thì gói Hobby rất hào phóng cho các lập trình viên, cho phép bạn triển khai ứng dụng đơn giản, thử nghiệm mà không tốn chi phí.

7.2 Pro ($20/người/tháng)

Phù hợp với các team dev nhỏ, website thương mại, hoặc dự án cần tài nguyên rộng hơn so với gói Hobby.

Hạn mức tài nguyên:

• Băng thông: 1TB/tháng
• Sau khi vượt 1TB, chi phí phát sinh: $40 cho mỗi 100GB
• Edge middleware: 1.000.000 lần
• Thời gian tính toán hàm serverless: 1.000GB-giờ
• Giới hạn thời gian chạy serverless: 60 giây/hàm
• Thời gian build: 24.000 phút
• Tối ưu hoá hình ảnh trong quá trình build: 5.000 ảnh

Bạn có thể mua thêm build concurrency (nghĩa là cho phép build đồng thời) với giá $50 cho mỗi luồng.

Cá nhân mình đánh giá rằng với gói Pro phù hợp với các startup, doanh nghiệp nhỏ. Bạn có băng thông lớn hơn, thời gian chạy serverless dài hơn, và khả năng xử lý nhiều ảnh hơn.

7.3 Enterprise (liên hệ Vercel để có báo giá)

Phù hợp với công ty lớn hoặc dự án quy mô doanh nghiệp, yêu cầu tài nguyên linh hoạt và tuỳ biến cao.

• Toàn bộ hạn mức đều có thể custom, thương lượng trực tiếp với Vercel.
• Giới hạn thời gian chạy serverless tăng lên đến 900 giây/hàm.

Mình thấy rằng với gói Enterprise dành cho các tổ chức cần hạ tầng vững chắc, đảm bảo hiệu suất cao, hỗ trợ kỹ thuật chuyên sâu, và linh hoạt điều chỉnh tài nguyên theo yêu cầu đặc thù.

8. Kết luận

Qua bài viết này, hy vọng bạn đã có cái nhìn tổng quan về Vercel và cách sử dụng nó để deploy dự án của mình. Vercel không chỉ giúp đơn giản hóa quá trình triển khai mà còn cung cấp nhiều tính năng mạnh mẽ để tối ưu hóa ứng dụng của bạn.

Nếu bạn đang tìm kiếm một giải pháp nhanh chóng, hiệu quả và hiện đại cho việc deploy ứng dụng web, hãy thử trải nghiệm Vercel. Mình tin rằng nó sẽ trở thành một phần quan trọng trong quy trình phát triển của bạn.

Các bài viết liên quan:

• Promise là gì? Hướng dẫn sử dụng Promise trong dự án React
• Hướng dẫn tích hợp Redux và React Query trong dự án React Vite
• React Toastify là gì? Hướng dẫn sử dụng Toast Notification với React Toastify
• Hướng dẫn sử dụng Zustand trong NextJS