Trong bài viết này, mình sẽ hướng dẫn cách triển khai ứng dụng ReactJS lên Heroku và cài đặt các phần mềm cần thiết trước khi tiến hành.
Đối với những bạn chưa biết, Heroku là một nền tảng đám mây hỗ trợ nhiều ngôn ngữ lập trình, cho phép lập trình viên xây dựng, triển khai, quản lý và mở rộng ứng dụng một cách dễ dàng. Một trong những ưu điểm lớn của Heroku là bạn không cần phải lo lắng về việc vận hành máy chủ hay phần cứng. Dưới đây là các bước đơn giản để deploy ứng dụng ReactJS lên Heroku.Triển khai ứng dụng ReactJS lên Heroku là một quy trình phổ biến giúp các nhà phát triển đưa ứng dụng web của họ lên Internet một cách dễ dàng và nhanh chóng. Heroku là một nền tảng đám mây dựa trên container (container-based cloud Platform as a Service – PaaS), hỗ trợ nhiều ngôn ngữ lập trình và cung cấp các công cụ cần thiết để quản lý, mở rộng và theo dõi ứng dụng. Trong bài viết này, chúng ta sẽ đi qua các bước chi tiết để đẩy ứng dụng ReactJS lên Heroku.
Bước 1: Chuẩn bị ứng dụng ReactJS
Trước khi triển khai, bạn cần có một ứng dụng ReactJS sẵn có. Nếu bạn chưa có ứng dụng, bạn có thể tạo một ứng dụng mẫu bằng cách sử dụng Create React App:
npx create-react-app my-app
cd my-app
Ứng dụng ReactJS này cần được xây dựng (build) thành một gói tĩnh sẵn sàng để triển khai. Để thực hiện điều này, bạn cần chạy lệnh build:
npm run build
Lệnh này sẽ tạo ra một thư mục build chứa tất cả các tệp tĩnh cần thiết để chạy ứng dụng của bạn.
Bước 2: Cài đặt Heroku CLI
Heroku CLI (Command Line Interface) là công cụ dòng lệnh giúp bạn dễ dàng quản lý và triển khai ứng dụng lên Heroku. Để cài đặt Heroku CLI, bạn có thể truy cập Heroku CLI downloads page và làm theo hướng dẫn cài đặt cho hệ điều hành của bạn.
Sau khi cài đặt, bạn cần đăng nhập vào tài khoản Heroku của mình bằng cách sử dụng lệnh:
heroku login
Lệnh này sẽ mở trình duyệt và yêu cầu bạn nhập thông tin tài khoản Heroku.
Bước 3: Khởi tạo Git Repository
Heroku sử dụng Git để quản lý phiên bản và triển khai mã nguồn. Do đó, bạn cần khởi tạo một Git repository trong thư mục ứng dụng của mình. Nếu ứng dụng của bạn chưa được khởi tạo Git, hãy chạy lệnh sau:
git init
Sau đó, thêm tất cả các tệp và commit chúng:
git add .
git commit -m "Initial commit"
Bước 4: Tạo Heroku App
Tiếp theo, bạn cần tạo một ứng dụng mới trên Heroku bằng cách sử dụng lệnh Heroku CLI:
heroku create my-app-name
Lệnh này sẽ tạo một ứng dụng mới trên Heroku và liên kết Git repository của bạn với ứng dụng này. my-app-name là tên ứng dụng bạn muốn đặt, nó phải là duy nhất trên Heroku. Nếu bạn không chỉ định tên, Heroku sẽ tự động tạo một tên ngẫu nhiên.
Bước 5: Cấu hình buildpack cho ReactJS
Heroku cần biết cách xây dựng và chạy ứng dụng ReactJS của bạn. Bạn cần thiết lập buildpack phù hợp cho ứng dụng ReactJS. Buildpack Node.js là buildpack cần thiết cho các ứng dụng ReactJS:
heroku buildpacks:set heroku/nodejs
Bước 6: Tạo một server đơn giản bằng Node.js (tùy chọn)
Mặc dù Heroku có thể phục vụ các tệp tĩnh trực tiếp, bạn có thể muốn tạo một server đơn giản bằng Node.js để phục vụ các tệp tĩnh từ thư mục build. Tạo một tệp server.js trong thư mục gốc của dự án với nội dung sau:
const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 3000;
app.use(express.static(path.join(__dirname, 'build')));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
Sau đó, bạn cần cài đặt express:
npm install express
Cập nhật tệp package.json để thêm script khởi động server:
"scripts": {
"start": "node server.js",
"build": "react-scripts build"
}
Bước 7: Deploy ứng dụng lên Heroku
Bây giờ bạn đã sẵn sàng để triển khai ứng dụng lên Heroku. Trước tiên, hãy đảm bảo tất cả các thay đổi đã được commit vào Git:
git add .
git commit -m "Prepare for deployment"
Sau đó, đẩy ứng dụng của bạn lên Heroku:
git push heroku master
Heroku sẽ tự động phát hiện loại ứng dụng, cài đặt các phụ thuộc và xây dựng ứng dụng của bạn. Sau khi triển khai hoàn tất, bạn có thể mở ứng dụng trong trình duyệt bằng lệnh:
heroku open
Bước 8: Quản lý ứng dụng trên Heroku
Heroku cung cấp một bảng điều khiển (dashboard) để quản lý ứng dụng của bạn. Bạn có thể truy cập bảng điều khiển này tại Heroku Dashboard. Tại đây, bạn có thể quản lý các cấu hình môi trường, giám sát ứng dụng, xem nhật ký và nhiều tính năng khác.
Bạn cũng có thể xem nhật ký của ứng dụng trực tiếp từ dòng lệnh bằng cách sử dụng lệnh:
heroku logs --tail
Bước 9: Thiết lập môi trường (tùy chọn)
Nếu ứng dụng của bạn cần sử dụng các biến môi trường (environment variables), bạn có thể thiết lập chúng trên Heroku bằng lệnh:
heroku config:set KEY=VALUE
Ví dụ, để thiết lập biến môi trường REACT_APP_API_URL, bạn có thể chạy:
heroku config:set REACT_APP_API_URL=https://api.example.com
Bạn có thể kiểm tra tất cả các biến môi trường đã thiết lập bằng lệnh:
heroku config
Kết luận
Triển khai ứng dụng ReactJS lên Heroku là một quá trình đơn giản nhưng rất hiệu quả. Với các bước hướng dẫn chi tiết từ chuẩn bị ứng dụng, cài đặt Heroku CLI, khởi tạo Git repository, tạo Heroku app, cấu hình buildpack, tạo server đơn giản bằng Node.js, đến việc deploy ứng dụng, bạn có thể dễ dàng đưa ứng dụng của mình lên Internet. Heroku không chỉ giúp bạn triển khai mà còn cung cấp các công cụ mạnh mẽ để quản lý, mở rộng và theo dõi ứng dụng. Việc nắm vững quy trình này sẽ giúp bạn trở thành một nhà phát triển web toàn diện và chuyên nghiệp hơn.
