Deployer Next.js avec Docker

Pourquoi Déployer Next.js avec Docker ?

Le déploiement d'applications Web avec Docker offre un niveau élevé de portabilité, de sécurité et de gestion des ressources. En particulier pour les applications basées sur Next.js, qui est une solution React optimisée pour le développement server-side rendering (SSR), Docker permet une expérience utilisateur fluide tout en assurant une performance élevée.

Un cas concret de l'utilisation du déploiement Docker avec Next.js est lorsqu'une application a besoin d'être déployée sur plusieurs environnements différents, tels que production, pré-production et développement. Avec Docker, vous pouvez créer des images standardisées qui s'exécutent de manière cohérente sur n'importe quel système compatible.

Prerequis

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• Node.js : v14.0.0 ou supérieur
• npm : v6.0.0 ou supérieur
• Docker : v20.10.7 ou supérieur
• Editor de code (ex: Visual Studio Code)

Concepts fondamentaux

Dockerfile

Le Dockerfile est un fichier texte contenant des instructions qui définissent comment créer une image Docker.

## Définit l'image de base
FROM node:14

## Copie le package.json et yarn.lock dans le répertoire /app
COPY package*.json ./

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

## Copie tous les fichiers du répertoire actuel vers /app/ à l'intérieur de l'image
COPY . .

## Expose le port 3000
EXPOSE 3000

## Démarre l'application Next.js
CMD ["npm", "start"]

Docker Compose

docker-compose.yml permet de définir et gérer des applications multi-conteneurs.

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

Images Docker

Une image Docker est une seule couche de données qui contient tout ce dont un conteneur doit être exécuté, y compris le système d'exploitation et les applications.

## Construit l'image Docker
docker build -t my-next-app .

## Exécute le conteneur
docker run -p 3000:3000 my-next-app

Mise en pratique : Projet fil rouge

Nous allons créer une application simple d'un gestionnaire de tâches.

Étape 1 : Initialiser un nouveau projet Next.js

## Crée un nouveau projet Next.js
npx create-next-app@latest task-manager

## Changez de répertoire
cd task-manager

Étape 2 : Configurer le Dockerfile

Créez un fichier Dockerfile à la racine du projet avec le contenu suivant :

FROM node:14

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 3000

CMD ["npm", "start"]

Étape 3 : Configurer docker-compose.yml

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

version: '3.8'
services:
  app:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production

Étape 4 : Ajouter une fonctionnalité simple

Ajoutez un simple composant TaskList dans le fichier pages/index.js :

// pages/index.js
import React, { useState } from 'react';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleAddTask = () => {
    if (newTask.trim() !== '') {
      setTasks([...tasks, newTask]);
      setNewTask('');
    }
  };

  return (
    <div>
      <h1>Task Manager</h1>
      <input
        type="text"
        value={newTask}
        onChange={(e) => setNewTask(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={handleAddTask}>Add Task</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
};

export default TaskList;

Étape 5 : Construire et exécuter l'application

## Construit l'image Docker
docker build -t task-manager .

## Exécute le conteneur
docker run -p 3000:3000 task-manager

Erreurs fréquentes et debugging

Erreur 1 : Error: listen EACCES: permission denied 0.0.0.0:3000

Code incorrect :

docker run -p 3000:3000 my-next-app

Correction :

Assurez-vous que le port 3000 n'est pas déjà utilisé sur votre machine.

Erreur 2 : Error: Cannot find module 'next'

Code incorrect :

FROM node:14

COPY package*.json ./
RUN npm install
COPY . .
CMD ["node", "server.js"]

Correction :

Utilisez npm start pour exécuter l'application Next.js.

Erreur 3 : Error: cannot open database connection

Code incorrect :

import { useState, useEffect } from 'react';
import db from './db';

const TaskList = () => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    db.query('SELECT * FROM tasks', (err, results) => {
      if (err) throw err;
      setTasks(results);
    });
  }, []);

  // ...
};

export default TaskList;

Correction :

Assurez-vous que la base de données est correctement configurée et accessible.

Pour aller plus loin

Piste 1 : Utiliser Docker Swarm pour un déploiement multi-nœuds

• Documentation Docker Swarm

Piste 2 : Intégrer un service Redis avec Next.js

• Next.js Redis Integration

Piste 3 : Utiliser AWS Elastic Beanstalk pour le déploiement

• AWS Elastic Beanstalk Documentation

Défi pratique

Créez une application Next.js simple qui permet de gérer des notes. L'application devrait avoir les fonctionnalités suivantes :

• Ajouter une note
• Supprimer une note
• Mettre à jour une note
• Afficher toutes les notes

Partagez votre code et faites un suivi de vos étapes dans un fichier README.md.