Com executar aplicacions angulars mitjançant Angular CLI i PM2


Angular CLI és una interfície de línia d'ordres per a Angular framework, que s'utilitza per crear, construir i executar la vostra aplicació localment mentre es desenvolupa.

Està dissenyat per construir i provar un projecte Angular en un servidor de desenvolupament. Tanmateix, si voleu executar/mantenir les vostres aplicacions vives per sempre en producció, necessiteu un PM2.

PM2 és un gestor de processos de producció popular, avançat i ric en funcions per a aplicacions Node.js amb un equilibrador de càrrega integrat. El seu conjunt de funcions inclou suport per a la supervisió d'aplicacions, gestió eficient de microserveis/processos, execució del mode de clúster d'aplicacions i reinici i tancament elegant de les aplicacions. A més, admet una gestió fàcil dels registres d'aplicacions i molt més.

En aquest article, us mostrarem com executar aplicacions Angular mitjançant Angular CLI i el gestor de processos PM2 Node.js. Això us permet executar la vostra aplicació contínuament durant el desenvolupament.

Heu de tenir els paquets següents instal·lats al vostre servidor per continuar:

  1. Node.js i NPM
  2. CLI angular
  3. PM2

Nota: si ja teniu instal·lats Node.js i NPM al vostre sistema Linux, aneu al pas 2.

Pas 1: instal·lació de Node.js a Linux

Per instal·lar la darrera versió de Node.js, primer afegiu el dipòsit de NodeSource al vostre sistema tal com es mostra i instal·leu el paquet. No oblideu executar l'ordre correcte per a la versió de Node.js que voleu instal·lar a la vostra distribució Linux.

$ 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
# 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
# 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]

A més, també instal·leu eines de desenvolupament al vostre sistema perquè pugueu compilar i instal·lar complements natius des de NPM.

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

Un cop hàgiu instal·lat Node.js i NPM, podeu comprovar les seves versions mitjançant les ordres següents.

$ node -v
$ npm -v

Pas 2: instal·lació d'Angular CLI i PM2

A continuació, instal·leu Angular CLI i PM2 mitjançant el gestor de paquets npm tal com es mostra. A les ordres següents, l'opció -g significa instal·lar els paquets de manera global, utilitzable per tots els usuaris del sistema.

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

Pas 3: Creació d'un projecte angular amb Angular CLI

Ara aneu al directori webroot del vostre servidor i, a continuació, creeu, creeu i doneu servei a la vostra aplicació Angular (anomenada sysmon-app, substituïu-la pel nom de la vostra aplicació) mitjançant Angular CLI.

$ cd /srv/www/htdocs/
$ sudo ng new sysmon-app        #follow the prompts

A continuació, aneu al directori de l'aplicació (la ruta completa és /srv/www/htdocs/sysmon-app) que s'acaba de crear i serveix a l'aplicació tal com es mostra.

$ cd sysmon-app
$ sudo ng serve

Des de la sortida de l'ordre ng serve, podeu veure que l'aplicació Angular no s'executa en segon pla, ja no podeu accedir a l'indicador d'ordres. Per tant, no podeu executar cap altra ordre mentre s'està executant.

Per tant, necessiteu un gestor de processos per controlar i gestionar l'aplicació: executeu-la contínuament (per sempre) i també habiliteu-la per iniciar-se automàticament a l'arrencada del sistema, tal com s'explica a la secció següent.

Abans d'anar a la secció següent, finalitzeu el procés prement [Ctl + C] per alliberar l'indicador d'ordres.

Pas 4: executar el projecte Angular per sempre utilitzant PM2

Per fer que la vostra nova aplicació s'executi en segon pla, alliberant l'indicador d'ordres, utilitzeu PM2 per servir-la, tal com es mostra. PM2 també ajuda a les tasques comunes d'administració del sistema, com ara reiniciar en cas d'error, aturar-se, tornar a carregar configuracions sense temps d'inactivitat i molt més.

$ pm2 start "ng serve" --name sysmon-app

A continuació, per accedir a la interfície web de la vostra aplicació, obriu un navegador i navegueu amb l'adreça http://localhost:4200 tal com es mostra a la captura de pantalla següent.

La pàgina d'inici de l'Angular CLI: https://angular.io/cli
Pàgina d'inici de PM2: http://pm2.keymetrics.io/

En aquesta guia, hem mostrat com executar aplicacions Angular mitjançant Angular CLI i el gestor de processos PM2. Si teniu alguna idea addicional per compartir o preguntes, poseu-vos en contacte amb nosaltres mitjançant el formulari de comentaris que trobareu a continuació.