Triển khai ứng dụng React miễn phí bằng Vercel

Giới thiệu

Bạn đã bao giờ nghĩ đến việc cung cấp các dự án của mình thông qua một URL trực tiếp mà không phải trải qua sự căng thẳng của các nhà cung cấp dịch vụ lưu trữ?

Trước đây, trước khi xuất hiện các nền tảng đám mây như Vercel, việc lưu trữ chỉ được thực hiện bởi các nhà cung cấp dịch vụ lưu trữ (ví dụ: GoDaddy) yêu cầu bạn tải lên các tài sản tĩnh của mình (như thư mục xây dựng dự án) mỗi khi bạn thực hiện thay đổi. Quá trình tải lên này được thực hiện bằng phần mềm FTP hoặc một số loại hệ thống như cPanel, điều này có thể trở nên rất căng thẳng và kỹ thuật.

Ngày nay với sự xuất hiện của GitHub, các nhà phát triển có quyền truy cập vào các nền tảng đám mây như Vercel, giúp triển khai dễ dàng.

Vercel là một nền tảng đám mây không máy chủ cho phép các nhà phát triển (về cơ bản là các nhà phát triển giao diện người dùng) lưu trữ các trang web và dịch vụ trực tuyến khởi chạy ngay lập tức, phát triển tự động và không yêu cầu giám sát, tất cả với cấu hình tối thiểu / không. Vercel là một lựa chọn hoàn hảo để triển khai các ứng dụng React của bạn một cách dễ dàng, cung cấp các công cụ toàn diện để xây dựng các trang web và ứng dụng hiệu suất cao.

Tại sao sử dụng Vercel?

  • Vercel cung cấp cho bạn các miền miễn phí (chứa hậu tố vercel.app) để triển khai mã của bạn trên máy chủ trực tiếp. Nó cũng cho phép bạn sử dụng miền cá nhân / duy nhất của riêng bạn
  • Vercel hỗ trợ triển khai tự động, có nghĩa là bất kỳ khi nào bạn đẩy các thay đổi vào nhánh sản xuất của kho lưu trữ của mình (chính hoặc chính), Vercel sẽ tự động phát hiện và triển khai chúng đến máy chủ.
  • Và nhiều hơn nữa…

Bắt đầu

Đối với hướng dẫn này, chúng tôi sẽ sử dụng ứng dụng tạo báo giá ngẫu nhiên nhận được các trích dẫn ngẫu nhiên từ một API.

Trước khi bắt đầu, chúng ta hãy xem xét một số điều kiện tiên quyết cần thiết để sử dụng Vercel:

  • Có tài khoản với bất kỳ nhà cung cấp Git nào (GitHub, GitLab hoặc Bitbucket)
  • npm (đi kèm với Nút) hoặc là Sợi
  • Hiểu biết cơ bản về cách sử dụng phần cuối

Đẩy mã của bạn lên GitHub

Để bạn có thể triển khai các ứng dụng / dự án của mình trên Vercel, bạn cần đẩy dự án của mình đến bất kỳ nhà cung cấp Git nào.

Đối với hướng dẫn này, tôi sẽ sử dụng GitHub thông qua thiết bị đầu cuối để đẩy ứng dụng React của chúng tôi.

Điều đầu tiên, hãy tạo một kho lưu trữ trên GitHub:

Tạo một kho lưu trữ mới trong Vercel

Sau đó, đảm bảo bạn điền các thông tin cần thiết và nhấp vào Tạo kho lưu trữ:

Tạo một kho lưu trữ mới trong Vercel

Quay lại terminal, hãy bắt đầu bằng cách sắp xếp tất cả các tệp của chúng tôi để chúng tôi có thể cam kết chúng vào kho lưu trữ, sau đó tạo một nhánh mới main bằng cách sử dụng các lệnh sau:

git init
git add .
git commit -m "first commit"
git branch -M main

Khi việc này được thực hiện xong, bây giờ chúng ta có thể đẩy đến kho lưu trữ từ xa đã tạo bằng các lệnh sau:

git remote add origin https://github.com/olawanlejoel/random-quotes.git
git push -u origin main

NB, thay thế URL từ xa GitHub bằng URL của bạn.

Khi bạn làm mới kho lưu trữ của mình, mã của bạn sẽ hiển thị!

Nhập mã mới vào kho lưu trữ Vercel
Nhập mã mới vào Kho lưu trữ Vercel

Tiếp tục, có khoảng bốn cách để triển khai Vercel, nhưng chúng tôi sẽ chỉ xem xét hai phương pháp chính (phương pháp này hoạt động với mọi khung công tác khác).

Hãy cùng khám phá cả hai phương pháp, đó là triển khai thủ công (Vercel cho Git) và triển khai thiết bị đầu cuối thông qua Vercel CLI. Cuối cùng, chúng tôi sẽ kết luận cái nào là tốt nhất.

Triển khai với Vercel CLI

Bước đầu tiên này sẽ là thăm https://vercel.com/ và nhấp vào Đăng ký ở góc trên bên phải. Bạn có thể đăng ký bằng GitHub, GitLab hoặc Bitbucket:

Đăng ký Vercel

Sau khi thành công, trang tổng quan của bạn sẽ trông như thế này:

Bảng điều khiển Vercel

Bước tiếp theo sẽ là cài đặt Vercel CLI. Chúng tôi sẽ chỉ sử dụng các lệnh cần thiết để đẩy dự án của mình lên React cho hướng dẫn này. Bạn có thể kiểm tra của họ Tài liệu CLI để biết thêm các lệnh và chức năng của chúng.

Để cài đặt Vercel CLI trên toàn cầu, bạn sẽ chạy lệnh bên dưới trên thiết bị đầu cuối của mình:

npm i -g vercel

NB, to xác nhận nếu nó được cài đặt thành công, bạn có thể chạy vercel--version trên thiết bị đầu cuối của bạn.

Khi nó đã được cài đặt thành công, bước tiếp theo sẽ là đẩy mã của chúng tôi. Vì đây là lần đầu tiên của chúng tôi, chúng tôi cần đăng nhập vào Vercel thông qua thiết bị đầu cuối của chúng tôi. Chạy lệnh bên dưới trên thiết bị đầu cuối của bạn:

vercel

Nó sẽ đưa ra những điều sau:

Thiết bị đầu cuối đăng nhập Vercel

Sử dụng các nút hướng của bạn để di chuyển lên hoặc xuống và nhấn vào nút enter để chọn tùy chọn ưa thích của bạn.

Thao tác này sẽ chuyển hướng bạn đến một tab trình duyệt nơi nó sẽ hiển thị thành công hoặc không thành công.

NB, đảm bảo bạn đăng nhập bằng tài khoản bạn đã sử dụng để tạo tài khoản Vercel trước đó.

Bước tiếp theo sẽ là quay lại thiết bị đầu cuối và tiếp tục những gì bạn đã bắt đầu. 😄 Bằng cách trả lời các câu hỏi, điều đầu tiên sẽ là xác nhận rằng đây là dự án bạn muốn triển khai:

? Set up and deploy “path to your project”? [Y/n] y

Câu hỏi tiếp theo sẽ là xác nhận tài khoản nào sẽ triển khai ứng dụng của bạn:

? Which scope do you want to deploy to? Your Vercel Account

NB, điều này sẽ cung cấp một tùy chọn mặc định; chỉ cần nhấn Enter để tiếp tục.

Tiếp tục, bạn sẽ được hỏi xem bạn có muốn liên kết điều này với dự án hiện có hay không. Chỉ loại N:

? Link to existing project? [y/N] n

Bước tiếp theo là đặt tên cho dự án của bạn:

? What’s your project’s name? project-name

Bây giờ bạn sẽ được nhắc chỉ định đường dẫn. Điều này sẽ sử dụng tùy chọn mặc định ./ vì chúng tôi đã có trong thư mục dự án:

? In which directory is your code located? ./

Cuối cùng, một tính năng tuyệt vời mà CLI có là tự động phát hiện khung công tác, cho phép nó phát hiện khung công tác bạn đang sử dụng và đưa ra các cài đặt dự án mặc định cho phù hợp. Điêu nay bao gôm Xây dựng lệnh, Thư mục đầu ra, và Bộ chỉ huy phát triển.

Điều này đơn giản có nghĩa là nó sẽ tự động phát hiện xem dự án của bạn đã được khởi tạo bằng cách sử dụng create-react-app và định cấu hình các cài đặt cho phù hợp. Nếu không, bạn sẽ được yêu cầu đặt chúng:

Auto-detected Project Settings (Create React App):
- Build Command: `npm run build` or `react-scripts build`
- Output Directory: build
- Development Command: react-scripts start

Câu hỏi cuối cùng sẽ là xác nhận xem bạn có muốn ghi đè cài đặt hay không. Chỉ loại n:

? Want to override the settings? [y/N] n

Hurray, dự án của bạn được triển khai thành công! Dưới đây là tóm tắt về những gì nó trông như thế nào:

Dự án đã triển khai tại nhà ga Vercel

Khi điều này thành công, Vercel sẽ tự động sao chép liên kết sản xuất của bạn vào khay nhớ tạm. Truy cập trình duyệt của bạn và dán liên kết sản xuất hoặc ctrl + click liên kết trong thiết bị đầu cuối của bạn.

Dán một liên kết sản xuất trong thiết bị đầu cuối Vercel

Triển khai với Vercel theo cách thủ công

Bây giờ chúng ta hãy xem xét một phương pháp triển khai khác. Phương pháp này thích hợp cho những cá nhân không quen thuộc với thiết bị đầu cuối và thích thực hiện các triển khai của họ theo cách thủ công.

Bước đầu tiên sẽ là truy cập trang tổng quan của bạn và bấm vào Dự án mới.

Tạo một dự án mới trên bảng điều khiển Vercel

Điều này sẽ chuyển hướng bạn đến một trang mà bạn có thể tạo một dự án. Việc tiếp theo là nhấp vào thanh tìm kiếm để Thêm không gian tên GitHub.

Thêm không gian tên GitHub

Điều này sẽ bật lên một trang ủy quyền từ GitHub. Đảm bảo bạn nhấp vào tài khoản bạn muốn triển khai từ đó (nó có thể là tài khoản cá nhân hoặc tài khoản tổ chức của bạn). Sau đó, nó sẽ yêu cầu bạn cài đặt Vercel.

Cài đặt Vercel

NB, bạn sẽ được yêu cầu xác nhận đó là tài khoản của mình bằng cách nhập mật khẩu GitHub của bạn.

Sau khi thành công, tất cả các kho lưu trữ GitHub của bạn sẽ xuất hiện, bước tiếp theo sẽ là chọn kho lưu trữ bạn muốn nhập và triển khai.

Chọn kho lưu trữ để triển khai trong Vercel

Nhập kho lưu trữ và sau đó điều này sẽ xuất hiện:

Định cấu hình dự án Vercel của bạn trước khi triển khai

NB, Vercel tự động phát hiện cài đặt trước khung của bạn.

Bây giờ bạn có thể nhấp vào Triển khai cái nút. Điều này sẽ bắt đầu triển khai dự án của bạn bằng cách chạy các bản dựng, kiểm tra và cuối cùng là gán một miền.

Gán tên miền cho dự án đã triển khai của bạn

Bạn có thể nhấp vào Đi đến bảng điều khiển để xem chi tiết về ứng dụng đã triển khai của chúng tôi, chẳng hạn như tên miền và thông tin triển khai khác.

So sánh cả hai phương pháp triển khai

Cả hai phương pháp đều thực hiện các chức năng giống nhau nhưng thông qua các phương tiện / phương thức khác nhau. Việc chọn cái nào là tốt nhất sẽ dựa trên sở thích của riêng bạn với tư cách là nhà phát triển.

  • Vercel CLI thực hiện tất cả công việc của nó trên thiết bị đầu cuối, có nghĩa là bạn sẽ không cần phải trải qua căng thẳng của việc điều hướng không cần thiết
  • Trong khi các phương pháp khác khá thú vị, tất cả những gì bạn cần làm là điều hướng qua bảng điều khiển Vercel

Hãy cho tôi biết phương pháp nào bạn nghĩ là tốt nhất trong phần bình luận và tại sao bạn nghĩ nó tốt nhất, nhưng đối với tôi, tôi luôn chọn Vercel CLI vì nó giúp việc triển khai dễ dàng hơn rất nhiều và không làm tôi mất IDE. 😋

Sự kết luận

Trong bài viết này, chúng ta đã có thể thấy cách triển khai một ứng dụng React cho Vercel. Chúng tôi đã thấy hai phương pháp chính và cách chúng hoạt động. Bạn có thể xem các tài nguyên sau để tìm hiểu thêm về các triển khai và một số tính năng khác mà Vercel cung cấp cho bạn:

Thanks for Reading

Enjoyed this post? Share it with your networks.

Get more stuff

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

Thank you for subscribing.

Something went wrong.

Leave a Feedback!