基于 azure 部署槽更改角度配置

Question

我有一个 Angular 应用程序，它为其数据引用了一个 API。我使用 Visual Studio Team Services（TFS 在线）作为构建和发布管道，使用 Azure 应用服务进行托管。

根据应用程序在管道中的环境 - Dev -> Stage -> Prod - 应用程序应该为其数据使用不同的 API。例如，如果它在 Dev 环境中，它应该引用http://someapi-dev.azurewebsites.net，如果它在 Stage 中，它应该引用http://someapi-stage.azurewebsites.net。

Dev 环境是它自己的 Azure 应用服务。Stage 和 Prod 环境是同一 Azure 应用服务上的部署槽。当我从 Stage 发布到 Prod 时，它是一个简单的插槽交换操作。

问题是我无法在所有环境中使用相同的 Angular 配置。配置必须更改以反映要使用的正确 API。

我如何使这个动态？当我部署到 Dev 时，我可以使用命令行步骤来覆盖配置文件（例如“move /Y config.dev.json config.json”）。但是，当将插槽从 Stage 交换到 Prod 时，我如何执行类似的操作？

下面是我如何在 app.component.ts 中在运行时加载适当的 API url：

ngOnInit() {
    this.http.get('assets/environments/config.json')
    .map(res => res.json())
    .toPromise()
    .then((config) => {
      this.apiSvc.baseUrl = config.urlToApi;
      this.isConfigReady = true;
});

Answer 1

我必须自己处理这个问题。

尝试将 config.json 从静态文件移动到 MVC 视图。您可以在 RouteConfig.RegisterRoutes 方法中设置指向 .js 文件的路由：

  routes.MapRoute(
       name: "configRoute", 
       url: "settings/config.js", 
       defaults: new { controller = "Settings", action="Index" }
   );

执行此操作后，您可以从 web.config 文件的部分读取数据并将其插入到 config.json 中。然后，您就可以将端点设置为应用程序设置。

例如，在将为您的 config.json 文件提供服务的 Views\Settings\index.cshtml 中：

  @using System.Configuration

    {
        "endpoint": @ConfigurationManager.AppSettings["configEndpoint"]
    }

完成此操作后，您要做的事情就会变得简单。现在，您可以转到 Azure Web App 中的“应用程序设置”部分，并相应地设置所需的值。如果您只需将应用程序设置标记为插槽设置，则插槽交换也很简单。