Développement

Un environnement de développement React avec Docker compose !

1 cC9PQ00bv1 1CePwcttLhg

Introduction

Docker est un excellent outil pour développer des projets en équipe sans ce soucier de problèmes de configuration comme cela pouvait être le cas auparavant.
Dans cet article nous allons mettre en place un environnement de développement local pour faire vos applications React via Docker et Docker compose.

Création d’un projet React

Nous allons nous baser sur un projet React vierge, vous pouvez bien entendu passer cette étape si vous avez déjà un projet.
Dans un terminal, nous allons créer un nouveau projet nommé react-docker.

				
					npx create-react-app react-docker

				
			

Cette commande crée le squelette de votre application et installe les dépendances nécessaires à son bon fonctionnement.
À cette étape vous devriez avoir l’architecture suivante :

				
					.
└── react-docker
 ├── README.md
 ├── node_modules
 ├── package-lock.json
 ├── package.json
 ├── public
 └── src
				
			

Nous allons tester le bon fonctionnement du projet en exécutant les deux commandes suivantes.

				
					cd react-docker
npm start

				
			

Tout fonctionne s’il n’y a pas de messages d’erreurs dans la console et que la page http://localhost:3000/ s’est ouverte correctement.

Création de l’image Docker

Dans un premier temps, nous allons créer une image Docker de notre application.
Pour se faire nous allons créer un fichier Dockerfile dans notre dossier react-docker.

				
					.
└── react-docker
 ├── Dockerfile
 ├── README.md
 ├── node_modules
 ├── package-lock.json
 ├── package.json
 ├── public
 └── src
				
			

Vous pouvez ajouter le contenu suivant dans ce fichier

				
					## Fichier : ./react-docker/Dockerfile
FROM node:18.10.0-alpine3.15

WORKDIR /usr/src/app/react-docker

COPY package*.json ./

RUN npm install

EXPOSE 3000

CMD ["npm", "start"]
				
			

Ligne 2 : L’image sur laquelle nous nous basons. Pensez à mettre à jour la version de node si une nouvelle version est disponible. Ici nous prenons une version Alpine qui nous permets d’avoir une version plus légère de Linux et donc gagner de l’espace et du temps lors du build.
Ligne 3 : Rien de spécial, on choisit le chemin /usr/src/app/react-docker comme dossier de travail.
Ligne 4 : Nous copions les fichiers package.json et package-lock.json dans notre image. Le package-lock.json est important puisqu’il fige des versions de packages qui fonctionnent en production !
Ligne 5 : Nous installons les packages nécessaires.
Ligne 6 : On signal sur quel port notre application va fonctionner.
Ligne 7 : On choisit la commande qui va s’exécuter lors du lancement de notre image.

Rien de bien compliqué dans cette image donc, cette image ne marchera pas tel quel puisqu’elle ne contient pas les sources de notre projet, il faudra faire au moins un volume monté pour les sources du programme.

Automatisation avec Docker compose

Pour simplifier la construction et le lancement de notre image docker, nous allons pouvoir utiliser docker-compose.
Cette fois si nous allons créer un fichier docker-compose.yml un dossier avant notre dossier react-docker afin d’avoir l’architecture ci dessous.

				
					.
├── docker-compose.yml
└── react-docker
 ├── Dockerfile
 ├── README.md
 ├── node_modules
 ├── package-lock.json
 ├── package.json
 ├── public
 └── src
				
			

Dans ce fichier vous pouvez copier/coller le contenu suivant :

				
					## Fichier : docker-compose.yml
version: '3'
services:
  react-docker:
    container_name: react-docker
    build:
      context: ./react-docker
    ports:
      - "3000:3000"
    # stdin_open: true
    volumes:
       - ./react-docker:/usr/src/app/react-docker
       - /usr/src/app/react-docker/node_modules
				
			

Ligne 2 : On choisit la version de docker-compose à utiliser.
Ligne 3 : On va pouvoir déclarer une liste de service que va lancer notre fichier.
Ligne 4 : On décrit notre service react, ici donc react-docker.
Ligne 5 : On nomme le conteneur docker, pour faciliter les choses on va l’appeler du même nom que notre service : react-docker.
Ligne 6 et 7 : On précise à notre docker-compose qu’il doit utiliser une image builder par lui même qui se trouve dans le chemin : ./react-docker.
Ligne 8 et 9 : On précise les ports à utiliser sous le format [port de sortie]:[port de notre docker].
Ligne 10, 11 et 12 : On précise ici les volumes montés, on voit donc pour nous les sources de notre application (ligne 11) et les dépendances téléchargées (ligne 12)

Notre fichier docker-compose.yml est maintenant terminé.
Pour vérifier que tout fonctionne nous allons builder puis lancer notre service :

				
					docker-compose build --no-cache
docker-compose up

				
			

À cette étape, si tout fonctionne, votre application est disponible comme lors de la partie à l’url suivante : http://localhost:3000/
Si vous modifier le fichier App.js l’application se mets à jour automatiquement sans avoir ni à redémarrer votre service docker.
Votre environnement de développement local est maintenant prêt ! 🎉

Commandes utiles

Voici les commandes essentiels pour commencer à travailler avec Docker compose.

				
					# Build de nos services sans utiliser le cache
docker-compose build --no-cache
# Lancement de nos services
docker-compose up
# Lancement de nos services en background
docker-compose up -d
# Arrêt de nos services
docker-compose down
				
			

Récapitulatif

Pour conclure, avec Docker et Docker compose, vous allez pouvoir mettre en place à l’aide de deux fichiers un environnement de développement React pour vous ou votre équipe.

Les configurations de chacun de vos ordinateurs n’impacteront plus vos développements !

Cependant, cette configuration est valable pour du développement local uniquement, il est fortement déconseillé de déployer en production ou en qualification cette version de votre application.

L’article original est disponible sur ma page Medium !

Auteur

Paul

Développeur web FullStack 🇫🇷
https://medium.com/@paul.web.development

Laissez un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *