Hướng dẫn cài web Reactjs lên server Win chạy IIS

Để cài đặt một ứng dụng ReactJS trên máy chủ Windows chạy IIS (Internet Information Services), bạn cần thực hiện các bước sau:

---

---

1. Chuẩn bị ứng dụng ReactJS#

• Build ứng dụng ReactJS để sẵn sàng triển khai: npm run build

• Thư mục build sẽ được tạo ra trong thư mục gốc của dự án React. Đây là thư mục chứa các tệp tĩnh cần triển khai trên IIS.

---

---

2. Cài đặt IIS trên Windows#

Bật IIS#

• Mở Control Panel > Programs and Features > Turn Windows features on or off.

• Tích chọn các thành phần cần thiết: Internet Information Services.

  • Web Management Tools.

  • World Wide Web Services > Application Development Features > Static Content.

• Nhấn OK để cài đặt.

Kiểm tra IIS#

• Sau khi cài đặt, mở trình duyệt và truy cập http://localhost. Nếu thấy trang IIS mặc định xuất hiện, IIS đã được cài đặt thành công.

---

---

3. Triển khai ứng dụng ReactJS trên IIS#

Bước 1: Copy thư mục build vào máy chủ#

• Copy toàn bộ thư mục build (được tạo ở bước 1) vào máy chủ Windows. Ví dụ: đặt thư mục tại C:\inetpub\wwwroot\ReactApp.

Bước 2: Tạo một website mới trong IIS#

• Mở IIS Manager: Nhấn tổ hợp phím Windows + R, nhập inetmgr, rồi nhấn Enter.

• Trong bảng điều khiển IIS: Nhấn chuột phải vào Sites > Add Website.

  • Điền thông tin: Site name: Tên ứng dụng, ví dụ: ReactApp.

    • Physical path: Chọn đường dẫn đến thư mục build của ứng dụng, ví dụ: C:\inetpub\wwwroot\ReactApp.

    • Port: Chọn cổng (mặc định là 80).

  • Nhấn OK.

---

---

4. Cấu hình ReactJS trên IIS#

Bước 1: Thêm file web.config#

• IIS cần tệp web.config để xử lý các route trong ứng dụng ReactJS. Tạo tệp web.config trong thư mục build với nội dung sau: ` `

Bước 2: Cấp quyền cho thư mục#

• Đảm bảo rằng tài khoản IIS_IUSRS có quyền đọc (Read) đối với thư mục build.

---

---

5. Kiểm tra ứng dụng ReactJS#

• Mở trình duyệt và truy cập địa chỉ ứng dụng:
  Nếu bạn đặt cổng là 80: http://localhost.

  • Nếu sử dụng cổng khác: http://localhost:<port>.

---

---

6. Xử lý lỗi thường gặp#

Lỗi 404 khi truy cập route con#

• Nguyên nhân: IIS không hiểu cấu trúc route của React.

• Giải pháp: Đảm bảo tệp web.config đã được thêm và nội dung đúng như trên.

Lỗi không tải được tệp tĩnh (CSS, JS)#

• Nguyên nhân: Thiếu quyền hoặc cấu hình MIME Types chưa đúng.

• Giải pháp: Cấp quyền cho IIS truy cập thư mục build.

  • Đảm bảo các MIME Types cho tệp .js, .css, .svg, v.v., đã được bật.

---

---

7. Tối ưu hóa (Tùy chọn)#

• Sử dụng HTTPS để bảo mật: Cài đặt chứng chỉ SSL cho ứng dụng trong IIS.

• Bật Compression trong IIS để tăng tốc tải tệp tĩnh: IIS Manager > chọn website > Compression > Bật Static content compression.

Nếu gặp khó khăn trong quá trình triển khai, hãy cung cấp thêm chi tiết để mình hỗ trợ! 😊