Chuyển đổi đường dẫn tài nguyên React từ tuyệt đối sang tương đối khi build

Khi xây dựng ứng dụng React bằng yarn build (hoặc npm run build), kết quả mặc định thường sử dụng đường dẫn tuyệt đối bắt đầu bằng / cho các tài nguyên như CSS, JS và ảnh. Điều này gây lỗi hiển thị trang trắng nếu ứng dụng được triển khai trên một subpath (ví dụ: https://example.com/my-app/) thay vì root domain. Nguyên nhân là các thẻ <script> và <link> trong index.html sẽ trỏ đến /static/js/main.abcd1234.js, nhưng thực tế tệp lại nằm ở /my-app/static/js/main.abcd1234.js — trình duyệt không tìm thấy và tải thất bại. Giải pháp chuẩn theo tài liệu Create React App là cấu hình thuộc tính homepage trong package.json:

{
  "name": "my-react-app",
  "version": "0.1.0",
  "homepage": ".",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build"
  }
}

Giá trị "." (dấu chấm) yêu cầu react-scripts tạo tất cả đường dẫn tài nguyên dưới dạng tương đối so với vị trí của index.html. Kết quả, các thẻ sẽ trở thành: <script src="static/js/main.abcd1234.js"></script> <link href="static/css/main.efgh5678.css" rel="stylesheet"></link> Tính năng này khả dụng từ phiên bản react-scripts@0.9.0 trở lên và không yêu cầu sửa file trong node_modules hay tùy chỉnh webpack thủ công — đảm bảo tính ổn định và dễ nâng cấp. Lưu ý: Nếu ứng dụng cần chạy ở một subdirectory cố định (ví dụ /admin/), bạn có thể dùng giá trị "./admin" hoặc "admin" thay vì dấu chấm — lúc đó đường dẫn sẽ được sinh ra tương đối từ thư mục gốc của miền.

Mở rộng: Thiết lập biến môi trường tùy chỉnh cho nhiều môi trường xây dựng

Để phân biệt cấu hình giữa các môi trường (staging, production, demo…), bạn có thể kết hợp env-cmd với các file .env.*: 1. Cài đặt công cụ:

yarn add env-cmd --dev

2. Tạo file .env.staging:

REACT_APP_API_BASE_URL=https://api.staging.example.com
REACT_APP_ENV=staging

3. Cập nhật package.json:

"scripts": {
  "build:staging": "env-cmd -f .env.staging react-scripts build"
}

Khi chạy yarn build:staging, các biến trong .env.staging sẽ được tiêm vào quá trình build và có thể truy cập trong mã nguồn qua process.env.REACT_APP_*. Biến trong .env.production sẽ tự động được áp dụng khi NODE_ENV=production, giúp đảm bảo hành vi nhất quán mà không cần chỉ định tường minh. Tài liệu chính thức về triển khai ứng dụng React: https://create-react-app.dev/docs/deployment/