Recherche de site Web

Comment créer et exécuter des applications angulaires à l'aide de Angular CLI et PM2

Angular CLI est une interface de ligne de commande pour le framework Angular, qui est utilisée pour créer, construire et exécuter votre application localement pendant le développement.

Il est conçu pour créer et tester un projet Angular sur un serveur de développement. Cependant, si vous souhaitez exécuter/maintenir vos applications en vie pour toujours en production, vous avez besoin d'un gestionnaire de processus Node.js tel que PM2.

PM2 est un gestionnaire de processus de production populaire, avancé et riche en fonctionnalités pour les applications Node.js avec un équilibreur de charge intégré.

Son ensemble de fonctionnalités comprend la prise en charge de la surveillance des applications, la gestion efficace des micro-services/processus, l'exécution du mode cluster d'applications et le redémarrage et l'arrêt progressifs des applications. En outre, il prend en charge une gestion facile des journaux d’applications, et bien plus encore.

Dans cet article, nous allons vous montrer comment exécuter des applications Angular à l'aide de la Angular CLI et du gestionnaire de processus PM2 Node.js. Cela vous permet d'exécuter votre application en continu pendant le développement.

Exigences

Vous devez avoir les packages suivants installés sur votre serveur pour continuer :

  • Node.js et NPM
  • CLI angulaire
  • PM2

Remarque : Si Node.js et NPM sont déjà installés sur votre système Linux, accédez à Étape 2.

Étape 1 : Installation de Node.js sous Linux

Pour installer la dernière version de Node.js, commencez par ajouter le dépôt NodeSource sur votre système comme indiqué et installez le package. N'oubliez pas d'exécuter la bonne commande pour la version Node.js que vous souhaitez installer sur votre distribution Linux.

Installez Node.js sur 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

Installer Node.js sur 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

Installez Node.js sur les distributions basées sur 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

En outre, installez également des outils de développement sur votre système afin de pouvoir compiler et installer des modules complémentaires natifs à partir 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]

Une fois Node.js et NPM installés, vous pouvez vérifier leurs versions à l'aide des commandes suivantes.

node -v
npm -v

Étape 2 : Installation de Angular CLI et PM2

Ensuite, installez Angular CLI et PM2 à l'aide du gestionnaire de packages npm comme indiqué. Dans les commandes suivantes, l'option -g signifie installer les packages globalement – utilisables par tous les utilisateurs du système.

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

Étape 3 : Création d'un projet angulaire à l'aide de la CLI angulaire

Accédez maintenant au répertoire webroot de votre serveur, puis créez, construisez et servez votre application Angular (appelée sysmon-app, remplacez-la par le nom de votre application) en utilisant CLI angulaire.

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

Ensuite, accédez au répertoire de l'application (le chemin complet est /srv/www/htdocs/sysmon-app) qui vient d'être créé et sert l'application comme indiqué.

cd sysmon-app
sudo ng serve

À partir du résultat de la commande ng serve, vous pouvez voir que l'application Angular ne s'exécute pas en arrière-plan, vous ne pouvez plus accéder à l'invite de commande. Par conséquent, vous ne pouvez exécuter aucune autre commande pendant son exécution.

Vous avez donc besoin d'un gestionnaire de processus pour contrôler et gérer l'application : exécutez-la en continu (pour toujours) et activez-la également pour démarrer automatiquement au démarrage du système, comme expliqué dans la section suivante.

Avant de passer à la section suivante, terminez le processus en appuyant sur [Ctl + C] pour libérer l'invite de commande.

Étape 4 : Exécuter Angular Project Forever à l’aide de PM2

Pour que votre nouvelle application s'exécute en arrière-plan, libérant ainsi l'invite de commande, utilisez PM2 pour la servir, comme indiqué. PM2 facilite également les tâches courantes d'administration système telles que le redémarrage en cas de panne, l'arrêt et le rechargement des configurations sans temps d'arrêt, et bien plus encore.

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

Ensuite, pour accéder à l'interface Web de votre application, ouvrez un navigateur et naviguez en utilisant l'adresse http://localhost:4200 comme indiqué dans la capture d'écran suivante.

Dans ce guide, nous avons montré comment exécuter des applications Angular à l'aide de la Angular CLI et du gestionnaire de processus PM2. Si vous avez des idées supplémentaires à partager ou des questions, contactez-nous via le formulaire de commentaires ci-dessous.