Triển khai NodeJS và React lên Windows Server 2012 R2 sử dụng IIS

Chào bạn, việc triển khai NodeJS và React lên Windows Server 2012 R2 sử dụng IIS là một yêu cầu khá phổ biến trong môi trường doanh nghiệp sử dụng hạ tầng Microsoft. Vì Windows Server 2012 R2 khá cũ, chúng ta cần cài đặt một số module hỗ trợ để IIS có thể hiểu được Node.js và React Router.Dưới đây là quy trình chi tiết từng bước để deploy "Full-stack" (Client + Server) chạy chung trên một tên miền (hoặc IP).

Mô hình triển khai (Kiến trúc đề xuất)

Chúng ta sẽ sử dụng phương pháp Reverse Proxy:

1. Frontend (React): IIS phục vụ file tĩnh (HTML, CSS, JS) trong thư mục dist.
2. Backend (Node.js): Chạy ngầm bằng PM2 ở cổng 3000 (hoặc cổng khác).
3. Kết nối: IIS sẽ điều hướng các request bắt đầu bằng /api sang cổng 3000 của Node.js. Các request còn lại sẽ trả về Frontend.

Phần 1: Chuẩn bị môi trường trên Server

Bạn cần Remote Desktop vào Windows Server và cài đặt các thứ sau:

1. Node.js: Tải và cài đặt bản LTS (Long Term Support) cho Windows.
   • Lưu ý: Sau khi cài, mở CMD gõ node -v và npm -v để kiểm tra.
2. IIS (Internet Information Services):
   • Vào Server Manager -> Add roles and features -> Chọn Web Server (IIS).
3. IIS URL Rewrite Module 2.1: (Bắt buộc)
   • Tải về và cài đặt từ trang chủ Microsoft hoặc tìm Google “IIS URL Rewrite download”.
4. Application Request Routing (ARR) 3.0: (Bắt buộc để làm Reverse Proxy)
   • Tải và cài đặt ARR 3.0.
   • Quan trọng: Sau khi cài ARR, mở IIS Manager -> Click vào tên Server (bên trái) -> Chọn Application Request Routing Cache -> Bên phải chọn Server Proxy Settings -> Tích vào Enable proxy -> Apply.

Phần 2: Deloy Backend (Nodejs)

Bước 1: Chuẩn bị mã nguồn

1. Copy folder backend của bạn (chứa package.json, server.js, thư mục src…) lên server. Ví dụ: C:\inetpub\wwwroot\nodejs-api.
2. Tạo file .env trong thư mục này (chứa thông tin DB, JWT secret…).

Bước 2: Cài đặt thư viện & PM2 Mở CMD (Run as Administrator), cd vào thư mục server-api:

# 1. Cài đặt thư viện
npm install --production

# 2. Cài đặt PM2 (Công cụ quản lý tiến trình Node.js)
npm install pm2 -g

# 3. Khởi chạy Backend
# Giả sử file chạy chính của bạn là src/server.js hoặc app.js
pm2 start src/server.js --name "nodejs-backend"

# 4. Lưu lại để tự khởi động khi reset máy
pm2 save
pm2 startup

Lúc này Backend của bạn đang chạy ngầm ở localhost:3000 (hoặc port bạn cấu hình).

Phần 3: Deloy FrontEnd (React Vite)

Bước 1: Build tại máy Local (Máy của bạn)

1. Mở file .env ở Frontend, trỏ API về domain server (hoặc /api nếu dùng chung domain). Ví dụ: VITE_API_URL=/api/v1.
2. Chạy lệnh build:

npm run build

Bạn sẽ có thư mục dist.

Bước 2: Copy lên Server

1. Copy toàn bộ nội dung trong thư mục dist lên server.
2. Ví dụ đặt tại: C:\inetpub\wwwroot\react-client.

Bước 3: Cấp quyền (Permission)

• Chuột phải vào thư mục react-client -> Properties -> Security -> Edit -> Add -> Gõ IUSR -> Check Names -> OK -> Cho quyền Read & Execute.
• Làm tương tự với IIS_IUSRS.

Phần 4: Cấu Hình IIS (Kết nối tất cả)

Đây là bước quan trọng nhất để Frontend và Backend gặp nhau.

1. Tạo Website mới:
   • Mở IIS Manager -> Chuột phải Sites -> Add Website.
   • Site name: ReactApp.
   • Physical path: Trỏ tới thư mục Frontend (C:\inetpub\wwwroot\react-client).
   • Port: 80 (hoặc port khác nếu muốn).
   • Host name: Nhập domain (ví dụ shop.com) hoặc để trống nếu chạy Local IP.
2. Tạo file web.config:
   • Trong thư mục C:\inetpub\wwwroot\react-client, bạn tạo một file tên là web.config.
   • Dán nội dung sau vào. Đây là file cấu hình giúp IIS hiểu React Router và chuyển tiếp API xuống Node.js.

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <!-- RULE 1: Reverse Proxy cho API -->
                <!-- Tất cả request bắt đầu bằng /api sẽ đẩy xuống localhost:3000 -->
                <rule name="ReverseProxyInboundRule1" stopProcessing="true">
                    <match url="^api/(.*)" />
                    <action type="Rewrite" url="http://localhost:3000/api/{R:1}" />
                </rule>

                <!-- RULE 2: React Router (SPA) -->
                <!-- Nếu không phải là file hay thư mục thật, trả về index.html -->
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
        
        <!-- Cấu hình loại file tĩnh (nếu cần) -->
        <staticContent>
            <mimeMap fileExtension=".json" mimeType="application/json" />
            <mimeMap fileExtension=".webp" mimeType="image/webp" />
        </staticContent>
    </system.webServer>
</configuration>

Phần 5: Kiểm tra và gỡ lỗi

1. Mở trình duyệt: Truy cập vào http://localhost (hoặc IP server).
2. Kiểm tra Frontend: Giao diện React hiện lên là thành công.
3. Kiểm tra Backend: Thử đăng nhập.
   • Nếu trình duyệt báo lỗi 404/500 khi gọi API: Kiểm tra xem ARR đã bật “Enable Proxy” chưa (Phần 1).
   • Kiểm tra xem PM2 có đang chạy không (pm2 status).
4. Tường lửa (Firewall):
   • Vào Windows Firewall with Advanced Security.
   • Tạo Inbound Rule mới -> Port -> TCP -> Nhập 80 (và 443 nếu có SSL) -> Allow the connection.

Một số lưu ý cho Windows Server 2012 R2

• SSL (HTTPS): Win 2012 R2 khá cũ trong việc hỗ trợ các chuẩn bảo mật mới. Nếu bạn muốn cài HTTPS (SSL) miễn phí, hãy dùng công cụ “Certify The Web” (client cho Let’s Encrypt trên Windows), nó rất dễ dùng và tự động gia hạn.
• Database: Nếu bạn dùng SQL Server hoặc MySQL cài trên cùng máy này, hãy đảm bảo chuỗi kết nối trong .env là localhost hoặc 127.0.0.1.

Chúc bạn deploy thành công! Nếu gặp lỗi cụ thể nào (như lỗi 500.19, 502 Bad Gateway…), hãy nhắn lại mã lỗi để mình hỗ trợ nhé.