Bienvenue dans notre tutoriel express sur la création d’une image docker de React (pas de back pour votre front react ?  pas de panique on a  fait un tuto ici  pour la création d’un back sous docker avec un projet laravel ). Apprenez rapidement comment créer votre propre image docker, comment gérer les différents layer, et comprendre les subtilités de la création d’une image docker pour un projet ReactJS. Ce guide vous équipe pour créer votre ReactJS portable et vous permet d’affiner vos compétences devops !

1. Comprendre les fondamentaux – Familiarisez-vous avec les bases de docker, la containerisation et ses images.
2. Prérequis – Découvrez ce dont vous avez besoin pour démarrer, y compris la configuration initiale ainsi que l’installation de docker.
3. Le FROM – Apprenez à créer la base de votre image à partir d’autres images et comment les choisir .
4. Projet vierge React avec Docker– Apprenez comment créer et build votre propre image docker pour un projet react vierge.
5. Projet existant React avec Docker – Apprenez comment créer et build votre propre image docker pour un projet react existant.

Qu’est-ce que la conteneurisation ?

La conteneurisation est une technologie logicielle qui permet de regrouper une application et ses dépendances dans un conteneur portable et autonome. Ce conteneur est constitué d’une image qui contient tous les éléments nécessaires à l’exécution de l’application, y compris le code source, les bibliothèques, les outils système et les configurations.

La conteneurisation est basée sur le principe de la virtualisation mais au lieu de virtualiser une machine virtuelle avec un système d’exploitation et tout le matériel, la conteneurisation virtualise un service ou une application.

Ce qui rend la conteneurisation bien plus performante et rapide que les machines virtuelles tout en bénéficiant des avantages de la virtualisation tel que la portabilité et l’isolation virtuelle qui ajoute une couche de sécurité supplémentaire

Qu’est-ce que Docker ?

Docker est un moteur de conteneurisation open source qui facilite la création, le déploiement et la gestion des conteneurs. Il fournit un ensemble d’outils et de services pour automatiser les tâches courantes liées à la gestion du cycle de vie des conteneurs.

C’est actuellement le moteur de conteneurisation le plus populaire il utilisé dans de nombreuse grande entreprise, docker possède actuellement un écosystème vaste et riche notamment via la plateforme en ligne d’image docker hub.

Qu’est-ce qu’une image Docker ?

Une image Docker est un fichier exécutable via docker qui contient tout ce qui est nécessaire pour créer un conteneur. Elle est composée de plusieurs couches, chacune représentant une étape du processus de construction de l’image. La couche de base contient les dépendances du système d’exploitation nécessaire à notre projet, tandis que les couches suivantes ajoutent les dépendances et les configurations nécessaires à l’application.

Avantages de la conteneurisation avec Docker

• Portabilité: Les conteneurs peuvent être facilement déplacés d’un environnement à l’autre sans aucune modification.
• Isolation: Les conteneurs s’exécutent de manière isolée les uns des autres, ce qui garantit la sécurité et la stabilité des applications.
• Fiabilité: Les conteneurs garantissent un environnement d’exécution cohérent pour les applications, quelle que soit la plateforme sous-jacente.
• Efficacité: Les conteneurs partagent le noyau du système d’exploitation, ce qui optimise l’utilisation des ressources.

Structure d’une image Docker

Une image Docker est composée de plusieurs couches, chacune ayant une fonction spécifique :

• Couche de base: Contient le système d’exploitation.
• Couches d’application: Contient les dépendances et les configurations nécessaires à l’application.
• Couche de travail: Contient les données et les fichiers générés par l’application.

Création d’une image Docker

Pour créer une image Docker, il faut utiliser un fichier Dockerfile. Ce fichier contient des instructions qui décrivent les étapes nécessaires à la construction de l’image.

Déploiement d’une application conteneurisée

Une fois l’image Docker créée, elle peut être déployée sur un serveur ou une plateforme de cloud computing. Docker fournit plusieurs outils pour faciliter le déploiement des conteneurs.

Configuration minimale requise

Pour utiliser Docker, vous devez avoir un ordinateur avec les configurations suivantes :

• Système d’exploitation: Windows 10 Famille, Professionnel ou Entreprise (64 bits), macOS 10.12 Sierra ou version ultérieure, ou Linux (64 bits)
• Processeur: Intel Core i5 ou AMD Athlon X4 (ou équivalent)
• Mémoire vive: 4 Go de RAM minimum (8 Go recommandés)
• Espace disque: 2 Go d’espace libre minimum

Activation de la virtualisation

Windows:

1. Redémarrez votre ordinateur et entrez dans le BIOS/UEFI.
2. Recherchez l’option de virtualisation (souvent appelée Intel VT-x ou AMD-V) et activez-la.
3. Enregistrez les modifications et quittez le BIOS/UEFI.

Mac:

1. Redémarrez votre ordinateur et maintenez enfoncée la touche ⌘ pendant le démarrage.
2. Sélectionnez Utilitaires > Démarrage de sécurité.
3. Cliquez sur Continuer.
4. Cochez la case Activer la virtualisation.
5. Cliquez sur Redémarrer.

Linux:

La virtualisation est généralement activée par défaut sur les systèmes Linux. Vous pouvez vérifier son statut en exécutant la commande suivante :

Si la virtualisation est activée, vous verrez une sortie indiquant svm ou vmx.

Installation de Docker

Windows:

1. Téléchargez Docker Desktop pour Windows à partir de https://docs.docker.com/desktop/install/windows-install/.
2. Exécutez le fichier d’installation et suivez les instructions à l’écran.

Mac:

1. Téléchargez Docker Desktop pour Mac à partir de https://docs.docker.com/desktop/install/mac-install/.
2. Exécutez le fichier d’installation et suivez les instructions à l’écran.

Linux:

1. Installez Docker selon les instructions de la documentation Docker pour votre distribution Linux : https://docs.docker.com/.

Vérification de l’installation

Une fois Docker installé, vous pouvez vérifier son installation en exécutant la commande suivante :

Si Docker est correctement installé, vous verrez une sortie indiquant la version de Docker installée.

Qu’est-ce que FROM ?

FROM est une instruction essentielle dans un fichier Dockerfile. Elle permet de créer une image en s’appuyant sur une image existante. Cette image de base est appelée « image parent ».

Avantages de l’utilisation de FROM:

• Réutilisation: Vous pouvez profiter des fonctionnalités et des dépendances déjà installées dans l’image parent.
• Gain de temps: Vous n’avez pas à installer les dépendances de base à partir de zéro.
• Taille réduite: Votre image sera plus petite car elle ne contiendra que les modifications par rapport à l’image parent.

Choisir une image parent pour un projet React:

Pour un projet ReactJS, le meilleur choix d’images sur lequel se baser c’est l’image node avec le tag lts (Long Time Support) en effet React est module node il est donc possible de l’installer via le gestionnaire de paquet node npm (Node Package Manager).

Maintenant que nous avons installé docker et compris ses bases nous allons commencer à faire notre image docker pour la création d’un projet React vierge avec Docker en utilisant un Dockerfile.

Étapes:

1. Créer un fichier Dockerfile

Créez un fichier Dockerfile dans le répertoire de votre projet avec le contenu suivant :

Explication du Dockerfile:

• FROM node:lts : Défini l’image de base comme étant NodeJS version LTS.
• RUN npm install -g create-react-app && npx create-react-app /app : Installe create-react-app globalement et crée un nouveau projet React dans le dossier /app.
• WORKDIR /app : Défini le répertoire de travail dans le conteneur.
• EXPOSE 3000 : Expose le port 3000 du conteneur.
• CMD npm start : Défini la commande à exécuter pour démarrer l’application React.

2. Construire l’image Docker

Exécutez la commande suivante pour construire l’image Docker :

3. Lancer l’application React

Exécutez la commande suivante pour lancer l’application React dans un conteneur :

4. Accéder à l’application

L’application React sera accessible à l’adresse http://localhost:3000.

Savoir faire une image docker pour la création d’un projet React vierge avec Docker c’est bien mais on pourrait vouloir aussi partir d’un projet React existant et créer une image de celui-ci en utilisant un Dockerfile.

• Avoir un projet React existant.

Étapes:

1. Créer un fichier Dockerfile

Créez un fichier Dockerfile dans le répertoire de votre projet avec le contenu suivant :

Explication du Dockerfile:

• FROM node:lts : Défini l’image de base comme étant NodeJS version LTS.
• WORKDIR /app : Défini le répertoire de travail dans le conteneur.
• COPY . . : Copie tous les fichiers du projet React dans le conteneur.
• EXPOSE 3000 : Expose le port 3000 du conteneur.
• CMD npm install && npm start : Installe les dépendances du projet React et lance l’application.

Tips de l’expert : On notera qu’on fait pas le npm install dans un RUN mais dans un CMD pour la simple raison que pour notre prochain tuto ou l’on fera un docker compose globale de notre application cela nous permettra d’installer les dépendances en toutes circonstances

2. Construire l’image Docker

Exécutez la commande suivante pour construire l’image Docker :

3. Lancer l’application React

Exécutez la commande suivante pour lancer l’application React dans un conteneur :

4. Accéder à l’application

L’application React sera accessible à l’adresse http://localhost:3000.

Remarques:

• Vous pouvez modifier le nom de l’image Docker (mon-app-react) selon vos besoins.
• Vous pouvez également ajouter des options à la commande docker run pour personnaliser le comportement du conteneur.

Merci d’avoir suivi ce tutoriel ! Si vous avez envie d’en savoir plus sur le développement d’applications web, sur le dev/ops ou la conception d’applications,inscrivez-vous à notre formation Développeur web et web mobile ou Concepteur Développeur d’Application (CDA) afin de viser l’excellence, acquérir un savoir-faire concret dans le développement web et d’obtenir un diplôme national RNCP reconnus par l’État.