Azure静态Web Apps路由刷新404：staticwebapp.config.json失效求助

问题背景 #

部署流程修改为：构建React应用 → 上传dist文件到Azure Blob存储覆盖现有文件 → 从Blob下载所有文件到本地new文件夹 → 部署到Azure静态Web Apps。此时staticwebapp.config.json的导航 fallback配置未生效，原始不经过Blob的部署流程正常。

核心原因 #

Azure静态Web Apps要求staticwebapp.config.json必须位于部署的应用根目录，且部署流程需确保该文件被正确包含在上传内容中，同时app_location和output_location的配置要匹配实际文件结构。

解决步骤 #

1. 确保staticwebapp.config.json被包含在构建产物中 #

在React项目中，确保该配置文件被复制到dist（构建产物目录）：

• 若使用Create React App：将staticwebapp.config.json放入public文件夹，构建时会自动复制到dist目录。
• 若使用Vite或其他构建工具：在构建步骤后添加复制命令，将配置文件拷贝到dist。在GitHub Action中追加步骤：

  - name: Copy config file to dist
    run: cp staticwebapp.config.json dist/
  

2. 修正GitHub Action的部署参数 #

当前部署步骤中output_location设置为dist，但从Blob下载的文件直接存放在new文件夹根目录（而非new/dist），导致Azure静态Web Apps无法识别正确路径，配置文件也无法处于部署根目录。修改Build And Deploy步骤：

- 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_MANGO_BAY_0BBC9890F }}
    repo_token: ${{ secrets.GITHUB_TOKEN }}
    action: "upload"
    app_location: "${{github.workspace}}/new"
    api_location: ""
    output_location: "" # 文件直接在app_location根目录，无需指定子目录
    skip_app_build: true

3. 验证Blob存储中的文件 #

登录Azure Portal打开Blob存储容器，确认根目录下存在staticwebapp.config.json。如果缺失，重新运行上传步骤，确保构建后的dist目录包含该文件后再上传。

4. 手动补充配置文件（可选） #

若上述步骤未解决问题，可在下载Blob文件后，手动将项目根目录的配置文件复制到new文件夹根目录：

- name: Copy config file to new folder
  run: cp staticwebapp.config.json ${{github.workspace}}/new/

验证 #

部署完成后，访问应用路由（如/about）并刷新页面，确认不再返回404错误，导航 fallback配置生效。

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