Cách deploy dự án ReactJS đơn giản với Heroku và Github

Mở đầu Trong bài này mình sẽ hướng dẫn cách deploy dự án ReactJS lên Heroku chỉ với 11 bước đơn giản. Bạn cần deploy một dự án ReactJS hay NodeJS vừa hoàn thành cho nhà tuyển dụng xem, hay cần deploy để trình bày đồ án tốt nghiệp trước hội đồng trường mà không

Mở đầu

Trong bài này mình sẽ hướng dẫn cách deploy dự án ReactJS lên Heroku chỉ với 11 bước đơn giản.

Bạn cần deploy một dự án ReactJS hay NodeJS vừa hoàn thành cho nhà tuyển dụng xem, hay cần deploy để trình bày đồ án tốt nghiệp trước hội đồng trường mà không muốn sử dụng localhost hoặc đơn giản là cho bạn bè xem thành quả của mình thì đây là cách đơn giản để bạn deploy một dự án.

Các bước chuẩn bị

  1. Tạo tài khoản Heroku tại https://www.heroku.com/
  2. Đẩy code dự án của bạn lên Github

Bắt đầu

  1. Đăng nhập vào Heroku tại https://www.heroku.com/.
  2. Chọn New > Chọn Create new app để tạo mới một app.
  3. Nhập tên dự án ( ở đây mình nhập new-app-example-deploy ) .
  4. Chọn Create app để tạo app.
  5. Ở tab Deploy ta chọn Github làm phương thức deploy và nhập repo name của project vào phần search.
  6. Sau đó chọn Search để tìm repo và chọn Connect để kết nối đến sourse code của chúng ta.
  7. Ở phần Automatic deploy chúng ta chọn branch master hoặc main tùy vào dự án của bạn và chọn Enable Automatics Deploys, nghĩa là sau khi branch master thay đổi thì Heroku sẽ tự động deploy lại theo code mới nhất.
  8. Sau đó ta chuyển sang tab Setting.
  9. Ở mục Buildpacks ta chọn Add Buildpack sau đó paste https://github.com/mars/create-react-app-buildpack vào ô URL và chọn Save changes.
  10. Sau đó ta quay lại tab Deploy > tiến hành Deploy lần đầu.
  11. Cuối cùng hãy chọn View buildlog để xem quá trình deploy của bạn.

    Sau đó…

    Vậy là bạn đã hoàn thành quá trình Deploy một dự án ReactJS, giờ đây bạn có thể truy cập vào link trên để xem thành quả.

Lưu ý

Có thể xảy ra lỗi ở quá trình Deploy thường là không tìm thấy modules nào đó vì vậy hãy uninstall các thư viện trong devDependenciesinstall lại trong Dependencies.
Cảm ơn bạn đã đọc bài viết.
Chúc bạn thành công.

Nguồn: viblo.asia

Bài viết liên quan

Thay đổi Package Name của Android Studio dể dàng với plugin APR

Nếu bạn đang gặp khó khăn hoặc bế tắc trong việc thay đổi package name trong And

Lỗi không Update Meta_Value Khi thay thế hình ảnh cũ bằng hình ảnh mới trong WordPress

Mã dưới đây hoạt động tốt có 1 lỗi không update được postmeta ” meta_key=

Bài 1 – React Native DevOps các khái niệm và các cài đặt căn bản

Hướng dẫn setup jenkins agent để bắt đầu build mobile bằng jenkins cho devloper an t

Chuyển đổi từ monolith sang microservices qua ví dụ

1. Why microservices? Microservices là kiến trúc hệ thống phần mềm hướng dịch vụ,