heroku_如何在Heroku上部署Angular App

heroku

大家好，今天，我们将讨论在Heroku Server上部署代码时如何在运行时更改Angular应用程序环境。

因此，首先我们讨论为什么在运行时需要此环境。 情况描述如下：

通常，每个应用程序都部署在多个环境中，例如，每个环境的登台，产品和服务URL都会不同。 解决方案是拥有多个环境文件，并在部署时动态选择其中之一。

让我们举个例子，您有这种类型的环境文件：

这是您的environment.prod.ts文件，您还有另一个api_url 。 因此，将制作另一个环境文件，如下所示：

我们已将此文件命名为environment.test.ts并将api_url更改为http://www.yahoo.com 。 因此，现在您有了三个环境文件。 一种是针对您的本地用户，一种是产品，另一种是测试。

现在，下一步是如何在运行时选择环境文件。 下面给出了此步骤：

1 。 打开文件angular.cli.json 。 您会发现这样的文件：

我们将在环境部分中添加新的environment.test.ts文件，然后我们将在此部分中添加：

2 。 至此，第一步完成。 现在，是时候继续下一步了，为此打开您的package.json文件。 您会发现这样的文件：

在图像中，您可以看到postinstall部分，并将其替换为以下内容：

3 。 我们的应用程序代码现已完成。 下一步是在Heroku中创建环境变量。 在heroku上打开您的应用，转到设置。

然后选择显示配置变量。 您可以看到该图像：

在图像的末尾，您可以找到“键和值”部分。 我们将环境变量放在这里：

然后单击添加按钮以添加变量。 现在添加了变量。

该过程完成。 部署应用程序时，将运行postinstall命令，并将在heroku上找到环境变量。 然后，您的应用程序将与environment.test.ts文件一起部署。

如果需要帮助在heroku上部署angular webapp，可以遵循以下步骤：
https://www.infoxen.com/blog/how-to-deploy-angular-6-app-on-heroku/

先前发布在 https://medium.com/@abhishek.garg_53728/change-environment-at-runtime-in-angular-with-heroku-39478c3dfcd0


免责声明 ：本文中表达的信息仅属于作者，而不一定属于作者的雇主，组织，委员会或其他团体或个人。

翻译自: https://hackernoon.com/how-to-deploy-angular-app-on-heroku-kr193uvo

heroku