Cómo ejecutar aplicaciones angulares usando Angular CLI y PM2


Angular CLI es una interfaz de línea de comandos para el marco Angular, que se utiliza para crear, construir y ejecutar su aplicación localmente mientras se desarrolla.

Está diseñado para construir y probar un proyecto Angular en un servidor de desarrollo. Sin embargo, si desea ejecutar/mantener sus aplicaciones vivas para siempre en producción, necesita un administrador de procesos Node.js como PM2.

PM2 es un administrador de procesos de producción popular, avanzado y rico en funciones para aplicaciones Node.js con un equilibrador de carga integrado. Su conjunto de características incluye soporte para el monitoreo de aplicaciones, administración eficiente de microservicios/procesos, ejecución del modo de clúster de aplicaciones y reinicio y apagado elegantes de aplicaciones. Además, admite una gestión sencilla de los registros de aplicaciones y mucho más.

En este artículo, le mostraremos cómo ejecutar aplicaciones Angular usando Angular CLI y PM2 Node.js process manager. Esto le permite ejecutar su aplicación continuamente durante el desarrollo.

Debe tener los siguientes paquetes instalados en su servidor para continuar:

  1. Node.js and NPM
  2. Angular CLI
  3. PM2

Nota: Si ya tiene Node.js y NPM instalados en su sistema Linux, vaya al Paso 2.

Paso 1: instalar Node.js en Linux

Para instalar la última versión de Node.js, primero agregue el repositorio NodeSource en su sistema como se muestra e instale el paquete. No olvide ejecutar el comando correcto para la versión de Node.js que desea instalar en su distribución de 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]

Además, también instale herramientas de desarrollo en su sistema para que pueda compilar e instalar complementos nativos 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]

Una vez que tenga Node.js y NPM instalados, puede verificar sus versiones usando los siguientes comandos.

$ node -v
$ npm -v

Paso 2: Instalación de Angular CLI y PM2

A continuación, instale Angular CLI y PM2 usando el administrador de paquetes npm como se muestra. En los siguientes comandos, la opción -g significa instalar los paquetes globalmente, que pueden utilizar todos los usuarios del sistema.

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

Paso 3: Crear un proyecto angular usando CLI angular

Ahora muévase al directorio webroot de su servidor, luego cree, compile y sirva su aplicación Angular (llamada sysmon-app , reemplace esto con el nombre de su aplicación) usando Angular CLI.

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

A continuación, muévase al directorio de la aplicación (la ruta completa es /srv/www/htdocs/sysmon-app ) que acaba de crearse y sirve la aplicación como se muestra.

$ cd sysmon-app
$ sudo ng serve

Desde la salida del comando ng serve, puede ver que la aplicación Angular no se está ejecutando en segundo plano, ya no puede acceder al símbolo del sistema. Por lo tanto, no puede ejecutar ningún otro comando mientras se está ejecutando.

Por lo tanto, necesita un administrador de procesos para controlar y administrar la aplicación: ejecútela continuamente (para siempre) y también habilítela para que se inicie automáticamente en el arranque del sistema, como se explica en la siguiente sección.

Antes de pasar a la siguiente sección, finalice el proceso presionando [Ctl + C] para liberar el símbolo del sistema.

Paso 4: Ejecutar Angular Project Forever usando PM2

Para hacer que su nueva aplicación se ejecute en segundo plano, liberando el símbolo del sistema, use PM2 para servirla, como se muestra. PM2 también ayuda en las tareas comunes de administración del sistema, como reiniciar en caso de falla, detener, recargar configuraciones sin tiempo de inactividad y mucho más.

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

A continuación, para acceder a la interfaz web de su aplicación, abra un navegador y navegue usando la dirección http:/localhost: 4200 como se muestra en la siguiente captura de pantalla.

Página de inicio de PM2: http://pm2.keymetrics.io/

En esta guía, hemos mostrado cómo ejecutar aplicaciones Angular usando Angular CLI y el administrador de procesos PM2. Si tiene alguna idea adicional para compartir o preguntas, comuníquese con nosotros a través del formulario de comentarios a continuación.