Deployer React avec Docker

Pourquoi Deployer React avec Docker ?

Le déploiement d'une application React avec Docker offre plusieurs avantages. En utilisant Docker, vous pouvez créer un environnement de développement et de production cohérent, ce qui réduit les problèmes liés aux dépendances et à l'environnement. Cela permet de rendre votre application plus fiable, scalable et facilement déployable sur n'importe quel système.

Un cas concret est le déploiement d'une application web interne pour la gestion des tâches de l'équipe. Avec Docker, vous pouvez créer un conteneur contenant l'application React et toutes les dépendances nécessaires, puis déployer ce conteneur sur n'importe quel serveur Linux.

Prerequis

• Connaissance de base en JavaScript et React
• Connaissance des concepts de bases de l'infrastructure as a code (IAC)
• Installation de Node.js (v14 ou supérieur)
• Installation de Docker (v20.10 ou supérieur)

Concepts fondamentaux

1. Dockerfile

Le Dockerfile est un script qui définit les étapes pour créer une image Docker. Voici un exemple simple :

## 📄 Dockerfile
FROM node:14-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

2. docker-compose.yml

Le docker-compose.yml est un fichier qui définit et configure les services Docker pour une application multi-conteneur.

## 📄 docker-compose.yml
version: '3.8'

services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app

  web:
    image: nginx:alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf

3. docker-compose.override.yml (Optionnel)

Le docker-compose.override.yml permet de surcharger les configurations du fichier docker-compose.yml.

## 📄 docker-compose.override.yml
version: '3.8'

services:
  app:
    command: npm start

  web:
    volumes:
      - ./build:/usr/share/nginx/html

Mise en pratique : projet fil rouge

Nous allons créer un simple application React qui affiche une liste de tâches.

Étape 1 : Initialiser le projet React

## Créer un nouveau projet React
npx create-react-app todo-list
cd todo-list

Étape 2 : Créer les composants et la structure de l'application

Créer un fichier TaskList.js :

// 📄 src/TaskList.js
import React, { useState } from 'react';

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

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

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

export default TaskList;

Créer un fichier App.js pour utiliser le composant :

// 📄 src/App.js
import React from 'react';
import TaskList from './TaskList';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <TaskList />
      </header>
    </div>
  );
}

export default App;

Étape 3 : Créer le Dockerfile

Créer un fichier Dockerfile :

## 📄 Dockerfile
FROM node:14-alpine AS builder

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

RUN npm run build

FROM nginx:alpine

COPY --from=builder /app/build /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Étape 4 : Créer le docker-compose.yml

Créer un fichier docker-compose.yml :

## 📄 docker-compose.yml
version: '3.8'

services:
  web:
    build: .
    ports:
      - "80:80"

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

## Construire et démarrer les conteneurs
docker-compose up --build

Erreurs frequentes et debugging

1. Erreur : Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "/app": executable file not found in $PATH"

   # 📄 docker-compose.yml
   volumes:
     - .:/app
   

   Correction :

   # 📄 docker-compose.yml
   volumes:
     - ./src:/app/src
     - package.json:/app/package.json
     - yarn.lock:/app/yarn.lock
   

2. Erreur : Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "/usr/share/nginx/html/index.html": stat /usr/share/nginx/html/index.html: no such file or directory"

   # 📄 Dockerfile
   COPY --from=builder /app/build /usr/share/nginx/html
   

   Correction :

   # 📄 Dockerfile
   COPY --from=builder /app/build /usr/share/nginx/html
   

3. Erreur : Error response from daemon: OCI runtime create failed: container_linux.go:349: starting container process caused "exec: "/bin/sh": executable file not found in $PATH"

   # 📄 docker-compose.yml
   command: npm start
   

   Correction :

   # 📄 docker-compose.yml
   command: ["nginx", "-g", "daemon off;"]
   

Pour aller plus loin

1. Utiliser Docker Compose pour gérer les services multi-conteneur : Docker Compose Documentation
2. Configurer des variables d'environnement avec Docker : Docker Environment Variables
3. Utiliser Docker Secrets pour gérer les secrets sensibles : Docker Secrets

Défi pratique : Créez une application React qui utilise des API externes et déploie cette application avec Docker et Docker Compose.

Ce tutoriel vous a permis de comprendre comment déployer une application React avec Docker. Vous avez appris les concepts fondamentaux, mis en pratique un projet complet et résolu des erreurs courantes. En suivant ces étapes, vous êtes prêt à déploié vos applications React sur n'importe quel environnement.