Azure静态Web应用中ReactJS路由与staticwebapp.config.json部署求助

问题根源 #

React作为单页应用（SPA），所有路由逻辑由前端处理，Azure Static Web App默认会尝试匹配请求路径对应的物理文件，当直接访问深层URL（如/Order?OrderId=100）或刷新页面时，服务器找不到对应文件，就会返回404错误。你本地配置的staticwebapp.config.json通过navigationFallback将未找到的请求重写到index.html，让前端路由接管，这个配置逻辑是完全正确的。

正确部署配置方案 #

你临时将文件放到public文件夹可行，但可以通过以下更规范的方式处理：

方案1：项目根目录存放配置文件，构建时自动复制到输出目录 #

1. 将staticwebapp.config.json放在React项目的根目录（和package.json同级）。
2. 修改package.json中的build脚本，在构建完成后自动将配置文件复制到构建输出目录（默认是build）：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build && cp staticwebapp.config.json build/",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
}

如果是Windows环境，将cp替换为copy：react-scripts build && copy staticwebapp.config.json build\\

这样每次构建后，配置文件会自动出现在build根目录，Azure Static Web App部署时会自动识别并应用该配置。

方案2：通过Azure Static Web App构建YAML正确指定配置文件位置 #

如果不想修改构建脚本，确保YAML配置正确：

1. 确认staticwebapp.config.json在项目根目录。
2. 在构建YAML文件中，确保app_location、output_location和config_file_location配置正确：

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "." # React项目根目录
          api_location: "" # 无后端API则留空，有则填对应路径
          output_location: "build" # React构建输出目录
          config_file_location: "/" # 配置文件在源代码中的位置（根目录）

注意：Azure Static Web App部署流程会自动将config_file_location指定的配置文件复制到部署的根目录，无需手动处理，但要确保构建流程不会忽略该文件。

验证配置是否生效 #

部署完成后，直接访问深层URL或刷新页面，若不再出现404，说明配置已生效。你也可以在Azure门户的静态Web App资源中，进入配置 > 路由，查看是否自动应用了navigationFallback规则。

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