我有一个 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/