IREX - Déployer un Site Nuxt.js avec Docker et Docker-Compose

Le développement web moderne évolue rapidement, avec des technologies toujours plus puissantes et des approches innovantes pour créer et déployer des applications. L'une de ces méthodes qui prend d'assaut la scène du développement web est la conteneurisation. Elle offre une solution élégante pour gérer les environnements d'exécution de manière cohérente, sans les tracas habituels liés à la configuration et à la compatibilité.

Dans cet article, nous allons plonger dans le monde de la conteneurisation en utilisant deux technologies clés : Docker et Docker-Compose, pour déployer un site Nuxt.js. Pour les novices, Nuxt.js est un framework JavaScript basé sur Vue.js, conçu pour simplifier le développement d'applications web modernes avec une architecture SSR (rendu côté serveur). Si tout cela semble un peu technique, ne vous inquiétez pas, nous allons vous guider étape par étape.

Introduction à Nuxt.js et à l'importance de la conteneurisation

• Nuxt.js, Vue.js Évolué : Avant d'entrer dans les détails du déploiement, voyons pourquoi Nuxt.js est un excellent choix pour le développement web. Nuxt.js est un framework JavaScript basé sur Vue.js, conçu pour simplifier la création d'applications web modernes. Il offre des fonctionnalités puissantes telles que le rendu côté serveur (SSR) pour des performances optimales.
• L'Importance de la Conteneurisation : La conteneurisation est cruciale pour assurer la portabilité et la cohérence de votre environnement de développement et de déploiement. Elle vous permet d'encapsuler votre application et ses dépendances dans un conteneur, garantissant que votre application fonctionne de manière cohérente sur toutes les machines.

Configuration Initiale de Docker et Docker-Compose

Pour commencer, assurez-vous d'avoir Docker et Docker-Compose installés sur votre système. Vous pouvez les télécharger à partir du site officiel de Docker et suivre les instructions d'installation spécifiques à votre plateforme.

Création d'un Dockerfile pour Votre Application Nuxt.js

Le Dockerfile est un fichier qui décrit comment construire l'image Docker de votre application. Voici un exemple de Dockerfile pour une application Nuxt.js :

• FROM node:20.2.0 : Cette ligne utilise une image de base Node.js version 14 pour construire votre image. Elle contient Node.js et npm, nécessaires pour exécuter votre application Nuxt.js.
• WORKDIR : Cela définit le répertoire de travail actif à l'intérieur du conteneur. Toutes les commandes qui suivent seront exécutées dans ce répertoire. Dans ce cas, le répertoire de travail est défini sur `/app`.
• COPY : Cette instruction copie des fichiers ou des répertoires depuis l'hôte vers le système de fichiers du conteneur. Vous copiez ici les fichiers package*.json (qui incluent package.json et package-lock.json) du répertoire de construction local ( ./ ) vers le répertoire de travail du conteneur ( ./, qui est /app en l'occurrence).
• RUN : Cette ligne exécute une commande pendant la construction de l'image. Ici, vous exécutez npm install, ce qui permet d'installer les dépendances définies dans package.json.
• COPY : Cette commande copie tous les fichiers du répertoire de construction local vers le répertoire de travail du conteneur, ce qui inclut tous les fichiers de votre application Nuxt.js.
• EXPOSE : Cette instruction indique que le conteneur écoute sur le port 3000. Cela n'ouvre pas le port sur l'hôte, mais informe Docker que le conteneur peut écouter sur ce port. Vous devrez mapper ce port lorsque vous exécuterez le conteneur.
• CMD : Cette instruction définit la commande par défaut à exécuter lorsque le conteneur démarre. Dans ce cas, elle exécute npm run start, ce qui lance votre application Nuxt.js.

Utilisation de Docker-Compose pour Orchestrer Plusieurs Conteneurs

Docker-Compose permet de gérer plusieurs conteneurs en une seule commande. Voici un exemple de fichier docker-compose.yml avec explication de chaque ligne :

• version : Cette ligne spécifie la version de la syntaxe Docker Compose utilisée dans ce fichier. Vous utilisez la version "3.3"
• services : C'est la section où vous définissez les services que vous souhaitez exécuter avec Docker Compose. Vous avez un service nommé frontend.
• build: . : Cette ligne indique à Docker Compose de construire l'image du service frontend à partir du répertoire courant (où se trouve le fichier Dockerfile).
• container_name: irex-portal : Cela attribue un nom au conteneur du service frontend, qui sera "irex-portal".
• restart: on-failure : Cette option spécifie que le conteneur doit redémarrer automatiquement en cas d'échec.
• ports: - "3000:3000": Cette ligne mappe le port 3000 du conteneur sur le port 3000 de l'hôte local. Cela signifie que vous pouvez accéder à l'application Nuxt.js dans le conteneur en visitant http://localhost:3000 sur votre machine hôte.
• Vous avez un deuxième service nommé web. Ce service utilise une image pré-construite de Nginx depuis Docker Hub (définie par image: nginx).
• container_name : Cela attribue un nom au conteneur du service web, qui sera "irex-nginx".
• volumes : Cette ligne monte un volume local (./deployment/templates) dans le conteneur à /etc/nginx/templates. Cela signifie que vous pouvez partager des fichiers entre votre système hôte et le conteneur Nginx.
• environment :Ces variables d'environnement sont définies pour le conteneur Nginx. Elles permettent de configurer Nginx pour gérer les requêtes qui arrivent sur le port 80.
• ports: - "3000:3000": Cette ligne mappe le port 3000 du conteneur sur le port 3000 de l'hôte local. Cela signifie que vous pouvez accéder à l'application Nuxt.js dans le conteneur en visitant http://localhost:3000 sur votre machine hôte.

Nous avons monté le dossier deployment/templates dans notre service web, il est temps de donner le fichier de configuration que ce service va utiliser. Pour celà dans votre repertoire de travail, vous allez créer le fichier default.conf.template dans le dossier deployment/templates. Voici un exemple de fichier de configuration à utiliser: server { listen ${NGINX_PORT}; server_name localhost; location / { proxy_pass http://frontend:3000/; } }

• server : Cette directive commence la définition d'un bloc de configuration pour le serveur Nginx.
• listen : Cela configure le serveur Nginx pour écouter sur le port spécifié dans la variable d'environnement ${NGINX_PORT}. Cette valeur sera définie dans le fichier Docker Compose.
• server_name localhost : Le serveur Nginx répondra aux requêtes avec le nom d'hôte "localhost".
• location / : Cette section spécifie comment Nginx gère les requêtes pour le chemin racine "/".
• proxy_pass http://frontend:3000/ : Cela configure Nginx pour faire passer toutes les requêtes vers le service frontend sur le port 3000. Cela permet au serveur Nginx d'agir comme un reverse proxy pour l'application Nuxt.js.

Le fichier default.conf.template est conçu pour être utilisé avec des variables d'environnement définies dans le fichier Docker Compose, ce qui permet une configuration dynamique du serveur Nginx en fonction de l'environnement dans lequel il est déployé.

Test et validation

Après avoir configuré Docker et Docker-Compose et créé votre Dockerfile ainsi que votre fichier Docker-Compose, vous pouvez exécuter docker-compose up dans le répertoire contenant votre fichier docker-compose.yml pour construire et démarrer les conteneurs. Vous devriez pouvoir accéder à votre site Nuxt.js en ouvrant un navigateur web et en visitant http://votre_adresse_ip.

Conclusion

Vous voilà prêt à déployer votre site Nuxt.js avec Docker et Docker-Compose. Cette approche vous offre une grande flexibilité, une gestion simplifiée et une portabilité pour votre application web. Bon développement et bon déploiement !

Dans les articles suivants de cette série, nous explorerons davantage l'automatisation du déploiement avec Ansible et l'intégration continue avec Jenkins pour compléter votre chaîne de déploiement continue. Restez à l'écoute pour la suite de cette série !