Búsqueda de sitios web

Cómo crear y ejecutar aplicaciones Angular 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 monitoreo de aplicaciones, administración eficiente de microservicios/procesos, ejecución en modo de clúster de aplicaciones y reinicio y cierre ordenados 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 el administrador de procesos PM2 Node.js. Esto le permite ejecutar su aplicación continuamente durante el desarrollo.

Requisitos

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

  • Node.js y NPM
  • CLI angular
  • PM2

Nota: Si ya tiene Node.js y NPM instalados en su sistema Linux, vaya a 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.

Instalar Node.js en Ubuntu

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x -------------
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x -------------
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x -------------
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&\
sudo apt-get install -y nodejs

Instalar Node.js en Debian

------------- For Node.js v19.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&\
sudo apt-get install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&\
sudo apt-get install -y nodejs

Instale Node.js en distribuciones basadas en RHEL

------------- For Node.js v19.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v18.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v16.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
sudo yum install -y nodejs

------------- For Node.js v14.x ------------- 
curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
sudo yum install -y nodejs

Además, instale también herramientas de desarrollo en su sistema para que pueda compilar e instalar complementos nativos desde 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 tengas Node.js y NPM instalados, puedes 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, utilizables por 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 Angular CLI

Ahora vaya al directorio webroot de su servidor, luego cree, construya y sirva su aplicación Angular (llamada sysmon-app, reemplácela con el nombre de su aplicación) usando CLI angular.

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

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

cd sysmon-app
sudo ng serve

Desde el resultado del comando ng server, puede ver que la aplicación Angular no se está ejecutando en segundo plano y 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 al iniciar el 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 para siempre 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 a tareas comunes de administración del sistema, como reiniciar en caso de falla, detener y 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.

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.