Déploiement application "statique"
Nous avons vu précédemment comment construire et déployer une application PHP réalisée avec Symfony.
Pourquoi ne pas essayer avec une application statique, comme une application React ?
Mise en production d'une SPA
Une Single Page App est une application qui ne comporte qu'une seule page HTML. C'est un terme qu'on utilise généralement pour des applications souvent hautement interactives, réalisées en Javascript, souvent avec une bibliothèque comme React. C'est ce que nous avons vu en cours de React, avec Create React App.
Jusqu'à maintenant, nous avons utilisé uniquement le serveur de développement (lancé avec npm run start), qui permet de voir ses changements appliqués en direct à mesure que l'on modifie le code. Bien que très utile pour le développement, ce serveur n'est pas adapté à la production pour diverses raisons :
- il n'est pas conçu pour être sécurisé
- il est très peu performant
- les fichiers Javascript qu'il produit sont très lourds et peu performants
Généralement, les templates de configuration de SPA (comme Create React App) proposent une autre commande :npm run build. Cette dernière fait une "compilation" optimisée des fichiers de l'application, qui produit des fichiers statiques prêts à être délivrés par un vrai serveur web, comme Caddy, Apache ou Nginx.
Par convention, la plupart des applications génèrent ces fichiers "compilés" dans un dossier dist.
Une fois les fichiers statiques de production de notre application obtenus, ils sont déplacés sur leur serveur de destination, dans un endroit ou le serveur de fichiers peut accéder. Le serveur de fichier est ensuite configuré pour les servir.
Le projet
Nous n'allons pas créer une nouvelle application, car ce n'est pas l'objectif de cette semaine, mais plutôt déployer une application existante.
Vous avez l'embarras du choix, mais nous vous proposons de déployer une simple application (PWA) libre et open-source (license AGPL) de calcul de score aux fléchettes, qui n'a aucun besoin de back-end pour fonctionner.
Le code est disponible sur Github, et le README contient les instructions pour construire le projet. Vous pouvez en trouver une démonstration ici.
Vous pouvez cloner le projet sur votre machine, créer un nouveau projet dans votre groupe Gitlab, et pousser le projet que vous avez cloné dessus :
git clone https://github.com/napkid/web-darts.git
cd web-darts
git remote set-url origin git@gitlab.univ-lr.fr:/devopslp/vpsX/web-darts
git push -u origin main
Intégration continue
Ajoutez au projet un fichier .gitlab-ci.yml permettant de l'installer et de le compiler depuis la CI/CD du Gitlab de l'Université.
Déploiement continu
Une fois que vous aurez une compilation qui fonctionne, il faut mettre ces fichiers sur le serveur.
Préparez d'abord votre serveur web : vous disposez déjà d'un programme de ce type sur votre serveur : Caddy.
Modifiez votre compose.yaml pour y ajouter un volume correspondant à l'endroit où vous voulez déposer ces fichiers.
Modifiez ensuite votre Caddyfile de manière à servir les fichiers statiques de ce volume sur un sous domaine darts.vpsX.lpmiaw-lr.fr.
Pour vérifier que tout fonctionne, vous pouvez créer un fichier dans le point de montage de votre volume :
echo "Coucou, ceci est un fichier de test !" >> /<chemin>/test.txt
Pensez à remplacer <chemin> par le chemin du point de montage de votre volume.
Vous pouvez ensuite essayer de d'aller chercher ce fichier depuis votre navigateur : https://darts.vpsX.lpmiaw-lr.fr/test.txt.
Vous devriez pouvoir accéder au fichier contenant le message "Coucou, ...".
Pour déployer l'application depuis la CI/CD de Gitlab, pourquoi ne pas essayer d'adapter le script fourni précédemment ?