在 Angular4 CLI 中阅读 Azure 应用程序设置

Question

我有一个部署在 Azure 上的 Angular4 Web 应用程序。现在我想将此应用程序部署到 Azure 上的其他环境：一个用于测试，一个用于验收，一个用于生产。每个环境都有不同的 API 端点，并且可能有其他变量，例如 Application Insights。所有这些环境都在生产模式下运行 Angular。

Angular 建议您这样做的方式是通过环境文件（environment.test.ts、enviroment.acc.ts、environment.prod.ts）。例如，我可以在这些文件中配置所有不同的 API 端点，并使用 --prod 运行我的构建以用于生产。

但这不是我想要的方式。我想使用部署的完全相同的应用程序包来测试我的验收环境，而无需重新构建项目。在 Visual Studio Online 中，这也很容易配置。

重点是：我怎样才能使我的 API 端点以这种方式在每个环境中有所不同？

我想要这样做的方式是通过 Azure 中的应用程序设置。但是 Angular 无法访问这些环境变量，因为它是在客户端运行的。 Node.js 在服务器端运行并且可以获得这些应用程序设置 - 但如果这是我需要这样做的方式，我如何让 Node.js（在 Angular4 CLI 中使用）将这些服务器变量发送到客户端？该解决方案的性能影响又如何？

您是如何为 Azure 上的 Angular4 应用解决这个问题的？使用 Azure 应用设置是否无法解决此问题？

Answer 1

对于有相同问题的每个人：我没有按照上面描述的方式解决这个问题。

最后，我按照 Angular 要求的方式进行了操作：因此为 dev 重新构建，为 acc 重新构建，为 prod 重新构建。 在 Visual Studio Online 中，在构建时，它会构建和测试我们的代码，并保存未编译/未压缩的代码。在发布时，它会再次对其进行构建和测试，并使用正确的环境变量将其发布到正确的环境中（例如--prod）。

我认为没有其他方法可以解决此问题。

Answer 2

这个解决方案很老派，但很有效！尽管您可以为此目的使用分支或标记，而不是将代码克隆到包中。 如您所说，最好的解决方案是将 Azure 应用程序设置保存为环境变量，因此您应该使用 node.js 实现 API 并共享所需的变量。 当然，由于额外的 http 调用会产生影响，但这只是应用程序启动时的一次，大约最长 5 毫秒，并且取决于每个程序策略是否有影响。 另一种选择是将变量移动到资产文件夹中的 JSON 文件，并在部署运行时使用发布管道进行更改。这更容易实现，但缺点是您将不得不使用发布变量而不是应用程序设置，如果您有配置更改，则必须先更新变量值并重新部署它，尽管这在大多数情况下都有效，但有时您想要更改就像一个连接字符串，你将不得不重新部署。