Azure DevOps发布静态Web应用时如何定位staticwebapp.config.json？

问题场景 #

• Angular应用部署到Azure静态Web应用后，访问特定URL会跳转404，需通过staticwebapp.config.json配置导航回退规则，配置内容如下：

{
  "navigationFallback": {
    "rewrite": "/index.html",
    "exclude": ["*.{css,scss,js,png,gif,ico,jpg,svg}"]
  }
}

• 配置文件实际路径结构：

  src/
    app/
    assets/
    configuration/
      staticwebapp.config.json
  

• 当前Azure DevOps发布流水线的YAML配置片段：

steps:
- task: AzureStaticWebApp@0
  displayName: 'Static Web App: '
  inputs:
    workingDirectory: '$(System.DefaultWorkingDirectory)/xx/xx/xx-xx-web'
    app_location: /
    output_location: dist
    config_file_location: configuration
    skip_app_build: true
    skip_api_build: true
    is_static_export: false
    verbose: true
    azure_static_web_apps_api_token: 'SOMEVALUE'

遇到的错误 #

部署时出现两类报错：

1. 未配置config_file_location时：

##[error]routes_location: route file 'staticwebapp.config.json/routes.json' could not be found.

2. 设置config_file_location为configuration时：

##[error]config_file_location: config file '/configuration/staticwebapp.config.json' could not be found.

正确配置方案 #

1. 确保配置文件被复制到构建输出目录 #

Azure静态Web应用部署任务会读取构建输出目录（即dist）中的配置文件，因此需要让Angular构建时将配置文件复制到dist目录。修改angular.json，在项目的构建配置中添加资源复制规则：

• 找到projects -> 你的项目名称 -> architect -> build -> options -> assets数组，添加以下配置：

{
  "glob": "staticwebapp.config.json",
  "input": "src/configuration",
  "output": "/"
}

执行构建后，staticwebapp.config.json会被复制到dist根目录下。

2. 修正流水线YAML参数 #

config_file_location的路径需相对于workingDirectory，结合上述文件复制操作，有两种可选配置：

方式一：指向构建输出目录

若已完成步骤1的文件复制，直接将参数指向dist目录：

config_file_location: dist

方式二：指向源文件目录

若未将配置文件复制到dist，需填写相对于workingDirectory的源文件路径：

config_file_location: src/configuration

3. 验证效果 #

修改完成后重新运行流水线，部署成功后测试特定URL，确认不再跳转404。

内容的提问来源于stack exchange，提问作者A. Gh