Zoeken op website

Angular-apps maken en uitvoeren met Angular CLI en PM2


Angular CLI is een opdrachtregelinterface voor het Angular-framework, dat wordt gebruikt om uw applicatie lokaal te maken, bouwen en uit te voeren tijdens de ontwikkeling.

Het is ontworpen om een Angular-project op een ontwikkelingsserver te bouwen en te testen. Als u uw applicaties echter voor altijd in productie wilt laten draaien/houden, heeft u een Node.js-procesmanager zoals PM2 nodig.

PM2 is een populaire, geavanceerde en veelzijdige productieprocesmanager voor Node.js-applicaties met een ingebouwde load balancer.

De functieset omvat ondersteuning voor applicatiemonitoring, efficiënt beheer van microservices/processen, draaiende applicatieclustermodus en soepel herstarten en afsluiten van applicaties. Het ondersteunt ook eenvoudig beheer van applicatielogboeken en nog veel meer.

In dit artikel laten we u zien hoe u Angular applicaties uitvoert met Angular CLI en PM2 Node.js procesmanager. Hierdoor kunt u uw applicatie tijdens de ontwikkeling continu laten draaien.

Vereisten

Om verder te kunnen gaan, moeten de volgende pakketten op uw server zijn geïnstalleerd:

  • Node.js en NPM
  • Hoekige CLI
  • PM2

Opmerking: als je Node.js en NPM al op je Linux-systeem hebt geïnstalleerd, ga dan naar Stap 2.

Stap 1: Node.js installeren onder Linux

Om de nieuwste versie van Node.js te installeren, voegt u eerst de NodeSource-repository toe aan uw systeem, zoals weergegeven, en installeert u het pakket. Vergeet niet de juiste opdracht uit te voeren voor de Node.js-versie die u op uw Linux-distributie wilt installeren.

Installeer Node.js op 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

Installeer Node.js op 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

Installeer Node.js op op RHEL gebaseerde distributies

------------- 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

Installeer daarnaast ook ontwikkelingstools op uw systeem, zodat u native add-ons van NPM kunt compileren en installeren.

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

Zodra u Node.js en NPM geïnstalleerd heeft, kunt u hun versies controleren met behulp van de volgende opdrachten.

node -v
npm -v

Stap 2: Angular CLI en PM2 installeren

Installeer vervolgens Angular CLI en PM2 met behulp van de npm pakketbeheerder, zoals weergegeven. In de volgende opdrachten betekent de optie -g dat de pakketten globaal worden geïnstalleerd – bruikbaar voor alle systeemgebruikers.

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

Stap 3: Een Angular-project maken met behulp van Angular CLI

Ga nu naar de map webroot van uw server en maak, bouw en serveer vervolgens uw Angular-app (genaamd sysmon-app, vervang dit door de naam van uw app) met behulp van Hoekige CLI.

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

Ga vervolgens naar de map van de applicatie (het volledige pad is /srv/www/htdocs/sysmon-app) die zojuist is gemaakt en die de applicatie bedient zoals weergegeven.

cd sysmon-app
sudo ng serve

Uit de uitvoer van het ng serve-commando kunt u zien dat de Angular-app niet op de achtergrond actief is, u heeft geen toegang meer tot de opdrachtprompt. Daarom kunt u geen andere opdrachten uitvoeren terwijl het programma actief is.

U hebt dus een procesmanager nodig om de applicatie te besturen en te beheren: voer deze continu (voor altijd) uit en schakel deze ook in om automatisch te starten bij het opstarten van het systeem, zoals uitgelegd in de volgende sectie.

Voordat u naar de volgende sectie gaat, beëindigt u het proces door op [Ctl + C] te drukken om de opdrachtprompt vrij te maken.

Stap 4: Angular Project Forever uitvoeren met PM2

Om uw nieuwe applicatie op de achtergrond te laten draaien en de opdrachtprompt vrij te maken, gebruikt u PM2 om deze te bedienen, zoals weergegeven. PM2 ondersteunt ook algemene systeembeheertaken, zoals opnieuw opstarten bij een storing, stoppen en opnieuw laden van configuraties zonder downtime, en nog veel meer.

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

Om toegang te krijgen tot de webinterface van uw applicatie, opent u vervolgens een browser en navigeert u met behulp van het adres http://localhost:4200, zoals weergegeven in de volgende schermafbeelding.

In deze handleiding hebben we laten zien hoe u Angular-applicaties kunt uitvoeren met behulp van Angular CLI en PM2 procesmanager. Als u nog aanvullende ideeën heeft of vragen heeft, kunt u ons bereiken via het onderstaande feedbackformulier.