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 !
pen3e
25 décembre 2023Merci énormément ✌.
Autant continuer à mettre un petit exemple avec expo et native 🤭 !