Hướng dẫn chi tiết đẩy ứng dụng ReactJS lên Heroku

Hướng dẫn chi tiết đẩy ứng dụng ReactJS lên Heroku là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Hướng dẫn chi tiết đẩy ứng dụng ReactJS lên Heroku sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và ReactJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Trong bài này mình sẽ hướng dẫn cách đẩy ứng dụng ReactJS lên Heroku, cài đặt thêm các phần mềm cần thiết trước khi đẩy ứng dụng lên Heroky.

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ nhiều ngôn ngữ, giúp lập trình viên có thể xây dựng, triển khai, quản lý và mở rộng ứng dụng của mình. Ưu điểm của nó là không phải quan tâm đến việc vận hành máy chủ hay phần cứng. Dưới đây là các bước để deploy ứng dụng ReactJS lên Heroku đơn giản nhất.

1. Cài đặt phần mềm hỗ trợ đưa ứng dụng lên Heroku

Heroku hỗ trợ rất nhiều cách thức để thực hiện deploy một ứng dụng. Bài viết này sẽ sử dụng Heroku Git bởi nó là cách đơn giản và quen thuộc nhất. Chúng ta cần cài đặt 2 phần mền chính đó là Git và Heroku CLI.

Window và MacOS

Đối với Window và MacOS thì các bước cài đặt rất đơn giản chỉ cần download trên trang chủ và cài đặt.

  • Download Git
  • Download Heroku CLI

Các bước cài đặt giống như các phần mềm thông thường, sau khi cài đặt tiến hành restart máy và thực hiện các bước tiếp theo.

Ubuntu

Đối với ubuntu thì sẽ chỉ cần cài đặt bằng các câu lệnh khá đơn giản.

  sudo apt install git
sudo snap install --classic heroku 

Chúng ta có thể tham khảo thêm bài viết về Git căn bản để có thể hiểu rõ hơn vì hướng dẫn này sử dụng git trong quá trình deploy ứng dụng.

2. Đưa ứng dụng ReactJS lên Heroku

Sau khi cài đặt các phần mềm cần thiết, chúng ta sẽ tiến hành tạo tài khoản Heroku, truy cập vào dashboard và tạo một app mới tại địa chỉ https://dashboard.heroku.com/new-app . App name sẽ là subdomain của bạn. URL sẽ có dạng là [appname].herokuapp.com.

Hướng dẫn chi tiết đẩy ứng dụng ReactJS lên Heroku

Ngoài ra Heroku còn cho phép tùy chọn vị trí của máy chủ. Sau khi đã tùy chọn các bước, tiến hành click vào Create App để hoàn tất.

Thêm Buildpacks

Đối với app ReactJS được khởi tạo bởi câu lệnh create-react-app thì trước khi đẩy source code lên app thì chúng ta cần phải thêm buildpacks cho nó . Ở phần Settings -> Buildpacks -> Add Buildpacks và điền vào đường dẫn buildpacks.

  https://github.com/mars/create-react-app-buildpack.git 

Buildpacks sẽ chứa các câu lệnh để biên dịch ứng dụng, nó sẽ được khởi chạy mỗi khi ứng dụng được thiết lập.

Đẩy source code lên Heroku

Việc đầu tiên, chúng ta cần phải đăng nhập tài khoản heroku trên máy bằng terminal, sử dụng dòng lệnh.

  heroku login 

Sau đó, điền thông tin đăng nhập tài khoản heroku vừa dùng để khởi tạo lúc đầu vào.Khi đăng nhập thành công , chúng ta sẽ tiến hành deploy dự án lên. Giả sử dự án ReactJS cần deploy nằm ở trong thư mục Hoidapcode-react. Mở terminal và truy cập vào thư mục Hoidapcode-react bằng câu lệnh.

  cd Hoidapcode-react 

Khởi tạo git và chỉ định remote tới app trên heroku.

 git init
heroku git:remote -a [ten-app] 

Tiếp theo, chúng ta sẽ deploy app lên heroku bằng cách push tới branch master của heroku.

git add *
git commit -a "first deploy"
git push heroku master 

Sau khi hoàn tất, heroku sẽ cài đặt ứng dụng ReactJS tự động.

Đợi quá trình cài đặt hoàn tất, ứng dụng sẽ đựơc chạy trên địa chỉ [ten-app].herokuapp.com.

Tinh chỉnh ứng dụng

Heroku cho phép tinh chỉnh cũng như theo dõi ứng dụng một cách đơn giản, sau đây là một vài chức năng mà hay dùng ở heroku.

Để theo dõi ứng dụng theo thời gian thực chúng ta dùng câu lệnh.

  heroku logs --tail 

Chỉnh sửa các biến môi trường của dự án ở phần Settings -> Config Vars, ở đây chúng ta có thể thêm, sủa, xóa các biến môi trường

Phiên bản miễn phí của Heroku chỉ sử dụng ở mục đích học tập, bởi khi ứng dụng không được truy cập trong một khoảng thời gian thì Heroku tạm thời offine ứng dụng cho tới khi có truy cập thì ứng dụng sẽ được khởi chạy trở lại. Mục đích chỉnh là để tiết kiệm tài nguyên hệ thống, đối với các ứng dụng trung bình trở lên thì chúng ta nên sử dụng cách khác để deploy ứng dụng của mình. Trên đây chúng ta đã cùng nhau đi tìm hiểu về cách để đẩy một ứng dụng Reactjs lên Heroku. Mong rằng bài viết sẽ giúp ích cho bạn !

Bài sau Bài tiếp

Hy vọng với bài viết về Hướng dẫn chi tiết đẩy ứng dụng ReactJS lên Heroku đã giải đáp giúp bạn phần nào về kiến thức lập trình ReactJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!