Installer une Application Angular sur un serveur Ubuntu

Mis à jour : 08/09/2023 danny

Nous allons déployer notre Application Web sur un serveur Ubuntu.

Cette application a été développée avec le framework javascript Angular version 16.2.4

Qu'allons nous faire

Le projet Angular de base que nous utiliserons dispose des caractéristiques suivantes

Généré avec Angular CLI
Routing
Lazy Loading
Framework CSS Bootstrap
Server Side Rendering
HttpClient
Transfer State
Progressive Web App

La démo correspondante est accessible à l’adresse suivante https://angular.ganatan.com/

Le code source ou dépôt de ce projet est disponible sur github à l'adresse suivante
https://github.com/ganatan/angular-app

Avant de commencer

Ubuntu est un système d’exploitation Linux développé par la société Canonical.
C’est le système d'exploitation le plus utilisé sur les systèmes Cloud et les serveurs informatiques.

Nous utiliserons la version Ubuntu Server 22.04.1 LTS.

Cette version est téléchargeable sur le site web https://www.ubuntu.com/download/server

Il nous faut disposer d'une machine virtuelle chez un fournisseur pour pouvoir installer notre application.

Dans notre exemple l'adresse IP de la machine virtuelle sera 10.0.0.80

Résumé de l'installation

Les différentes étapes de notre installation seront en résumé.

Mise à jour du serveur Ubuntu
Installation du serveur HTTP nginx
Installation de cURL si nécessaire
Installation de Node.js et npm
Compilation et installation de l'application Web
Configuration de nginx
Installation de pm2

Conditions préalables

Afin de déployer notre application nous utiliserons les éléments suivants.

git version 2.42.0
nginx version 1.25.2
curl version 8.2.1
nodejs version 18.17.1
pm2 version 5.3.0

Les dernières versions de ces outils sont disponibles ci-dessous

Mise à jour Ubuntu

En premier lieu il nous faut nous connecter sur notre serveur avec un client ssh.
Nous pourrons alors éxécuter un certain nombre de scripts.

La version utilisée dans ce tutoriel est la version Ubuntu 22.4.01 LTS
Vérifions la version installée sur notre serveur ubuntu

# Test de version du serveur Ubuntu
cat /etc/issue

Nous allons mettre à jour notre version d'ubuntu.

# Mise à jour de la liste des fichiers disponibles
# Mise à jour de tous les paquets installés sur le système

# Méthode 1
sudo apt-get update
sudo apt-get upgrade --yes 

# Méthode 2
sudo apt-get update && sudo apt-get upgrade -y

Installation de nginx

A ce stade du didacticiel si nous tapons l'adresse de notre serveur (http://10.0.0.80/)
Nous obtenons dans notre navigateur le message Ce site est inaccessible.

Ce qui est logique puisqu' aucun serveur HTTP n'est installé.

Nginx est le serveur HTTP que nous allons utilisé.
Nous pouvons l'installer ou le désinstaller en tapant les commandes suivantes.

# Installation
sudo apt-get install nginx --yes

# Désinstallation
sudo apt-get purge nginx nginx-common nginx-full --yes

Installons nginx sur notre serveur.
A ce stade nous pouvons vérifier que notre serveur fonctionne.
Tapez l'adresse ip du serveur que nous avons provisionné dans le tutoriel précédent.

http://10.0.0.80/

nginx a été installé et fait office de serveur http, nous obtenons ainsi la fenêtre de bienvenue de nginx.

Welcome to nginx!
If you see this page, the nginx web server is successfully installed and working. Further configuration is required.

For online documentation and support please refer to nginx.org.
Commercial support is available at nginx.com.

Thank you for using nginx.

Installation de curl

cURL (client URL request library) est une interface en ligne de commande.
Elle nous permettra de récupérer le contenu d'une ressource.

Si cURL n'est pas installé sur le serveur vous pouvez le faire avec les commandes suivantes.

# vérification de la version
curl --version

# installation
sudo apt-get --yes install curl

Installation Node.js

Node.js est la plateforme JavaScript que nous utiliserons pour éxécuter notre application.

Nous pouvons utiliser le script conseillé à cette adresse https://github.com/nodesource/distributions#debinstall
Dans notre exemple Node.js v18.x

Pour l'installer sur le serveur il nous faut lancer les commandes suivantes.

# Installation de Node.js
curl -sL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs

# Mise à jour de npm
sudo npm install npm -g

# Vérification de la version node
node --version

# Véerification de la version npm
npm --version

Utilisation de git

Nous allons maintenant créer notre application web sur notre poste de travail
Il nous faudra au préalable installer les logiciels Node.js ,npm et Git.

Les étapes seront les suivantes

Récupérer le code source de l'application
se positionner dans le répertoire de l'application
Installer les dépendances
Compiler l'application

# Récupération du dépôt de l'application
git clone https://github.com/ganatan/angular-app.git

# Se positionner
cd angular-app

# Installation
npm install

# Compilation
npm run build:ssr

Le répertoire dist contient l'application compilée.
Ce répertoire constitue le livrable ou l'artefact à installer sur notre serveur.

Il nous faut copier ce répertoire sur le serveur Ubuntu.
Sur notre poste de travail nous pouvons utiliser scp (pour Ubuntu) ou Winscp (sous Windows).

L'emplacement de destination n'a pas d'importance.
Dans notre exemple nous copions le répertoire dist sur /var/www/angular.

Il nous faut copier la configuration nginx correspondante.
Le fichier nginx.conf contenu dans le dépôt doit être copier sur le serveur Ubuntu dans /etc/nginx.

Ce fichier de configuration contient quelques optimisations et surtout les éléments de redirection.

user nobody nogroup;
worker_processes auto;
events {
    worker_connections 1024;
}
http {
    gzip on;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_proxied any;
    gzip_vary on;
    gzip_types application/atom+xml
        application/javascript
        application/json
        application/rss+xml
        application/vnd.ms-fontobject
        application/x-font-ttf
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/opentype
        image/svg+xml
        image/x-icon
        text/css
        text/plain
        text/x-component;
    sendfile on;
    upstream main.module {
        server 127.0.0.1:4000;
    }
    server {
        listen *:80 default_server;
        server_name "";
        location / {
            proxy_pass http://main.module;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Host $server_name;
        }
    }
}

Il ne reste plus qu'à aller dans le répertoire de l'application.
Dans notre exemple /var/www/angular

Puis lancer la commande node dist/server
Vérifier l'application avec par exemple http://10.0.0.80/

L'application Web s'affiche dans notre navigateur.

Installation de pm2

L'installation que nous avons effectué est pour l'instant manuelle.
Nous allons automatiser l'éxécution de l'application Web en utilisant pour cela PM2.

PM2 est un process manager pour JavaScript sous Node.js.
Nous l'installerons sur le serveur avec la commande suivante.

# Installation
sudo npm install -g pm2

Lors du déploiement de l'application nous utiliserons un fichier de configuration process.config.js.
Ce fichier présent sur le dépôt doit être rajouté sur ubuntu dans /var/www/angular

module.exports = {
    apps : [
      {
        name      : 'angular-webapp',
        script    : 'dist/server',
        env: {
          COMMON_VARIABLE: 'true'
        },
        env_dev : {
          NODE_ENV: 'dev'
        },
        env_prod : {
          NODE_ENV: 'prod'
        }
      }
    ],
  };

Automatisation

Pour terminer nous lancons les commandes

Exécution de l'application via PM2
Mise en mémoire de PM2
Redémarrage du serveur nginx
Redémarrage du serveur Ubuntu

# Exécution de l'application
pm2 start process.config.js --env prod

# Mise en mémoire de PM2
pm2 startup
pm2 save

# Redémarragede nginx
sudo service nginx restart

# Redémarrage du serveur ubuntu
reboot

Tests de l'application

Il ne reste plus qu’à tester l’application.
Plusieurs cas de figure peuvent se présenter à nous.

1/ Installation sur un poste de travail Ubuntu.
2/ Installation sur un poste de travail Windows et utilisation de Ubuntu via virtual box.
3/ Installation sur une machine virtuelle ubuntu chez un fournisseur

Si l’adresse IP est par exemple 10.0.0.80

Dans tous les cas le test de l’application sera le suivant