3

我想使用 VSTS CI/CD 将 Angular 2 应用程序部署到不同的 Web 应用程序插槽（比如说开发、登台和产品）。每个插槽应指向不同的 Web api。通常会在应用程序中指定三个不同的环境文件，但缺点是我必须使用不同的环境构建三次。

我想要实现的是只有两个构建，dev 和 prod。dev get 部署到 dev slot，prod build get 先部署到 staging，然后同一个 build 应该部署到 production slot。我可以为每个插槽定义应用程序设置。它们被视为环境变量。

有没有办法从 angular 2 应用程序中读取这些配置设置，还是我错过了其他东西？

4

2 回答 2

2

我不鼓励您将相同的构建部署两次/三次，因为您会错过生产服务器的代码缩小和捆绑。

您可以做的是在 VSTS 中设置构建任务：例如，您可以npm your-build-task --prod在将代码推送到生产分支时运行，或者仅npm yourbuild-task在推送到主分支或开发分支时运行，等等。

在您的 AppModule（或您的服务所在的任何模块）中，您可以设置以下内容：

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。

但是，如果你想保持相同的构建，你可以在上面做类似的事情，但是在你的apiFactoryConfig函数中，你需要一些逻辑来区分环境：比如检查浏览器的基本azurewebsites.netURL 或类似的东西。

于 2017-03-06T20:27:10.070 回答
1

只有后端语言可以在运行时将 APP 设置作为环境变量访问。由于 Angular 2 在前端，我们不能直接从前端读取这些设置。一种解决方法是通过暴露端点的后端读取应用程序设置，然后通过 Angular 2 应用程序中的 AJAX 调用访问该端点。

您可以查看我之前发布的 PHP 示例代码以阅读 APP 设置的帖子。

于 2017-03-16T07:55:54.923 回答