Hướng dẫn triển khai ứng dụng MERN Stack lên Heroku

Find AI Tools
No difficulty
No complicated process
Find ai tools

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:

  1. Đăng nhập vào tài khoản Heroku.
  2. Cài đặt Heroku CLI (Command Line Interface), nếu chưa có.
  3. Tạo một ứng dụng trên Heroku.
  4. Push mã nguồn ứng dụng lên Heroku thông qua Git.
  5. 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.

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:

  1. Tiến hành build ứng dụng frontend:

    cd frontend
    npm run build
  2. 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

  1. Heroku
  2. Heroku CLI

Most people like

Are you spending too much time looking for ai tools?
App rating
4.9
AI Tools
100k+
Trusted Users
5000+
WHY YOU SHOULD CHOOSE TOOLIFY

TOOLIFY is the best ai tool source.