如何使用Angular CLI和PM2运行Angular应用程序

在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。

Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。

它旨在在开发服务器上构建和测试Angular项目。 但是,如果要在生产中永久运行/保持应用程序处于活动状态,则需要Node.js流程管理器,例如PM2

PM2Node.js应用程序的流行,高级且功能丰富的生产流程管理器,具有内置负载均衡器。 其功能集包括对应用程序监视,微服务/进程的高效管理,运行应用程序集群模式以及应用程序的正常重启和关闭的支持。 此外,它还支持轻松管理应用程序日志等等。

在本文中,我们将向您展示如何使用Angular CLIPM2 Node.js流程管理器运行Angular应用程序。 这允许您在开发期间连续运行应用程序。

要求

您必须在服务器上安装以下软件包才能继续:

  1. Node.js和NPM
  2. 角度CLI
  3. PM2

注意 :如果您已在Linux系统上安装了Node.jsNPM ,请跳至第2步

第1步:在Linux中安装Node.js.

要安装最新版本的Node.js ,首先在系统上添加NodeSource存储库 ,如图所示,然后安装该软件包。 不要忘记为要在Linux发行版上安装的Node.js版本运行正确的命令。

在Ubuntu上安装Node.js.

$ curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -        #for Node.js version 12
$ curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash -        #for Node.js version 11
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -        #for Node.js version 10
$ sudo apt install -y nodejs

在Debian上安装Node.js.

# curl -sL https://deb.nodesource.com/setup_12.x | bash -    #for Node.js version 12
# curl -sL https://deb.nodesource.com/setup_11.x | bash -    #for Node.js version 11
# curl -sL https://deb.nodesource.com/setup_10.x | bash -     #for Node.js version 10
# apt install -y nodejs

在CentOS,RHEL和Fedora上安装Node.js.

# curl -sL https://rpm.nodesource.com/setup_12.x | bash -    #for Node.js version 12
# curl -sL https://rpm.nodesource.com/setup_11.x | bash -    #for Node.js version 11
# curl -sL https://rpm.nodesource.com/setup_10.x | bash -    #for Node.js version 10
# yum -y install nodejs
# dnf -y install nodejs   [On RHEL 8 and Fedora 22+ versions]

此外,还要在系统上安装开发工具,以便从NPM编译和安装本机插件。

$ sudo apt install build-essential  [On Debian/Ubuntu]
# yum install gcc-c++ make          [On CentOS/RHEL]
# dnf install gcc-c++ make          [On Fedora]

安装Node.jsNPM后 ,可以使用以下命令检查其版本。

$ node -v
$ npm -v
检查Node.js和NPM版本

检查Node.js和NPM版本

第2步:安装Angular CLI和PM2

接下来,使用npm包管理器安装Angular CLIPM2 ,如图所示。 在以下命令中, -g选项表示全局安装软件包 - 可供所有系统用户使用。

$ sudo npm install -g @angular/cli        #install Angular CLI
$ sudo npm install -g pm2                 #install PM2

第3步:使用Angular CLI创建Angular项目

现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app ,将其替换sysmon-app的名称)。

$ cd /srv/www/htdocs/
$ sudo ng new sysmon-app        #follow the prompts
创建新的角度应用程序

创建新的角度应用程序

接下来,进入刚刚创建的应用程序(完整路径为/srv/www/htdocs/sysmon-app )目录,并如图所示为应用程序提供服务。

$ cd sysmon-app
$ sudo ng serve
使用Angular CLI提供Angular App

使用Angular CLI提供Angular App

ng serve命令的输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符。 因此,在运行时不能执行任何其他命令。

因此,您需要一个流程管理器来控制和管理应用程序:连续(永久地)运行它,并使其能够在系统启动时自动启动,如下一节所述。

在转到下一部分之前,按[Ctl + C]以释放命令提示符来终止该过程。

终止正在运行的Angular App

终止正在运行的Angular App

第4步:使用PM2永远运行Angular项目

要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。 PM2还可以帮助执行常见的系统管理任务,例如在故障时重新启动,停止,重新加载配置而无需停机等等。

$ pm2 start "ng serve" --name sysmon-app
永远运行Angular App

永远运行Angular App

接下来,要访问应用程序的Web界面,请打开浏览器并使用地址http://localhost:4200进行导航,如以下屏幕截图所示。

从浏览器访问Sysmon Angular App

从浏览器访问Sysmon Angular App

Angular CLI主页https//angular.io/cli
PM2主页http//pm2.keymetrics.io/

在本指南中,我们展示了如何使用Angular CLIPM2流程管理器运行Angular应用程序。 如果您有任何其他想法可以分享或提出问题,请通过下面的反馈表联系我们。