Ubuntu 下安装 Angular CLI 和 PM2 运行 Angular 应用

倾城 • • 技术文章

Angular CLI 是一个Angular框架的命令行界面工具，可用于直接从命令 Shell 初始化、开发、构建和维护 Angular 应用程序。主要版本的 Angular CLI 遵循支持的主要版本 Angular，但次要版本可以单独发布。

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

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

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。

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

要求

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

  • Node.js和NPM
  • AngularCLI
  • PM2

注意：如果您已在Linux系统（本文为 Ubuntu 20.04.2）上安装了Node.js和NPM，请跳至步骤2。

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

要安装最新版本的Node.js，首先在系统上添加NodeSource存储库，如图所示，然后安装该软件包。不要忘记为要在Linux发行版上安装的Node.js版本运行正确的命令。（node 与 npm 版本对照：https://nodejs.org/zh-cn/download/releases/）

在Ubuntu上安装Node.js.

linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash –        #对于 Node.js version 16


……等等等等等等
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash –        #对于 Node.js version 15
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash –        #对于 Node.js version 14
linuxmi@linuxmi:~/www.linuxmi.com$ sudo apt-get install -y nodejs

在Debian上安装Node.js。

linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_16.x | bash –    #对于 Node.js version 16
……等等等等等等
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_15.x | bash –    #对于 Node.js version 15
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://deb.nodesource.com/setup_14.x | bash –    #对于 Node.js version 14
linuxmi@linuxmi:~/www.linuxmi.com$ sudo apt install -y nodejs

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

linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://rpm.nodesource.com/setup_16.x | bash –    #对于 Node.js version 16
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://rpm.nodesource.com/setup_15.x | bash –    #对于 Node.js version 15
linuxmi@linuxmi:~/www.linuxmi.com$ curl -sL https://rpm.nodesource.com/setup_14.x | bash –    #对于 Node.js version 14
linuxmi@linuxmi:~/www.linuxmi.com$ sudo yum -y install nodejs
linuxmi@linuxmi:~/www.linuxmi.com$ sudo dnf -y install nodejs  [在 RHEL 8 和 Fedora 22及以上版本]

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

linuxmi@linuxmi:~/www.linuxmi.com$ sudo apt install build-essential   [在 Debian/Ubuntu]
linuxmi@linuxmi:~/www.linuxmi.com$ sudo yum install gcc-c++ make          [在 CentOS/RHEL]
linuxmi@linuxmi:~/www.linuxmi.com$ sudo dnf install gcc-c++ make          [在 Fedora]

安装Node.js和NPM后，可以使用以下命令检查其版本。

linuxmi@linuxmi:~/www.linuxmi.com$ npm -v
8.3.1
linuxmi@linuxmi:~/www.linuxmi.com$ node -v
v17.4.0

第2步：安装Angular CLI和PM2

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

linuxmi@linuxmi:~/linuxmi.com$ sudo npm install -g @angular/cli         #安装Angular CLI

[sudo] linuxmi 的密码：

added 187 packages, and audited 188 packages in 33s

23 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities
npm notice
npm notice New minor version of npm available! 8.3.1 -> 8.4.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.4.0
npm notice Run npm install -g [email protected] to update!
npm notice

linuxmi@linuxmi:~/linuxmi.com$ sudo npm install -g pm2                #安装 PM2

npm WARN deprecated [email protected]: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See https://v8.dev/blog/math-random for details.

added 181 packages, and audited 182 packages in 24s

12 packages are looking for funding
run `npm fund` for details

found 0 vulnerabilities

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

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

linuxmi@linuxmi:~/www.linuxmi.com$ cd /www.linuxmi.com/www/
linuxmi@linuxmi:~/www.linuxmi.com/www$ sudo ng new linuxmi-app        #按照提示

[sudo] linuxmi 的密码：
Node.js version v17.4.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

✔ Packages installed successfully.

*** 请告诉我你是谁。

运行

git config --global user.email "[email protected]"
git config --global user.name "Your Name"

来设置您账号的缺省身份标识。
如果仅在本仓库设置身份标识，则省略 --global 参数。

fatal: 无法自动探测邮件地址（得到 'root@linuxmi.(none)'）
Nothing to be done.

 

接下来，进入刚刚创建的应用程序（完整路径为//www.linuxmi.com/www/linuxmi-app）目录，并如图所示为应用程序提供服务。

linuxmi@linuxmi:~/www.linuxmi.com/www$ cd linuxmi-app
linuxmi@linuxmi:~/www.linuxmi.com/www/linuxmi-app$ sudo ng serve

[sudo] linuxmi 的密码： 
Node.js version v17.4.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/releases/.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   1.96 MB | 
polyfills.js          | polyfills     | 299.91 kB | 
styles.css, styles.js | styles        | 173.23 kB | 
main.js               | main          |  53.20 kB | 
runtime.js            | runtime       |   6.52 kB | 

                      | Initial Total |   2.49 MB

Build at: 2022-01-30T03:30:36.345Z - Hash: 093ec58348b27abc - Time: 10300ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

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

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

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

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

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

linuxmi@linuxmi:~/www.linuxmi.com/www$ pm2 start “ng serve” –name linuxmi-app

linuxmi@linuxmi:~/www.linuxmi.com/www$ pm2 start "ng serve" --name linuxmi-app

                        -------------

__//////////////____/////____________/////____//////////_____
 _/////////////////_////////________///////__//////////////___
  _/////_______/////_//////////____/////////_////______//////__
   _////////////////__/////////////////_/////___________/////___
    _//////////////____/////__////////___/////________//////_____
     _/////_____________/////____////_____/////_____//////________
      _/////_____________/////_____________/////___/////___________
       _/////_____________/////_____________/////__////////////////_
        _////______________////______________////__////////////////__


                          Runtime Edition

        PM2 is a Production Process Manager for Node.js applications
                     with a built-in Load Balancer.

                Start and Daemonize any application:
                $ pm2 start app.js

                Load Balance 4 instances of api.js:
                $ pm2 start api.js -i 4

                Monitor in production:
                $ pm2 monitor

                Make pm2 auto-boot at server restart:
                $ pm2 startup

                To go further checkout:
                http://pm2.io/


                        -------------

[PM2] Spawning PM2 daemon with pm2_home=/home/linuxmi/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /usr/bin/bash in fork_mode (1 instance)
[PM2] Done.
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
│ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
│ 0  │ linuxmi-app        │ fork     │ 0    │ online    │ 0%       │ 18.6mb   │
└────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘
linuxmi@linuxmi:~/www.linuxmi.com/www$

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

Angular 版本查看：

linuxmi@linuxmi:~/www.linuxmi.com$ ng version

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

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

The post Ubuntu 下安装 Angular CLI 和 PM2 运行 Angular 应用 first appeared on Linux迷.

版权声明：
作者：倾城
链接：https://www.techfm.club/p/15734.html
来源：TechFM
文章版权归作者所有，未经允许请勿转载。

THE END
分享
二维码
< <上一篇
下一篇>>