Com instal·lar Angular a Ubuntu/Debian

Angular és un framework per a aplicacions web desenvolupat en TypeScript i és de codi obert, mantingut per Google. S'utilitza per crear i mantenir aplicacions web d'una sola pàgina.

El seu objectiu és ampliar les aplicacions basades en navegador amb capacitat de Model Vista Controlador (MVC), en un esforç per facilitar el desenvolupament i les proves.

La biblioteca llegeix l'HTML que conté atributs d'etiquetes personalitzades addicionals, després segueix les directives dels atributs personalitzats i vincula els elements d'entrada o sortida de la pàgina a un model representat per les variables estàndard de JavaScript.

En aquest article s'explica com instal·lar Angular en un sistema Ubuntu 20.04 LTS, tot i que també es pot seguir per a una distribució Debian.

Instal·lar NodeJS i Angular

El primer pas és afegir el repositori de NodeJS; per fer-ho, pots executar l'script que proporcionen:

# curl -sL https://deb.nodesource.com/setup_16.x | bash -

Ara podràs instal·lar NodeJS:

# apt install nodejs -y && node --version

Un cop instal·lat, actualitza NPM:

# npm install npm@latest -g && npm --version

I després instal·la Angular:

# npm install -g @angular/cli && ng version

Ara Angular estarà instal·lat. Per a una aplicació existent, pots començar a treballar i ometre la creació del projecte.

Creació d'un projecte Angular

Primer accedeix a la ubicació on vols emmagatzemar el projecte:

# cd /opt

Després crea el projecte indicant-ne el nom:

# ng new miproyecto

Et preguntarà quin estil vols triar entre CSS, SASS, LESS o Stylus.

Un cop seleccionat l'estil i creat el projecte, accedeix al directori:

# cd miproyecto

Per servir el projecte, simplement indica l'adreça IP del servidor i el port que vulguis:

# ng serve --host 127.0.0.1 --port 8080

Creació d'un servei per a Angular

Si vols automatitzar l'arrencada del projecte, pots crear un servei:

# nano /etc/systemd/system/miproyecto.service

Afegeix el contingut següent al fitxer (recorda modificar la ubicació d'exemple):

[Unit]
  Description=Proyecto Angular daemon
  After=network-online.target

[Service]
  User=root
  Group=root
  WorkingDirectory=/opt/miproyecto
  ExecStart=/usr/bin/ng serve --host 127.0.0.1 --port 8080

[Install]
  WantedBy=multi-user.target

Després habilita i inicia el servei:

# systemctl enable miproyecto && systemctl start miproyecto

Finalment, comprova'n l'estat:

# systemctl status miproyecto

Configuració d'un servidor intermediari invers amb NGINX

Si vols configurar un certificat SSL amb Let's Encrypt, pots utilitzar un servidor intermediari invers amb NGINX i obtenir el certificat amb Certbot. Primer instal·la NGINX i Certbot:

# apt install nginx python3-certbot-nginx -y

Un cop instal·lats els paquets, elimina el lloc per defecte:

# rm /etc/nginx/sites-enabled/default

I després crea el fitxer de configuració per al projecte:

# nano /etc/nginx/sites-enabled/miproyecto.conf

Amb el contingut següent (recorda modificar el domini d'exemple):

server {
 listen 80;
 server_name ejemplo.dominio.com;
 location / {
   proxy_pass http://localhost:8080;
   proxy_http_version 1.1;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection 'upgrade';
   proxy_set_header Host $host;
   proxy_cache_bypass $http_upgrade;
 }
}

Un cop creat el fitxer, reinicia NGINX i obtén el certificat amb Certbot:

# systemctl restart nginx && certbot --nginx --redirect -d ejemplo.dominio.com 

Esperem haver-te ajudat amb aquest tutorial. L'has provat? Deixa'ns els teus comentaris! 

Recorda, si tens consultes sobre aquesta qüestió o qualsevol altra relacionada amb els teus servidors a Clouding, no dubtis a escriure a soporte@clouding.io Som al teu costat per a tot el que necessitis! 🙂