angular - 基于 azure 部署槽更改 Angular 配置

标签 angular azure tfs azure-devops azure-pipelines-release-pipeline

我有一个 Angular 应用程序,它引用 API 来获取其数据。我使用 Visual Studio Team Services(TFS 在线)进行构建和发布管道,使用 Azure 应用服务进行托管。

根据应用程序处于管道中的环境 - 开发 -> 阶段 -> 生产 - 应用程序应为其数据使用不同的 API。例如,如果它位于开发环境中,则应引用 http://someapi-dev.azurewebsites.net如果它在 Stage 中,它应该引用 http://someapi-stage.azurewebsites.net .

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

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

如何使这种动态化?当我部署到开发时,我可以使用命令行步骤覆盖配置文件(例如“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;
});

最佳答案

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

尝试将 config.json 从静态文件移动到 MVC View 。您可以在 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 中的“应用程序设置”部分,并相应地设置所需的值。如果您只需将应用程序设置标记为插槽设置,则插槽交换也很简单。

关于angular - 基于 azure 部署槽更改 Angular 配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47780782/

相关文章:

azure - 如何在 Azure 门户中为 Azure Blob 容器创建具有存储访问策略的共享访问签名?

Azure 逻辑应用在 inline_code 操作中使用变量

tfs - 如何使用 PowerShell 更新以前 TFS 构建的构建质量?

TFS 工作项标签类型 MaxLength

android - 找不到:couchbase-lite-android-1.4.1-Ionic Android

angular - 如何将 ngrx-effect 中的 Action 的 action.payload 传播到 catchError 或 map 运算符?

angular - 如何测试 AngularDart 组件?

angular - 根据条件停止 Observable 链的执行

sql - 如何根据 ComosDb 中聚合函数的结果对查询结果进行排序?

tfs - 更新 TFS 货架集的步骤是什么?