Skip to content

LAB: Dockerization d'une application ReactJS#

Présentation#

Objectif#

  • Création image Docker avec une approche de build multistage
  • Administration & exploitation conteneur
  • Familiarisation écriture Dockerfile

Prérequis#

  • Existence d'un réseau Docker lab-network et d'un conteneur myawesome-springboot-app. Si vous ne les avez pas, je vous recommande de dérouler les labs postgres-docker & dockerize-spring
  • Instance docker fonctionnel
  • Buildx (plugin Docker CLI) installé
  • Maitrise des commandes de base Docker

Déroulement du Lab#

Etape 1 : Récupération du code source#

La commande suivante permet de récupérer le code source du dépôt des labs. 

git clone https://github.com/wingufactory/lecloudfacile-devops-labs.git
cd springboot-react-app/moodboard-frontend

Etape 2 : Création d'un dockerfile#

Créez un fichier nommé Dockerfile et mettre le contenu ci-dessous:


# Etape 1: Construction de l'application

# Utilisation d'une image de base nodejs
FROM node:18-alpine as build

# Définition d'un répertoire de travail à l'intérieur du conteneur temporaire
WORKDIR /app

# Ajout des variables ARG and ENV pour l' url de l'API
ARG REACT_APP_API_URL

ENV REACT_APP_API_URL $REACT_APP_API_URL


# Copie du package.json and package-lock.json dans le conteneur
COPY package.json ./

# Installation des dépendences
RUN npm install

# Copie des sources de l'applications
COPY . .

# Construction de l'application react
RUN npm run build


# Etape 2: Creation de l'image finale contenant l'application

# Utilisation d'une image de base nginx
FROM nginx:alpine

# Copie des resources générées à l'étape étape 1
COPY --from=build /app/build /usr/share/nginx/html

# xposition du port d'execution de l'application
EXPOSE 80

# Lancement de l'application
CMD ["nginx", "-g", "daemon off;"]

Etape 3: Création de l'image#

La commande suivante permet de créer une image docker react-imageavec le tag 1.0.0.

docker buildx build -t react-image:1.0.0 --build-arg REACT_APP_API_URL='http://0.0.0.0:8088/api/feedback' --load .

Etape 4: Execution du container#

La commande suivante permet de créer et de démarrer un conteneur myawesome-react-app à partir de l'image react-image:1.0.0

docker run -d --name myawesome-react-app\
  --network lab-network\
  -e REACT_APP_API_URL=http://0.0.0.0:8088/api/feedback\
  -p 8090:80\
   react-image:1.0.0

Explication de la commande

  • docker run: créer et démarrer un conteneur
  • -d : executer le conteneur en arrière-plan
  • --name myawesome-react-app : donner le nom myawesome-react-app au conteneur qui sera créé
  • --network lab-network : rattacher le conteneur au réseau lab-network
  • -e REACT_APP_API_URL="http://0.0.0.0:8088/api/feedback" : permet d'indiquer l'url du backend springboot déjàdéployé dans le lab précédent. -p 8090:80 : permet d'exposer le port 80 du conteneur sur le port 8090 de la machine hôte.
  • react-image:1.0.0: Utiliser la version 1.0.0 de l'image react-image créée à l'étape précédente.

Etape 5: Vérification de l'état du container#

La commande suivante permet de vérifier si le conteneur a bien démarré.

docker ps -a -f name=myawesome-react-app

Etape 6: Accès à l'application#

Vous pouvez accéder à l'interface de l'application en naviguant sur votre browser à l'adresse suivante: http://0.0.0.0:8090/

Etape 7: Affichage des logs en mode streaming#

La commande ci-dessous permet d'afficher les logs en mode streaming.

docker logs myawesome-react-app -f

Etape 8: Suppression des conteneurs#

Il est impératif de nettoyer votre environnement pour les prochains labs en exécutant les commandes ci-après:

# Arret des conteneurs
docker stop myawesome-react-app
docker stop myawesome-springboot-app
docker stop lecloudfacile-postgres

# Suppression des conteneurs
docker rm myawesome-react-app
docker rm myawesome-springboot-app
docker rm lecloudfacile-postgres

#Suppression du réseau lab-network
docker network rm lab-network

#Suppression du volume pg-data
docker volume rm pg-data

Insights#

Nous avons à travers ce lab, demarrez plusieurs conteneurs dans une approche impérative. Cette façon de faire n'est pas très appropriée si nous avons plusieurs conteneurs. Il est important de noter que Docker offre également une approche déclarative qui facilite la gestion et permet le versionning. Dans la suite, nous verrons comment compose peut faciliter la gestion des conteneurs.