根据 azure 部署槽更改 angular 配置

Question

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

根据应用程序在管道中的环境 - 开发 -> 阶段 -> 生产 - 应用程序应为其数据使用不同的 API。例如，如果它在 Dev 环境中，它应该引用 http://someapi-dev.azurewebsites.net and if it's in Stage, it should reference http://someapi-stage.azurewebsites.net.

开发环境是它自己的 Azure 应用服务。 Stage 和 Prod 环境是同一 Azure 应用服务上的部署槽。当我从Stage释放到Prod时，就是一个简单的slot swap操作

问题是我无法在所有环境中使用相同的 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 应用程序中的“应用程序设置”部分，并相应地设置您需要的值。如果您只是将应用程序设置标记为插槽设置，插槽交换也很简单。

Answer 2

在您的 angular 应用程序的 src 路径中，您必须有一个名为 environments 的文件夹。在其中，您拥有所有环境。所以你只需要导入 import { environment } from './environments/environment'; 。导入路径取决于您的应用程序配置。因此，您可以获取当前环境并根据该检查 API 调用哪个。这里是环境内容

export const environment = {
  production: true
};

希望你能基于此得到当前的环境

根据 azure 部署槽更改 angular 配置

changing angular config based on azure deployment slot

angular

azure

tfs

azure-devops

azure-pipelines-release-pipeline