如何在Azure App Service上为Angular + .NET 5应用配置分环境的Angular环境变量

我来帮你梳理下具体的配置步骤，这样就能让两个Azure App Service实例分别对应Angular的测试和生产环境变量了：

1. 给package.json添加环境专属构建脚本 #

首先，咱们需要在Angular项目的package.json里，为测试和生产环境分别配置单独的构建命令，确保发布时能精准触发对应环境的代码构建：

打开项目根目录的package.json，找到scripts节点，添加以下两个脚本：

"scripts": {
  // 保留原有脚本，新增下面两行
  "build:test": "ng build --configuration=test",
  "build:prod": "ng build --configuration=production"
}

小提醒：确认下你的angular.json里已经配置了对应的环境映射——在projects -> 你的项目名 -> architect -> build -> configurations节点下，应该已经有test和production两个配置项，分别指向environment.test.ts和environment.prod.ts。如果没有的话，你可以复制production的配置，修改fileReplacements指向测试环境文件即可。

2. 配置Visual Studio的.pubxml发布文件 #

接下来，咱们要给每个Azure App Service对应的.pubxml文件，指定对应的Angular构建命令，确保发布时自动构建对应环境的Angular代码。

针对测试环境的Test.pubxml #

打开你的测试环境发布配置文件（比如Test.pubxml），在<PropertyGroup>节点内添加预构建事件，指定运行测试环境的构建脚本：

<PropertyGroup>
  <!-- 保留原有配置，新增下面这行 -->
  <PreBuildEvent>npm run build:test</PreBuildEvent>
</PropertyGroup>

针对生产环境的Prod.pubxml #

同样，打开生产环境的发布配置文件（比如Prod.pubxml），修改预构建事件为生产环境的构建脚本：

<PropertyGroup>
  <!-- 保留原有配置，新增下面这行 -->
  <PreBuildEvent>npm run build:prod</PreBuildEvent>
</PropertyGroup>

关键注意：如果你的Angular构建输出目录不是.NET项目的wwwroot（默认静态文件目录），记得在angular.json里把projects -> 你的项目名 -> architect -> build -> options -> outputPath改成"wwwroot"，这样构建后的Angular静态文件会直接放到.NET的静态目录，发布时会自动被包含到App Service中。

3. 验证与发布 #

• 本地先测试：分别运行npm run build:test和npm run build:prod，检查wwwroot（或你的输出目录）里的打包文件，确认环境变量是否正确（比如打开main.js搜索环境变量值）。
• 发布到Azure：在Visual Studio中，分别选择对应的.pubxml文件发布到对应的App Service实例——选择Test.pubxml发布到测试环境的App Service，选择Prod.pubxml发布到生产环境的App Service。

这样配置完成后，两个App Service实例就会分别加载对应Angular环境文件里的变量了。

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