Deployer Nuxt avec Docker

Pourquoi Deployer Nuxt avec Docker ?

Le déploiement de Nuxt.js avec Docker offre plusieurs avantages pratiques. D'un côté, Docker permet une environnement de développement cohérent et répétable, indépendamment du système d'exploitation utilisé. De l'autre, il facilite le déploiement sur des serveurs distants, en assurant que l'environnement est identique à celui sur lequel le site a été développé.

Un cas concret de déploiement Docker pour Nuxt.js est lorsqu'un développeur a besoin de déployer un site web sur une machine qui ne possède pas les mêmes ressources et environnements que sa machine de développement. Avec Docker, il peut s'assurer que le site fonctionne exactement comme sur son environnement local.

Prerequis

Pour suivre ce tutoriel, vous devrez avoir les éléments suivants :

• Connaissance de base de JavaScript et Nuxt.js
• Un environnement de développement avec Node.js installé (v14.x ou v16.x recommandé)
• Docker et Docker Compose installés sur votre système. Vous pouvez télécharger et installer ces outils depuis le site officiel de Docker.

Concepts fondamentaux

1. Containerisation

Un container est un package logiciel qui contient toutes les dépendances nécessaires pour une application, ainsi que l'application elle-même. En utilisant Docker, vous pouvez créer des containers portables et réutilisables.

Schéma mental :

+-------------------+
|     Application   |
|  (Code source)    |
+---------+---------+
          |
          v
+---------+---------+
|   Dependencies    |
|   (Node.js, npm, etc.)|
+---------+---------+
          |
          v
+---------+---------+
|     Docker Container  |
|  (Package final avec app et déps)|
+-------------------+

Code de base pour un container Nuxt.js :

## Dockerfile
## Utilise une image officielle de Node.js comme base
FROM node:16-alpine

## Définit le répertoire de travail dans le conteneur
WORKDIR /usr/src/app

## Copie les fichiers package.json et package-lock.json
COPY package*.json ./

## Installe les dépendances du projet
RUN npm install

## Copie tous les fichiers restants du dossier courant vers le répertoire de travail
COPY . .

## Expose le port 3000 (port par défaut de Nuxt.js)
EXPOSE 3000

## Lance l'application Nuxt.js en mode production
CMD ["npm", "run", "start"]

2. Docker Compose

Docker Compose est un outil qui permet de définir et gérer des applications multi-conteneurs. Il utilise un fichier YAML pour configurer les services, les réseaux et les volumes.

Schéma mental :

+-------------------+
|     Application   |
|  (Code source)    |
+---------+---------+
          |
          v
+---------+---------+
|       Docker Compose        |
|  (Fichier docker-compose.yml)|
+---------+---------+
          |
          v
+---------+---------+
|     Services        |
|  (Nuxt.js, DB, etc.)|
+-------------------+

Code de base pour un fichier docker-compose.yml :

version: '3'
services:
  nuxt-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

3. Volumes Docker

Les volumes sont utilisés pour persister les données entre les exécutions du conteneur et pour partager des données entre plusieurs conteneurs.

Schéma mental :

+-------------------+
|     Application   |
|  (Code source)    |
+---------+---------+
          |
          v
+---------+---------+
|       Volume Docker       |
|  (Stockage persistant de données)|
+---------+---------+
          |
          v
+---------+---------+
|     Data        |
|  (Fichiers du projet)|
+-------------------+

Code de base pour un volume dans docker-compose.yml :

version: '3'
services:
  nuxt-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

Mise en pratique : projet fil rouge

Étape 1 : Créer un nouveau projet Nuxt.js

npx create-nuxt-app my-nuxt-project
cd my-nuxt-project

Structure de base du projet :

my-nuxt-project/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
├── package.json
└── README.md

Étape 2 : Créer un Dockerfile

Créez un fichier nommé Dockerfile à la racine de votre projet avec le contenu suivant :

## Dockerfile
FROM node:16-alpine

WORKDIR /usr/src/app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "run", "start"]

Étape 3 : Créer un fichier docker-compose.yml

Créez un fichier nommé docker-compose.yml à la racine de votre projet avec le contenu suivant :

version: '3'
services:
  nuxt-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules

Étape 4 : Construire et exécuter le conteneur

docker-compose up --build

Votre application Nuxt.js devrait maintenant être accessible à l'adresse http://localhost:3000.

Erreurs frequentes et debugging

Erreur 1 : Problème avec les permissions des fichiers

Message d'erreur :

npm ERR! code EACCES
npm ERR! syscall open
npm ERR! path /usr/src/app/node_modules/.staging/@nuxtjs/axios-3b4c9e1f/dist/index.js
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, open '/usr/src/app/node_modules/.staging/@nuxtjs/axios-3b4c9e1f/dist/index.js'

Code incorrect :

docker-compose up --build

Code correct :

docker-compose run --rm nuxt-app bash -c "chown -R $(whoami):$(whoami) /usr/src/app && npm install"

Erreur 2 : Problème avec l'exécution de npm run start

Message d'erreur :

error: 0
error: signal: SIGTERM

Code incorrect :

docker-compose up --build

Code correct :

docker-compose up -d

Erreur 3 : Problème avec la configuration du port

Message d'erreur :

Error starting userland proxy: listen EADDRINUSE: address already in use 0.0.0.0:3000

Code incorrect :

docker-compose up --build

Code correct :

docker-compose stop
docker-compose rm -f
docker-compose up --build

Pour aller plus loin

1. Utiliser des variables d'environnement avec Docker Compose

Vous pouvez utiliser des variables d'environnement pour configurer votre application en fonction de l'environnement (développement, production).

Fichier .env :

API_KEY=my-api-key

docker-compose.yml :

version: '3'
services:
  nuxt-app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/usr/src/app
      - /usr/src/app/node_modules
    environment:
      - API_KEY=${API_KEY}

2. Utiliser des secrets avec Docker Secrets

Vous pouvez utiliser les secrets Docker pour stocker des informations sensibles comme des mots de passe ou des clés d'API.

docker-compose.yml :

version: '3.8'
services:
  nuxt-app:
    build: .
    ports:
      - "3000:3000"
    secrets:
      - api_key

secrets:
  api_key:

3. Utiliser Docker Swarm pour une déploiement sur plusieurs nœuds

Docker Swarm est un orchestrateur de conteneurs qui permet de déployer et de gérer des applications multi-nœud.

Commandes :

docker swarm init
docker service create --replicas 3 -p 80:3000 my-nuxt-project/nuxt-app

Défi pratique

Créez un mini-projet Nuxt.js qui utilise une API externe pour récupérer des données et les afficher sur le frontend. Utilisez Docker et Docker Compose pour déployer votre application.