Documentation de l’Application React avec Docker et Kubernetes

Introduction

Afin de simuler l’application de notre client, nous avons décidé de créer une application react. Ce document décrit les étapes nécessaires pour créer, packager, et déployer une application React.

Il inclut des instructions pour la création d’une image Docker multistagé, le déploiement de l’application avec Kubernetes, et l’utilisation d’Argo CD pour la gestion du déploiement continu.

Prérequis

  • Node.js (version 21.7.1)
  • Docker
  • Kubernetes
  • GitLab
  • Argo CD

Création de l’Application React

Installation avec npm du template create-react-app

Pour créer une application React, nous avons utilisé le template create-react-app.

  1. Installer create-react-app :

    
npm install -g create-react-app

  2. Créer l’application :

    
create-react-app my-react-app

cd my-react-app

Création du Dockerfile Multistage

Pour containeriser l’application React, nous avons créé un Dockerfile multistage. Ce fichier permet de construire l’application et de la servir à l’aide de Nginx.

Dockerfile

Il nous a fallu créer un fichier nommé Dockerfile à la racine de votre projet avec le contenu suivant :

Étape 1 : Construction de l’application

FROM node:21.7.1 AS build

WORKDIR /app

COPY package\*.json ./

RUN npm install

COPY . .

RUN npm run build

# Étape 2 : Configuration de Nginx

FROM nginx:alpine

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

COPY nginx.conf /etc/nginx/nginx.conf

EXPOSE 80

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

Fichier nginx.conf

Puis nous avons créé un fichier nginx.conf à la racine de notre projet avec le contenu suivant :

server {

    listen 80;

    server\_name localhost;

    location / {

        root /usr/share/nginx/html;

        try\_files $uri $uri/ /index.html;

}

}

Création de l’Image Docker et Push vers un Repo Distant

  1. Construction de l’image Docker :
   docker build --platform linux/amd64 -t reactappv2 .

Tague de l’image :


docker tag reactappv2:latest registry.leturfu.ovh/reactappv2:latest

Envoie de l’image vers le repo distant :


docker push registry.leturfu.ovh/reactappv2:latest

Déploiement Kubernetes

Pour déployer l’application sur Kubernetes, nous avons créé les fichiers YAML nécessaires pour le déploiement, le service et l’ingress.

Fichiers YAML

Deployment

Nous avons créé un fichier deployment.yaml avec le contenu suivant :

apiVersion: apps/v1

kind: Deployment

metadata:

  name: reactapp-deployment

  labels:

    app: reactapp

spec:

  replicas: 3

  selector:

    matchLabels:

      app: reactapp

  template:

    metadata:

      labels:

        app: reactapp

    spec:
      containers:
        -    name: reactapp
             image: registry.leturfu.ovh/reactappv2:latest
             ports:
          *- containerPort: 80*

Service

Nous avons créé un fichier service.yaml avec le contenu suivant :

apiVersion: v1

kind: Service

metadata:

  name: reactapp-service

spec:

  selector:

    app: reactapp

  ports:

    - protocol: TCP

      port: 80

      targetPort: 80

  type: LoadBalancer

Ingress

Nous avons créé un fichier ingress.yaml avec le contenu suivant :

apiVersion: networking.k8s.io/v1

kind: Ingress

metadata:

  name: reactapp-ingress

  annotations:

    nginx.ingress.kubernetes.io/rewrite-target: /

spec:

  rules:

    - host: reactapp.yourdomain.com

      http:

        paths:

          - path: /

            pathType: Prefix

            backend:

              service:

                name: reactapp-service
                port:
                  number: 80

Création du Repo GitLab et Push des Dossiers

  1. Création d’un nouveau repository sur GitLab.
  2. Initialisation du repository local et ajout de l’origine GitLab :
git init
git remote add origin ssh://git@gitlab.innovalia.xyz:2225/cluster-kube-pa/reactapp.git

Ajout des fichiers et push sur GitLab :

 git add .

 git commit -m "Initial commit"

 git push -u origin master

Déploiement avec Argo CD

Connexion du Repo

Ouverture de l’interface Argo CD. Ajout du repository GitLab à Argo CD :

  1. Aller dans Settings -> Repositories -> Connect Repo.
  2. Ajouter l’URL du repository GitLab.

Déploiement de l’Application

Créer une nouvelle application dans Argo CD :

  1. Nommer l’application.
  2. Sélectionner le repository GitLab.
  3. Spécifier le chemin des fichiers YAML (e.g., /path/to/yaml/files).
  4. Cocher create namespace
  5. Cliquer sur Create.
  6. Synchroniser l’application pour déployer.

Conclusion

Nous avons maintenant créé une application containerisée, et déployé une application React en utilisant Docker, Kubernetes, et Argo CD.