Triển khai ứng dụng React & Node.js lên máy chủ Windows

Tay cầm cốc cà phê gần cạn, tim đập thình thịch vì hồi hộp… vẻ mặt bạn hiện lên vẻ tự mãn (tôi cho rằng hầu hết các lập trình viên đều biết cảm giác này). Bạn nhấp một ngụm cà phê trong khi ngắm nhìn ứng dụng web vừa hoàn thành. Bạn đã dành hàng ngày, hàng tháng, thậm chí hàng năm trời để làm việc với nó, và cuối cùng, nó đã xong rồi 🍾😄.

Bước 1: Triển khai ứng dụng máy chủ NodeJs
Bước 2: Triển khai ứng dụng React

Tuy nhiên, vẫn còn một thử thách cuối cùng bạn cần vượt qua để hoàn thành hành trình này: ứng dụng chỉ hoạt động trên máy tính của bạn 😥. Điều khó khăn nhất trong chặng cuối này là yêu cầu triển khai ứng dụng trên máy chủ Windows cục bộ do khách hàng của bạn cung cấp. Mục đích của bài viết này là biến nhiệm vụ khó khăn này thành dễ dàng hơn và hy vọng sẽ tiết kiệm thời gian cho người đọc.

Bước 1: Triển khai ứng dụng máy chủ NodeJs

1. Cài đặt Node.js trên máy chủ Windows

2. Cài đặt pm2

Cài đặt pm2 từ npm trong ứng dụng máy chủ của bạn. PM2 là trình quản lý tiến trình sản xuất cho các ứng dụng Node.js với bộ cân bằng tải tích hợp. Nó cho phép bạn duy trì các ứng dụng hoạt động liên tục, tải lại chúng mà không cần thời gian ngừng hoạt động và hỗ trợ các tác vụ quản trị hệ thống thông thường.

npm install pm2 -g

3. Khởi động ứng dụng máy chủ của bạn bằng lệnh pm2.

pm2 start server.js

Ứng dụng máy chủ của bạn hiện đã được chạy ngầm (ở chế độ nền), được giám sát và duy trì hoạt động liên tục. Trạng thái máy chủ sẽ được hiển thị trong cửa sổ dòng lệnh như hình bên dưới.

PM2

Giờ bạn có thể nhập địa chỉ máy chủ và cổng vào thanh địa chỉ trình duyệt để truy cập máy chủ. Để thử nghiệm, tôi gửi văn bản đến trình duyệt từ đường dẫn trang chủ của máy chủ bằng đoạn mã sau.

pm2 start server.js

app.get('/', (req, res) => {
    res.send('Hello World :)');
});

Nhập ip_address:port_number vào thanh địa chỉ URL, ví dụ: localhost:4000, sẽ cho ra kết quả sau trong trình duyệt.

Node

Vậy là xong. Quá trình thiết lập máy chủ đã hoàn tất. Tiếp theo, chúng ta sẽ triển khai ứng dụng React.

Bước 2: Triển khai ứng dụng React

1. Tạo bản dựng tối ưu hóa ứng dụng của bạn cho môi trường sản xuất bằng cách chạy lệnh sau:

npm run build

2. Kết quả của lệnh build

Kết quả của lệnh build sẽ tạo một thư mục build mới bên trong dự án React App của bạn, chứa bản build dành cho sản xuất. Bạn có thể thấy thư mục build này bên trong ứng dụng của mình trong Solution Explorer của IDE.

Node

3. Triển khai ứng dụng lên Internet Information Services (IIS)

Triển khai ứng dụng lên Internet Information Services (IIS). Để triển khai ứng dụng lên IIS, trước tiên hãy tạo một Application Pool mới bằng cách nhấp chuột phải vào Application Pool và chọn Add Application Pool.

Node

Đặt tên cho Nhóm ứng dụng và nhấn OK.

Node

Mở Cài đặt nâng cao cho Nhóm ứng dụng và đảm bảo rằng định danh được đặt thành Định danh nhóm ứng dụng.

Node

Nhấp chuột phải vào Sites, sau đó nhấp vào Add Website và điền đầy đủ thông tin cấu hình ứng dụng của bạn như hình bên dưới.

Application Pool: nhóm ứng dụng đã tạo ở bước trước.
Physical Path: địa chỉ thư mục build của ứng dụng React của bạn
Port: cổng của ứng dụng React của bạn

Node

Nhấp vào OK và truy cập địa chỉ ứng dụng React trong trình duyệt để kiểm tra chức năng.

Với cả ứng dụng React và máy chủ Node.js đang chạy, trang web của bạn đã được triển khai hoàn chỉnh và sẵn sàng sử dụng. Hy vọng bài viết này hữu ích và ngắn gọn.

Happy Coding 💻😄

Tham khảo: