3 cách để triển khai ứng dụng React trên Netlify

Đưa ứng dụng React của bạn đến với khán giả với nỗ lực tối thiểu bằng cách sử dụng các tính năng triển khai của Netlify.

React là một thư viện JavaScript phổ biến để xây dựng giao diện người dùng chức năng trong các ứng dụng web động. Có thể bạn đã dành nhiều giờ để gỡ lỗi mã React trong nỗ lực xây dựng Instagram hoặc Airbnb tiếp theo.

Bất kể bạn đang xây dựng cái gì, mục tiêu cuối cùng luôn là giới thiệu tác phẩm của bạn với thế giới. Đây là lúc các nền tảng lưu trữ như Netlify phát huy tác dụng. Họ cung cấp một bộ công cụ hợp lý hóa quy trình triển khai.

Hãy làm theo để tìm hiểu cách triển khai các ứng dụng React của bạn bằng các công cụ triển khai dễ sử dụng của Netlify.

Netlify là gì?

Netlify là một nền tảng phát triển dựa trên đám mây với các tính năng giúp lưu trữ và triển khai các ứng dụng trên web dễ dàng hơn rất nhiều. Nói một cách đơn giản, nó cung cấp một loạt các công cụ và dịch vụ hợp lý hóa và đơn giản hóa quy trình cho phép bạn triển khai và lưu trữ một ứng dụng web trong vòng vài giây.

Các tính năng chính của Netlify

Netlify có nhiều tính năng giúp đơn giản hóa quy trình triển khai.

• Nó cung cấp các tính năng kiểm soát phiên bản và quyền truy cập cần thiết để cho phép các nhóm phát triển cộng tác hiệu quả trong các dự án.
• Nó cung cấp các dịch vụ lưu trữ an toàn mà bạn có thể điều chỉnh cho phù hợp với nhu cầu của mình. Ngoài ra, nó cung cấp sao lưu tự động trong trường hợp mất dữ liệu.
• Nó tích hợp hoàn hảo với các dịch vụ phát triển đám mây phổ biến như GitHub, GitLab và Bitbucket.
• Nó cung cấp các tính năng giúp dễ dàng thiết lập và định cấu hình URL miền tùy chỉnh và chứng chỉ SSL cho ứng dụng của bạn.

Tạo ứng dụng Demo React

1. Để bắt đầu, trước tiên bạn cần tạo một ứng dụng React demo mà sau này bạn sẽ triển khai trên Netlify. Chạy lệnh bên dưới trên thiết bị đầu cuối của bạn để tạo ứng dụng React:

    npx create-react-app demo-react-netlify-app 

2. Tiếp theo, hãy chạy lệnh đầu cuối này để khởi động máy chủ phát triển:

    npm start 

   Tiếp tục và xem kết quả trong trình duyệt của bạn tại http://localhost:3000.

3. Cuối cùng, hãy chạy lệnh này để tạo phiên bản sẵn sàng sản xuất cho ứng dụng của bạn:

    npm run build 

   Lệnh này tạo các tệp sản xuất và nội dung cần thiết bên trong một thư mục mới trong thư mục gốc có tên là build. Thư mục bản dựng ghi lại phiên bản rút gọn của toàn bộ ứng dụng, chứa mọi thứ cần thiết để triển khai ứng dụng.

   

Triển khai ứng dụng React trên Netlify

Netlify cung cấp ba phương pháp mà bạn có thể sử dụng để triển khai ứng dụng React của mình. Bạn có thể:

• Nhập dự án của bạn từ máy chủ lưu trữ Git chẳng hạn như GitHub.
• Sử dụng Tính năng Kéo và Thả.
• Sử dụng công cụ dòng lệnh, CLI của Netlify.

Triển khai bằng tính năng nhập GitHub

1. Bắt đầu bằng cách tạo một kho lưu trữ trên GitHub để chứa các tệp dự án ứng dụng React của bạn. Ngoài ra, bạn cũng có thể lưu trữ các tệp dự án của mình trên bất kỳ nhà cung cấp Git được hỗ trợ nào khác, chẳng hạn như GitLab, Bitbucket hoặc Azure DevOps.
2. Tiếp theo, đăng ký một tài khoản trên Netlify. Khi bạn đăng ký, hãy điều hướng đến bảng điều khiển tài khoản của bạn và chọn trang web chuyển hướng.

   

3. bấm vào Nhập từ Git cái nút.

   

4. Chọn nền tảng nhà cung cấp Git ưa thích của bạn. Netlify sẽ nhắc bạn xác thực với nhà cung cấp Git của bạn để cấp cho nó quyền truy cập vào tài khoản và kho lưu trữ của bạn.

   

5. Khi bạn đã hoàn thành việc này, Netlify sẽ hiển thị danh sách các kho lưu trữ trên nhà cung cấp Git của bạn. Chọn kho lưu trữ dự án React mà ban đầu bạn đã đẩy tới nhà cung cấp Git của mình.

   

6. Sau khi chọn kho lưu trữ, bạn cần chỉ định cách Netlify sẽ xử lý quá trình triển khai. Thông thường, đối với các trang web tĩnh, bạn không phải thực hiện bất kỳ thay đổi nào, tuy nhiên, đối với các trang web động như ứng dụng React, bạn sẽ phải thiết lập cài đặt bản dựng. May mắn thay, Netlify theo mặc định tự động phát hiện khung được sử dụng để xây dựng ứng dụng và điền vào các trường có cài đặt bản dựng bắt buộc.

   

7. Cuối cùng, bấm vào Triển khai trang web để kết thúc quá trình.

   

Nhấp vào URL được cung cấp để xem ứng dụng trên trình duyệt của bạn. Nếu có URL miền tùy chỉnh, bạn có thể hướng dẫn Netlify sử dụng URL đó với trang web của mình bằng cách cập nhật URL từ cài đặt của trang web.

Triển khai bằng tính năng Kéo và Thả

Đây là phương pháp đơn giản nhất để triển khai ứng dụng React của bạn trên Netlify. Bạn chỉ cần kéo và thả thư mục bản dựng vào giao diện người dùng kéo và thả của Netlify.

1. Trên bảng điều khiển của Netlify, chọn Địa điểm chuyển hướng. Tiếp theo, bấm vào Thêm trang web mới và sau đó chọn Triển khai thủ công từ các tùy chọn trình đơn thả xuống.

   

2. Trong trang tính năng kéo và thả, hãy chọn thư mục chứa các tệp bản dựng React và thả nó vào giao diện người dùng này. Dự án sẽ ngay lập tức triển khai trên Netlify.

   

   Ngoài ra, bạn có thể bấm vào Duyệt để tải lên để chọn thư mục bản dựng của bạn từ hệ thống tệp.

Triển khai bằng giao diện dòng lệnh của Netlify

Sử dụng giao diện dòng lệnh (CLI) của Netlify, bạn có thể triển khai ứng dụng React của mình trực tiếp từ thiết bị đầu cuối. Ngoài ra, CLI của Netlify cho phép bạn có thể định cấu hình triển khai liên tục để khi bạn cam kết và đẩy các bản cập nhật mới vào kho lưu trữ Git của mình, chúng sẽ tự động được triển khai.

1. Chạy lệnh bên dưới trên thiết bị đầu cuối của bạn để cài đặt CLI của Netlify:

    npm install netlify-cli -g 

2. Bây giờ, hãy chạy lệnh bên dưới để triển khai ứng dụng của bạn. Đảm bảo rằng bạn đang ở trong thư mục làm việc của dự án trước khi triển khai.

    netlify deploy 

   CLI của Netlify sẽ nhắc bạn cho phép nó thực hiện các thay đổi đối với tài khoản của bạn. Sau khi bạn cấp quyền, hãy cung cấp tên của tài khoản nhóm mà bạn đã cung cấp khi đăng ký, sau đó chọn liên kết thư mục của ứng dụng với một trang web hiện có hay tạo và định cấu hình một trang web mới. Kết thúc bằng cách cung cấp tên trang web tùy chỉnh và tên thư mục bản dựng của bạn.

   

3. CLI sẽ triển khai phiên bản nháp của ứng dụng của bạn. Kiểm tra xem mọi thứ có hoạt động như mong đợi không.

   

4. Cuối cùng, hãy chạy lệnh bên dưới để triển khai ứng dụng của bạn vào sản xuất.

    netlify deploy  

So sánh ba phương pháp triển khai

Phương thức nhập GitHub là cách hiệu quả nhất để triển khai các ứng dụng sản xuất vì nó cho phép bạn liên kết trực tiếp kho lưu trữ Git của mình với Netlify và giữ cho mã của bạn đồng bộ với trang web hoặc ứng dụng trực tiếp của họ. Khi bạn cam kết và đẩy các thay đổi vào kho lưu trữ Git của mình, Netlify sẽ tự động cập nhật trang web.

Phương pháp kéo và thả đơn giản hơn để triển khai các trang web tĩnh vì nó không yêu cầu mã hóa hoặc thiết lập. Tuy nhiên, nó không cho phép cập nhật tự động khi bạn thay đổi kho lưu trữ của mình.

Phương pháp CLI là phương pháp toàn diện nhất vì nó cung cấp cho bạn toàn quyền kiểm soát quá trình triển khai và cho phép cấu hình tùy chỉnh. Phương pháp này phù hợp nhất nếu bạn đã hiểu rõ về Netlify và cảm thấy thoải mái khi làm việc với dòng lệnh.

Cả ba phương pháp đều hữu ích để triển khai ứng dụng cho Netlify. Cuối cùng, việc lựa chọn sử dụng cái nào sẽ phụ thuộc vào nhu cầu của từng dự án riêng lẻ.

Sử dụng Netlify để triển khai các ứng dụng khác

Netlify là một công cụ mạnh mẽ và linh hoạt mà bạn có thể sử dụng để triển khai các ứng dụng khác chỉ sử dụng React. Bạn có thể sử dụng nó để triển khai và lưu trữ các trang web tĩnh cũng như các ứng dụng động được xây dựng bằng các khung khác nhau như Angular.

Giao diện thân thiện với người dùng giúp dễ dàng định cấu hình, quản lý và triển khai các API của bạn.