如何正确配置Azure静态Web应用与Create React App及React Router v6

问题根源 #

你的应用在直接访问子路由时，静态资源（CSS/JS）的请求路径被解析为相对路径（比如/orders/static/css/main.d7af2528.css），而实际资源存放在根路径的/static/目录下。由于这个不存在的路径触发了navigationFallback规则，Azure返回了index.html文件，导致浏览器收到的资源是HTML格式（MIME类型为text/html），无法正常解析样式和脚本。

解决方案 #

1. 配置Create React App的根路径 #

在项目根目录的package.json中添加homepage字段，指定应用的根路径：

{
  "name": "your-app-name",
  "homepage": "/",
  // 其他原有配置...
}

这个配置会让Create React App在构建时，将所有静态资源的引用路径改为绝对路径（比如/static/css/main.d7af2528.css），无论当前路由是什么，都会从根目录请求资源。

2. （可选）通过环境变量指定根路径 #

如果不想修改package.json，也可以在构建命令中设置PUBLIC_URL环境变量。比如修改package.json的scripts：

{
  "scripts": {
    "build": "PUBLIC_URL=/ react-scripts build",
    // 其他脚本...
  }
}

效果和设置homepage完全一致。

3. 保留现有staticwebapp.config.json配置 #

你的staticwebapp.config.json配置是正确的，exclude规则会让Azure直接返回/static/和/images/下的静态资源，不会触发重写：

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["/images/*.{png,jpg,gif}", "/static/*"]
  }
}

验证步骤 #

1. 保存上述修改后，提交代码触发GitHub Action重新部署
2. 直接访问子路由（比如myapp.com/orders/3），打开浏览器控制台检查资源请求路径是否为绝对路径
3. 确认应用正常加载，无MIME类型相关错误

内容的提问来源于stack exchange，提问作者idjuradj