Angular CLI是Angular框架的命令行界面,用于在开发过程中在本地创建,构建和运行应用程序。
它旨在在开发服务器上构建和测试Angular项目。但是,如果要在生产中永久运行/保持应用程序处于活动状态,则需要Node.js流程管理器,例如PM2。
PM2是Node.js应用程序的流行,高级且功能丰富的生产流程管理器,具有内置负载均衡器。其功能集包括对应用程序监视,微服务/进程的高效管理,运行应用程序集群模式以及应用程序的正常重启和关闭的支持。此外,它还支持轻松管理应用程序日志等等。
在本文中,我们将向您展示如何使用Angular CLI和PM2 Node.js流程管理器运行Angular应用程序。这允许您在开发期间连续运行应用程序。
要求
您必须在服务器上安装以下软件包才能继续:
- Node.js和NPM
- AngularCLI
- PM2
注意:如果您已在Linux系统上安装了Node.js和NPM,请跳至步骤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 – #对于 Node.js version 12
$ curl -sL https://deb.nodesource.com/setup_11.x | sudo -E bash – #对于 Node.js version 11
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash – #对于 Node.js version 10
$ sudo apt install -y nodejs
在Debian上安装Node.js。
# curl -sL https://deb.nodesource.com/setup_12.x | bash – #对于 Node.js version 12
# curl -sL https://deb.nodesource.com/setup_11.x | bash – #对于 Node.js version 11
# curl -sL https://deb.nodesource.com/setup_10.x | bash – #对于 Node.js version 10
# apt install -y nodejs
在CentOS,RHEL和Fedora上安装Node.js
# curl -sL https://rpm.nodesource.com/setup_12.x | bash – #对于 Node.js version 12
# curl -sL https://rpm.nodesource.com/setup_11.x | bash – #对于 Node.js version 11
# curl -sL https://rpm.nodesource.com/setup_10.x | bash – #对于 Node.js version 10
# yum -y install nodejs
# dnf -y install nodejs [在 RHEL 8 和 Fedora 22及以上版本]
此外,还要在系统上安装开发工具,以便从NPM编译和安装原生插件。
$ sudo apt install build-essential [在 Debian/Ubuntu]
# yum install gcc-c++ make [在 CentOS/RHEL]
# dnf install gcc-c++ make [在 Fedora]
安装Node.js和NPM后,可以使用以下命令检查其版本。
linuxidc@linuxidc:~/www.linuxidc.com$ node -v
v10.16.1
linuxidc@linuxidc:~/www.linuxidc.com$ npm -v
6.9.0
第2步:安装Angular CLI和PM2
接下来,使用npm包管理器安装Angular CLI和PM2,如图所示。 在以下命令中,-g选项表示全局安装软件包 – 可供所有系统用户使用。
linuxidc@linuxidc:~/www.linuxidc.com$ sudo npm install -g @angular/cli #安装Angular CLI
[sudo] linuxidc 的密码:
/usr/local/bin/ng -> /usr/local/lib/node_modules/@angular/cli/bin/ng
> @angular/cli@8.2.0 postinstall /usr/local/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js
+ @angular/cli@8.2.0
added 240 packages from 185 contributors in 25.791s
linuxidc@linuxidc:~/www.linuxidc.com$ sudo npm install -g pm2 #安装 PM2
第3步:使用Angular CLI创建Angular项目
现在进入服务器的webroot目录,然后使用Angular CLI创建,构建和提供Angular应用程序(称为sysmon-app,将其替换为应用程序的名称)。
$ cd /www.linuxidc.com/www/
$ sudo ng new linuxidc-app #按照提示
接下来,进入刚刚创建的应用程序(完整路径为//www.linuxidc.com/www/linuxidc-app)目录,并如图所示为应用程序提供服务。
linuxidc@linuxidc:~/www.linuxidc.com/www$ cd linuxidc-app
linuxidc@linuxidc:~/www.linuxidc.com/www/linuxidc-app$ sudo ng serve
10% building 3/3 modules 0 activeℹ 「wds」: Project is running at http://localhost:4200/webpack-dev-server/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.02 MB [initial] [rendered]
Date: 2019-08-06T02:34:59.415Z – Hash: 2ccc3c814b056e7d036e – Time: 21047ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ 「wdm」: Compiled successfully.
从ng serve命令的输出中,您可以看到Angular应用程序未在后台运行,您无法再访问命令提示符。 因此,在运行时不能执行任何其他命令。
因此,您需要一个流程管理器来控制和管理应用程序:连续(永久地)运行它,并使其能够在系统启动时自动启动,如下一节所述。
在转到下一部分之前,按[Ctl + C]以释放命令提示符来终止该过程。
第4步:使用PM2永远运行Angular项目
要使新应用程序在后台运行,请释放命令提示符,使用PM2为其提供服务,如图所示。 PM2还可以帮助执行常见的系统管理任务,例如在故障时重新启动,停止,重新加载配置而无需停机等等。
linuxidc@linuxidc:~/www.linuxidc.com/www/linuxidc-app$ pm2 start “ng serve” –name linuxidc-app
[PM2] Starting /bin/bash in fork_mode (1 instance)
[PM2] Done.
┌──────────────┬────┬──────┬────────┬────┬─────┬────────────┐
│ Name │ id │ mode │ status │ ↺ │ cpu │ memory │
├──────────────┼────┼──────┼────────┼────┼─────┼────────────┤
│ linuxidc-app │ 1 │ fork │ online │ 32 │ 0% │ 497.0 MB │
│ linuxidc-app │ 2 │ fork │ online │ 0 │ 0% │ 6.5 MB │
└──────────────┴────┴──────┴────────┴────┴─────┴────────────┘
Use `pm2 show <id|name>` to get more details about an app
接下来,要访问应用程序的Web界面,请打开浏览器并使用地址http://localhost:4200进行导航,如以下屏幕截图所示。
Angular CLI主页:https://angular.io/cli
PM2主页:http://pm2.keymetrics.io/
在本指南中,我们展示了如何使用Angular CLI和PM2流程管理器运行Angular应用程序。 如果您有任何其他想法可以分享或提出问题,请通过下面的留言栏联系我们。
本文永久更新链接地址:https://www.linuxidc.com/Linux/2019-08/159862.htm