REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

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.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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à GitHeroku 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.

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.

deploy heroku freetuts 2 png

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 freetuts-react. Mở terminal và truy cập vào thư mục freetuts-react bằng câu lệnh.

cd freetuts-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.

deploy heroku freetuts png

Đợ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.

deploy heroku freetuts 1 png

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 !

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Giới thiệu Hooks trong React JS

Giới thiệu Hooks trong React JS

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Refs trong ReactJS

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong…

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Render với điều kiện trong ReactJS

Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Xử lý Form trong ReactJS

Xử lý Form trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các thao…

Top