Azure上的Angle 2应用程序读取应用程序设置 [英] angular 2 app on azure read app settings

问题描述

我想使用VSTS CI/CD将angular 2应用程序部署到不同的Web应用程序插槽(例如dev，staging和prod).每个插槽应指向不同的Web API.通常一个人会在应用程序内部指定三个不同的环境文件，但是缺点是我必须在不同的环境中构建三遍.

I want to deploy an angular 2 app to different web app slots (let's say dev, staging and prod) using VSTS CI/CD. Each slot should point to a different web api. Normally one would specify three different environment files inside the app, but the downside is that I would have to build three times with different environments.

我要实现的是只有两个构建，即dev和prod.首先将开发get部署到开发插槽，然后将prod构建get部署到暂存，然后将相同的构建部署到生产插槽.我可以为每个广告位定义应用设置.它们像环境变量一样对待.

What I want to achieve is to have only two builds, dev and prod. The dev get's deployed to the dev slot and the prod build get's deployed to staging first and then the same build should be deployed to the production slot. I can define app settings for each slot. They are treated like environment variables.

是否可以从angular 2应用程序中读取这些配置设置，或者我还缺少其他东西?

Is there a way to read those config settings from within an angular 2 app or am I missing something else?

推荐答案

我不鼓励您将同一版本部署两次/三次，因为您会错过代码最小化和生产服务器捆绑的机会.

I'd discourage you from having the same build deployed two/three separate times as you'd miss out on code minification and bundling for your production server.

您可以做的事是在VSTS中设置构建任务:例如，当您将代码推送到生产分支时，您可以运行npm your-build-task --prod，而在推送时只需运行npm yourbuild-task掌握或发展分支机构等.

What you could do is set up build tasks in VSTS: so you could, for instance, run npm your-build-task --prod when your code is pushed to a production branch, and simply npm yourbuild-task when pushed to master or a development branch, etc.

在您的AppModule(或提供服务的任何模块)中，您可以设置以下内容:

In your AppModule (or whatever module you have your services in), you can set up the following:

providers: [
...
  {
    provide: API_CONFIG, useFactory: apiConfigFactory
  }
...
]

...

export function apiConfigFactory() {
  if (environment.production) {
    return MY_PROD_API_CONFIG;
  } else {
    return MY_DEV_API_CONFIG;
  }
}

这样，您可以在每个配置对象中设置基本URL:一个指向prod，一个指向dev，然后只需注入API_CONFIG即可获取正确的基本API URL.

And that way, you can set up your base URLs in each config object: one pointing to prod, one pointing to dev, and you can simply inject API_CONFIG to get the correct base API URLs.

但是，如果您希望保持相同的版本，则可以执行与上面类似的操作，但是在apiFactoryConfig函数中，您需要一些逻辑来区分环境:例如检查浏览器的基础azurewebsites.net URL或类似的东西.

But, if you'd like to keep the same build, you can do something similar above, but in your apiFactoryConfig function, you'd need some logic to tell the environments apart: say like checking the browser's base azurewebsites.net URL or something like that.

这篇关于Azure上的Angle 2应用程序读取应用程序设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！