Giới thiệu

Khi một nhà phát triển tạo một ứng dụng, bước tiếp theo là chia sẻ nó với bạn bè hoặc công chúng để mọi người có thể truy cập. Quá trình chuyển mã từ môi trường phát triển sang nền tảng lưu trữ nơi nó được phân phát cho người dùng cuối được gọi là triển khai.

Lưu trữ đã từng khá kém hiệu quả trước khi các nền tảng lưu trữ đám mây như Heroku xuất hiện. Nó chủ yếu được thực hiện bởi các nhà cung cấp dịch vụ lưu trữ, những người yêu cầu tải lên tất cả các nội dung tĩnh (xây dựng tệp được tạo bằng cách chạy npm run build) mỗi khi chúng tôi thực hiện thay đổi. Không có cách nào khác để tải lên các tệp tĩnh ngoài một số loại giao diện FTP (giao diện cục bộ hoặc trên máy chủ lưu trữ), điều này có thể khá căng thẳng và kỹ thuật.

Trong hướng dẫn này, chúng ta sẽ xem xét cách triển khai ứng dụng React cho Heroku bằng CLI (Giao diện dòng lệnh) thông qua Heroku Git. Ngoài ra, chúng tôi sẽ xem xét cách triển khai lại mã khi chúng tôi thực hiện một số thay đổi đối với ứng dụng của mình.

Heroku là gì và tại sao lại sử dụng nó?

Heroku là một nền tảng đám mây dựa trên vùng chứa cho phép các nhà phát triển dễ dàng triển khai, quản lý và mở rộng quy mô các ứng dụng hiện đại. Điều này cho phép các nhà phát triển tập trung vào công việc cốt lõi của họ - tạo ra các ứng dụng tuyệt vời làm hài lòng và thu hút người dùng. Nói cách khác, Heroku tăng năng suất của nhà phát triển bằng cách làm cho việc triển khai, mở rộng và quản lý ứng dụng trở nên đơn giản nhất có thể.

Có rất nhiều lý do tại sao chúng ta nên sử dụng Heroku:

• Hỗ trợ đa ngôn ngữ - ngay từ đầu, nền tảng Heroku hỗ trợ hơn tám ngôn ngữ, bao gồm Node, Java và Python.
• Hỗ trợ một số cơ sở dữ liệu và kho dữ liệu - Heroku cho phép các nhà phát triển lựa chọn từ nhiều cơ sở dữ liệu và kho dữ liệu khác nhau dựa trên các yêu cầu cụ thể của các ứng dụng riêng lẻ - Postgres SQL, MySQL, MongoDB, v.v.
• Ít tốn kém - Tạo và lưu trữ một trang web tĩnh sẽ giúp chúng ta tiết kiệm tiền về lâu dài.

Bắt đầu

Trong hướng dẫn này, chúng tôi sẽ triển khai ứng dụng tìm kiếm phim, là một ứng dụng React đơn giản dùng để tìm kiếm API cho phim. Trước khi chúng tôi bắt đầu, bạn nên đăng ký Heroku nếu bạn chưa có tài khoản, vì đây là nơi chúng tôi sẽ triển khai ứng dụng React của mình. Chúng ta có thể đi đến Heroku.com và đăng ký bằng cách nhấp vào nút đăng ký ở góc trên bên phải. Quy trình đăng ký gần như là tiêu chuẩn, vì vậy bạn sẽ không gặp bất kỳ khó khăn nào khi tạo tài khoản trên Heroku:

Khi bạn đã tạo tài khoản Heroku, chúng tôi có thể tiến hành triển khai thực tế ứng dụng của mình.

Lưu ý: Trước đây, có một tùy chọn để triển khai thông qua Tích hợp GitHub, nhưng tính năng đó đã bị thu hồi do vi phạm bảo mật. Cách tốt nhất để triển khai Heroku tính đến thời điểm hiện tại là thông qua Heroku Git, điều này xảy ra trong CLI của chúng tôi (Giao diện dòng lệnh).

Triển khai với Heroku Git

Heroku sử dụng Git hệ thống kiểm soát phiên bản để quản lý việc triển khai ứng dụng. Điều quan trọng cần lưu ý là chúng ta không cần phải là chuyên gia Git để triển khai ứng dụng React của mình cho Heroku, tất cả những gì chúng ta cần biết là một số nguyên tắc cơ bản, sẽ được đề cập trong hướng dẫn này.

Trước khi chúng ta bắt đầu

Như một cái tên Heroku Git ngụ ý, chúng tôi sẽ sử dụng Git, có nghĩa là chúng tôi cần phải cài đặt Git. Điều tương tự cũng áp dụng cho Heroku CLI. Nếu bạn chưa cài đặt hai thứ đó, bạn có thể làm theo hướng dẫn sau để hướng dẫn bạn trong quá trình cài đặt:

Sau khi cài đặt chúng thành công, chúng ta có thể tiến hành tạo một ứng dụng trên Heroku, ứng dụng React của chúng ta sẽ được triển khai sau này. Chúng tôi có thể tạo một ứng dụng trên Heroku theo hai cách - thông qua thiết bị đầu cuối (Lệnh CLI) hoặc theo cách thủ công trên Bảng điều khiển Heroku.

Lưu ý: Một quan niệm sai lầm phổ biến là Git và GitHub là những thứ giống nhau, nhưng thực tế không phải vậy! Git là hệ thống kiểm soát phiên bản được nhiều ứng dụng và dịch vụ sử dụng, bao gồm nhưng không giới hạn ở GitHub. Do đó, bạn không cần phải đẩy mã của mình lên GitHub, cũng như không có tài khoản GitHub để sử dụng Heroku.

Cách tạo ứng dụng Heroku theo cách thủ công

Trước tiên, hãy xem cách chúng ta có thể tạo một ứng dụng bằng cách sử dụng Bảng điều khiển Heroku. Bước đầu tiên là nhấp vào tạo ứng dụng mới nút:

Điều này sẽ chuyển hướng chúng tôi đến một trang mà chúng tôi cần điền thông tin về ứng dụng mà chúng tôi muốn tạo:

Lưu ý: Hãy chắc chắn rằng bạn Nhớ cái tên này của ứng dụng bạn đã tạo trên Heroku vì chúng tôi sẽ sớm kết nối kho lưu trữ cục bộ của mình với kho lưu trữ từ xa này.

Sau khi quá trình này hoàn tất, chúng tôi có thể bắt đầu triển khai ứng dụng của mình từ môi trường cục bộ sang Heroku. Tuy nhiên, trước khi xem xét cách triển khai ứng dụng, hãy xem xét một cách tiếp cận thay thế để tạo ứng dụng Heroku - sử dụng Heroku CLI.

Cách tạo ứng dụng Heroku qua CLI

Ngoài ra, bạn có thể tạo ứng dụng trên Heroku bằng CLI. Heroku đảm bảo điều này càng đơn giản càng tốt. Điều duy nhất bạn cần làm là chạy lệnh sau trong thiết bị đầu cuối bạn chọn (chỉ cần đảm bảo thay thế <app-name> với tên thực của ứng dụng của bạn):

$ heroku create -a <app-name>

Lưu ý: Nếu bạn chạy lệnh này từ thư mục gốc của ứng dụng, kho lưu trữ Heroku Git trống sẽ tự động được đặt làm điều khiển từ xa cho kho lưu trữ cục bộ của chúng tôi.

Cách đẩy mã sang Heroku

Bước đầu tiên trước khi đẩy mã sang Heroku sẽ là đặt bạn vào thư mục gốc của ứng dụng của bạn (trong thiết bị đầu cuối). Sau đó, sử dụng heroku login lệnh đăng nhập vào bảng điều khiển Heroku. Sau đó, bạn cần chấp nhận các điều khoản và điều kiện của Heroku và cuối cùng, đăng nhập vào Heroku bằng thông tin đăng nhập của bạn:

Sau đó, bạn sẽ được đưa trở lại thiết bị đầu cuối, vì vậy bạn có thể tiếp tục quá trình triển khai lên Heroku. Bây giờ, bạn nên khởi tạo kho lưu trữ:

$ git init

Và sau đó đăng ký ứng dụng chúng tôi đã tạo trước đó trên Heroku làm kho lưu trữ từ xa cho ứng dụng cục bộ mà chúng tôi đã khởi tạo ở bước trước:

$ heroku git:remote -a <app-name>

Lưu ý: Đảm bảo thay thế <app-name> với tên của ứng dụng chúng tôi đã tạo trên Heroku trước đó (ví dụ: movies-search-app).

Bây giờ chúng ta có thể tiến hành triển khai ứng dụng của mình. Tuy nhiên, vì chúng ta cần triển khai một ứng dụng React, trước tiên chúng ta cần thêm gói xây dựng React:

$ heroku buildpacks:set mars/create-react-app

Sau khi hoàn thành, bước tiếp theo là thực sự đẩy mã của chúng tôi vào kho lưu trữ từ xa mà chúng tôi đã tạo trên Heroku. Bước đầu tiên là phân loại tệp của chúng tôi, cam kết và cuối cùng đẩy chúng vào kho lưu trữ từ xa:

$ git commit -am "my commit"
$ git push heroku main

Lưu ý: Giả sử chúng ta muốn chuyển chi nhánh của mình từ main đến development. Chúng ta có thể chạy lệnh sau: git checkout -b development.

Khi chúng tôi đã đẩy thành công lên Heroku, chúng tôi có thể mở ứng dụng mới được triển khai trong trình duyệt của mình:

$ heroku open

Cách cập nhật quá trình triển khai của chúng tôi

Câu hỏi tiếp theo mà bạn có thể có là làm thế nào để triển khai lại ứng dụng sau khi chúng tôi thực hiện các thay đổi đối với nó. Điều này hoạt động tương tự như cách nó hoạt động trong bất kỳ nền tảng dựa trên Git nào - tất cả những gì chúng ta phải làm là phân loại tệp, cam kết và sau đó đẩy mã sang Heroku:

$ git commit -am "added changes"
$ git push heroku main

Heroku tự động chọn thay đổi này và áp dụng nó vào ứng dụng trực tiếp.

Kết luận

Heroku có thể là một công cụ khá hữu ích để triển khai ứng dụng React của bạn. Trong bài viết này, chúng tôi đã giới thiệu cho các bạn cách triển khai ứng dụng React cho Heroku bằng Heroku Git. Ngoài ra, chúng tôi đã xem xét một số lệnh Git cơ bản mà bạn cần khi làm việc với Heroku Git và cuối cùng, chúng tôi đã thảo luận về cách triển khai lại một ứng dụng sau khi bạn thực hiện các thay đổi đối với nó.