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

将Angular 6应用程序部署到Cloud Foundry
2018年11月16日 09:43 帅的相对论

我们讨论了两个有趣的开源技术,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应用程序。

财经自媒体联盟更多自媒体作者

新浪首页 语音播报 相关新闻 返回顶部