Ricerca nel sito web

Come creare ed eseguire app Angular utilizzando Angular CLI e PM2

Angular CLI è un'interfaccia a riga di comando per il framework Angular, che viene utilizzata per creare, costruire ed eseguire l'applicazione localmente durante lo sviluppo.

È progettato per creare e testare un progetto Angular su un server di sviluppo. Tuttavia, se desideri eseguire/mantenere attive le tue applicazioni per sempre in produzione, hai bisogno di un gestore di processi Node.js come PM2.

PM2 è un gestore di processi di produzione popolare, avanzato e ricco di funzionalità per applicazioni Node.js con un bilanciatore del carico integrato.

Il suo set di funzionalità include il supporto per il monitoraggio delle applicazioni, la gestione efficiente di microservizi/processi, l'esecuzione della modalità cluster delle applicazioni e il riavvio e arresto graduale delle applicazioni. Inoltre, supporta una facile gestione dei registri delle applicazioni e molto altro ancora.

In questo articolo, ti mostreremo come eseguire applicazioni Angular utilizzando la CLI Angular e il gestore dei processi PM2 Node.js. Ciò ti consente di eseguire l'applicazione in modo continuo durante lo sviluppo.

Requisiti

Per procedere è necessario che sul server siano installati i seguenti pacchetti:

  • Node.js e NPM
  • CLI angolare
  • PM2

Nota: se hai già Node.js e NPM installati sul tuo sistema Linux, passa a Passaggio 2.

Passaggio 1: installazione di Node.js in Linux

Per installare la versione più recente di Node.js, aggiungi innanzitutto il repository NodeSource sul tuo sistema come mostrato e installa il pacchetto. Non dimenticare di eseguire il comando corretto per la versione di Node.js che desideri installare sulla tua distribuzione Linux.

Installa Node.js su 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

Installa Node.js su 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

Installa Node.js su distribuzioni basate su 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

Inoltre, installa anche strumenti di sviluppo sul tuo sistema in modo da poter compilare e installare componenti aggiuntivi nativi da 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 volta installati Node.js e NPM, puoi verificarne le versioni utilizzando i seguenti comandi.

node -v
npm -v

Passaggio 2: installazione della CLI Angular e PM2

Successivamente, installa Angular CLI e PM2 utilizzando il gestore pacchetti npm come mostrato. Nei seguenti comandi, l'opzione -g significa installare i pacchetti globalmente, utilizzabili da tutti gli utenti del sistema.

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

Passaggio 3: creazione di un progetto Angular utilizzando la CLI Angular

Ora spostati nella directory webroot del tuo server, quindi crea, compila e servi la tua app Angular (chiamata sysmon-app, sostituiscila con il nome della tua app) utilizzando CLI angolare.

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

Successivamente, spostati nella directory dell'applicazione (il percorso completo è /srv/www/htdocs/sysmon-app) che è appena stata creata e serve l'applicazione come mostrato.

cd sysmon-app
sudo ng serve

Dall'output del comando ng serve, puoi vedere che l'app Angular non è in esecuzione in background e non puoi più accedere al prompt dei comandi. Pertanto non è possibile eseguire altri comandi mentre è in esecuzione.

Quindi, è necessario un gestore di processi per controllare e gestire l'applicazione: eseguirla continuamente (per sempre) e abilitarla anche all'avvio automatico all'avvio del sistema, come spiegato nella sezione successiva.

Prima di passare alla sezione successiva, termina il processo premendo [Ctl + C] per liberare il prompt dei comandi.

Passaggio 4: esecuzione continua del progetto Angular utilizzando PM2

Per far funzionare la tua nuova applicazione in background, liberando il prompt dei comandi, usa PM2 per servirla, come mostrato. PM2 aiuta anche le attività comuni di amministrazione del sistema come il riavvio in caso di errore, l'arresto e il ricaricamento delle configurazioni senza tempi di inattività e molto altro ancora.

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

Successivamente, per accedere all'interfaccia web della tua applicazione, apri un browser e naviga utilizzando l'indirizzo http://localhost:4200 come mostrato nello screenshot seguente.

In questa guida, abbiamo mostrato come eseguire applicazioni Angular utilizzando Angular CLI e PM2 process manager. Se hai ulteriori idee da condividere o domande, contattaci tramite il modulo di feedback riportato di seguito.