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.