Hướng dẫn triển khai ứng dụng MERN Stack lên Heroku
Nội dung
Mục lục
Giới thiệu
Trong loạt video hướng dẫn về ứng dụng Full Stack MERN, chúng ta đã tạo và phát triển ứng dụng Note Zipper từ đầu. Giờ đây, chúng ta sẽ tìm hiểu cách triển khai ứng dụng này lên Heroku, một nền tảng đám mây phổ biến để chạy ứng dụng web.
Trong bài viết này, chúng ta sẽ đi qua quy trình triển khai ứng dụng MERN của chúng ta lên Heroku và tìm hiểu hai phương pháp khác nhau để làm điều này.
Hướng dẫn triển khai ứng dụng MERN
Chuẩn bị
Trước khi triển khai ứng dụng của chúng ta lên Heroku, chúng ta cần thực hiện một số công việc chuẩn bị. Đầu tiên, hãy mở terminal trong thư mục backend của dự án và truy cập vào file server.js.
Tiếp theo, chúng ta sẽ viết các lệnh cần thiết để triển khai ứng dụng lên Heroku.
const path = require('path');
const express = require('express');
const app = express();
// Các routes của ứng dụng
// Xử lý triển khai ứng dụng
if (process.env.NODE_ENV === 'production') {
app.use(express.static(path.join(__dirname, '..', 'frontend', 'build')));
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, '..', 'frontend', 'build', 'index.html'));
});
}
// Khởi chạy ứng dụng
app.listen(5000, () => {
console.log('Server started on port 5000');
});
Cấu hình file server.js
Trong file server.js, chúng ta cần cấu hình ứng dụng để phục vụ tệp tĩnh từ thư mục build của frontend khi ở môi trường sản xuất. Để làm điều này, chúng ta sẽ sử dụng các phương thức của Express như express.static
để phục vụ các tệp tĩnh và res.sendFile
để gửi tệp index.html.
Triển khai ứng dụng lên Heroku
Để triển khai ứng dụng lên Heroku, chúng ta cần thực hiện một số bước sau:
- Đăng nhập vào tài khoản Heroku.
- Cài đặt Heroku CLI (Command Line Interface), nếu chưa có.
- Tạo một ứng dụng trên Heroku.
- Push mã nguồn ứng dụng lên Heroku thông qua Git.
- Thiết lập biến môi trường trên Heroku để sử dụng các giá trị từ tệp .env của chúng ta.
Có Hai phương pháp để triển khai ứng dụng lên Heroku: Sử dụng Heroku CLI hoặc push thư mục build lên Heroku. Hãy xem cách triển khai theo từng phương pháp.
Phương pháp triển khai dự án
Phương pháp 1: Sử dụng Heroku CLI
Đầu tiên, chúng ta cần cài đặt Heroku CLI và đăng nhập vào tài khoản Heroku thông qua CLI.
Sau khi cài đặt và đăng nhập thành công, chúng ta tiến hành triển khai ứng dụng lên Heroku bằng cách chạy lệnh sau trong thư mục dự án:
heroku Create
Sau khi lệnh này chạy thành công, Heroku sẽ tạo một ứng dụng mới và trả về URL cho ứng dụng đó.
Tiếp theo, chúng ta cần tạo một tệp Procfile trong thư mục gốc của dự án, với nội dung sau:
web: node backend/server.js
Tiếp theo, chúng ta cần push mã nguồn ứng dụng lên Heroku thông qua Git:
git add .
git commit -m "Prepare for deployment"
git push heroku master
Sau khi lệnh cuối cùng chạy thành công, Heroku sẽ tiến hành triển khai ứng dụng và cung cấp URL để truy cập ứng dụng.
Phương pháp 2: Push thư mục build lên Heroku
Phương pháp này đơn giản hơn và không yêu cầu sử dụng Heroku CLI. Chúng ta chỉ cần build thư mục frontend và push nó lên Heroku thông qua Git.
Trước hết, chúng ta cần chỉnh sửa file .gitignore trong thư mục gốc của dự án và xóa dòng sau:
/frontend/build
Sau đó, chúng ta thực hiện các bước sau:
-
Tiến hành build ứng dụng frontend:
cd frontend
npm run build
-
Tiến hành commit và push frontend đã build lên Heroku:
git add .
git commit -m "Build frontend"
git push heroku master
Sau khi lệnh cuối cùng chạy thành công, Heroku sẽ tiến hành triển khai ứng dụng và cung cấp URL để truy cập ứng dụng.
Kết luận
Trong bài viết này, chúng ta đã tìm hiểu cách triển khai ứng dụng MERN lên Heroku bằng hai phương pháp khác nhau. Bằng cách triển khai ứng dụng của chúng ta lên nền tảng đám mây Heroku, chúng ta có thể dễ dàng chia sẻ ứng dụng với người dùng và kiểm tra hoạt động của nó trong môi trường sản xuất.
Đừng quên like video và subscribe kênh Roadside Coder để cập nhật các video mới nhất về lập trình web!
Tài liệu tham khảo
- Heroku
- Heroku CLI