将Angular 6应用程序部署到Cloud Foundry

我们讨论了两个有趣的开源技术，Angular和Cloud Foundry，并向您展示如何将Web应用程序部署到云。

介绍

在本文中，我将介绍在Cloud Foundry上部署Angular 6应用程序的步骤。本文适用于了解Angular和Cloud Foundry的开发人员。

Cloud Foundry

Cloud Foundry是一个开源平台即服务（PaaS），为您提供云，开发人员框架和应用程序服务的选择。Cloud Foundry旨在在任何云IaaS提供商上进行配置，部署，管理，扩展和升级。

Angular

Angular是一个JavaScript UI框架。Angular代码主要用TypeScript编写。Angular帮助我们组合UI模板，依赖注入和端到端测试。Angular帮助开发人员开发桌面和移动的单页Web应用程序（SPA）。

Cloud Foundry CLI

Cloud Foundry使用Cloud Foundry命令行界面（CF CLI）将应用程序部署到云。我们将在manifest.yml文件中提及应用程序部署参数。我们可以使用Cloud Foundry中的一些内置构建包来部署我们的应用程序。构建包只不过是我们部署的应用程序的框架和运行时支持。

在Cloud Foundry中部署Angular应用程序

在部署Angular应用程序之前，我们需要使用Angular CLI生成可部署的文件。为此，我们需要运行一个命令 ng build --prod。 --prod 指示Angular CLI创建可部署文件的生产版本。

运行上述命令后，Angular CLI将在项目文件夹中创建一个'dist'文件夹。这个'dist'将包含所有可部署的文件。Angular将所有TypeScript代码转换为JavaScript以创建这些文件。

这些文件仅包含HTML，JavaScript和CSS文件。所以，基本上，这些文件是静态文件。即，这些都是UI文件，不需要任何后端代码。因此，我们可以在将这些部署到云时使用'staticfile_buildpack'。

我们需要创建manifest.yml文件以部署到Cloud Foundry。当我们使用staticfile_buildpack来部署我们的代码时，我们还需要一个Staticfile文件来配置Nginx（Cloud Foundry使用Nginx Web服务器来部署静态网站）。

manifest.yml文件将包含将应用程序部署到Cloud Foundry所需的参数。例如，要分配的内存，要使用的构建包等。

在此演示应用程序中，Staticfile是一个空文本文件。如果需要，我们可以为Staticfile中的Nginx服务器提供一些配置设置。

在此之后，进入'dist'文件夹并使用您的云服务提供商提供的详细信息登录Cloud Foundry。现在，运行' CF push'命令。在本教程中，我使用Pivotal Cloud代工作为我的云服务提供商。

这会将您的Angular应用程序部署到Cloud Foundry。

部署时，Cloud Foundry CLI将提供访问我们的应用程序的路径。如果没有，请使用该 CF apps 命令获取路由。

我们可以在浏览器中访问该URL以访问我们的Web应用程序。