
Tutoriel – Créer un projet Nuxt avec Docker Compose
Dans ce tutoriel, nous allons apprendre à utiliser docker-compose avec Nuxt.js. L’objectif est de créer un exemple simple d’un projet Nuxt avec Docker.
Mais avant de commencer, il y a quelques pré-requis à valider pour pouvoir commencer.
Pré-requis
- Installer Docker & docker-compose
- Installer Yarn
- Avoir les connaissances de base à propos de Docker
Créer un projet Nuxt
Tout d’abord, nous allons créer un projet Nuxt avec les configurations de base.
Nuxt nous offre une commande toute simple qui nous permet de créer un projet :
yarn create nuxt-app my-nuxt-project
Lorsque l'on utilise cette commande, il y a plusieurs questions concernant la configuration de base. Pour cet exemple, on validera tout avec 'Y'.
Créer le Dockerfile pour Nuxt
Dans cette deuxième étape, nous allons créer un fichier Dockerfile. Pour rappel, le fichier Dockerfile décrit notre image Docker. C’est sur la base de celle-ci que notre conteneur sera créé.
Tout d’abord, nous devons choisir sur quelle image sera basée notre docker. Dans notre exemple et pour qu’il reste le plus simple possible, nous utiliserons node:14-alpine
qui est une image avec peu de dépendances et donc assez faible en termes de poids (~118 Mo).
On peut créer notre fichier Dockerfile à la racine du projet (cd my-nuxt-project
) et y insérer la première ligne :
FROM node:14-alpine
On renseigne ensuite le répertoire de travail, ici, ce sera /app
.
WORKDIR /app
Afin d’avoir les informations pour installer les dépendances du projet, nous allons copier les fichiers package.json
et yarn.lock
.
COPY package.json ./
COPY yarn.lock ./
Et enfin, on lance l’installation des dépendances avec Yarn :
RUN yarn
Vous pouvez retrouver l'intégralité du fichier sur mon répertoire Github.
Créer le fichier docker-compose.yml pour Nuxt
Nous allons maintenant créer notre fichier docker-compose.yml
à la racine du projet.
Pour rappel, docker-compose est un outil qui permet de lancer plusieurs conteneurs Docker en même temps. Dans notre exemple, l’utilisation de docker-compose pourrait sembler non justifié (et à juste titre) mais l’idée ici est de développer une base nous permettant d’y intégrer d’autres services.
Créer le fichier
Pour commencer, nous allons donc définir la version de docker-compose et notre service Nuxt que nous nommerons my_nuxt_docker
:
version: '3.9'
services:
my_nuxt_docker:
Une fois notre service créé, nous allons lui indiquer le chemin du Dockerfile :
build: .
Attention à bien respecter l'indentation des lignes qui est d'une grande importance dans les fichiers docker-compose.yml.
Définir les volumes
Nous pouvons ensuite déclarer les volumes tels que :
volumes:
- ./:/app
- app_node_modules:/app/node_modules
- app_dotnuxt:/app/.nuxt
L’objectif des volumes dans docker est de sauvegarder des données liées à un conteneur. Comme l’objectif de cet article n’est pas d’expliquer le fonctionnement des volumes, je ne rentrerais pas dans les détails, mais je vous laisse consulter cet article qui en parle très bien.
La première ligne est un host-mounted volume. C’est-à-dire un volume qui est sauvegardé dans un dossier sur notre ordinateur. Ce volume nous permet de transférer les sources du projet vers le conteneur. ./
décrit notre dossier courant que l’on souhaite copier dans /app
.
Il est important de noter que les fichiers sont partagés en temps réel. Ce qui veut dire que si l'on modifie une ressource dans notre dossier courant, il sera automatiquement modifié dans le conteneur Docker.
Les deux lignes suivantes sont des internal named volumes. Ce sont des volumes qui sont sauvegardés uniquement dans l’environnement du docker-compose que nous sommes en train d’écrire. Ils vont nous permettre de sauvegarder les données des node_modules
et du .nuxt
pour éviter de devoir installer les dépendances ou compiler l’ensemble du projet à chaque fois que l’on démarre notre conteneur.
Afin que Docker Compose connaisse app_node_modules
et app_dotnuxt
, il faut ajouter à la fin du fichier :
volumes:
app_node_modules:
app_dotnuxt:
Définir la commande de démarrage du docker-compose pour Nuxt
Pour lancer un projet Nuxt, il faut lancer la commande yarn dev
. Dans le cas de notre docker-compose, il faut donc lui dire quelle commande lancer au démarrage du conteneur. On peut donc utiliser la clé command
tel que :
command: [yarn, dev]
Exposer le port de notre projet Nuxt
Pour finir, nous devons exposer le port 3000 (port par défaut utilisé par Nuxt) afin de pouvoir accéder à notre projet sur notre ordinateur.
ports:
- '8000:3000'
Le premier port défini est celui qui sera exposé sur notre machine (8000) et le second et celui utilisé dans notre conteneur (3000).
Vous pouvez retrouver l'intégralité du fichier sur mon repository github.
Et maintenant ?
Nous avons notre fichier docker-compose.yml complet. Nous devrions donc pouvoir lancer notre projet… enfin presque !
Il va falloir apporter une modification mineure sur la configuration de notre projet Nuxt.
Afin de pouvoir accéder au projet depuis notre machine, nous allons devoir modifier l’host de localhost
à 0.0.0.0
(Pour plus d’informations, rendez-vous sur ce court article).
Rendez-vous dans le fichier nuxt.config.js
et ajoutez les lignes suivantes à la fin du fichier :
export default {
...,
server: {
host: '0.0.0.0',
},
}
Tout est prêt !!
Lancer notre projet Docker-compose Nuxt
Dans un premier temps, on construit notre image Docker avec la commande :
docker-compose build
Et lorsque notre commande a été exécutée avec succès, on peut lancer le projet :
docker-compose up
Direction -> http://localhost:8000/ !
Vous avez créé un docker-compose avec Nuxt, félicitations !
Vous pouvez retrouver le code complet du projet sur mon github.
Si vous avez apprécié ce tutoriel, n’hésitez pas à le partager et si vous avez des questions, je vous invite à ouvrir une issue sur Github ou à m’envoyer un message sur Linkedin.