Étapes pour configurer un pipeline CI/CD pour une application React avec GitLab CI, Docker et Kubernetes

Mettre en place un pipeline CI/CD performant permet d’accélérer les mises en production et de réduire les risques d’erreur. Dans cet article, nous détaillons pas à pas comment automatiser le build, les tests et le déploiement d’une application React en utilisant ReactJS, Docker, GitLab CI et un cluster Kubernetes. Vous êtes CTO ou Lead Dev ? Suivez ce guide pour gagner en fiabilité et en rapidité.

1. Préparer le projet React

  1. Créez un dépôt GitLab et poussez votre code React (npx create-react-app ou équivalent).
  2. Vérifiez qu’un package.json propre existe et que l’application se lance localement via npm start.
  3. Ajoutez un dossier tests/ et intégrez un outil de test (Jest, React Testing Library).

2. Rédiger un Dockerfile optimisé

Un bon Dockerfile réduit la taille de l’image et améliore la sécurité :

FROM node:18-alpine AS builder  
WORKDIR /app  
COPY package*.json ./  
RUN npm ci --only=production  
COPY . .  
RUN npm run build  

FROM nginx:stable-alpine  
COPY --from=builder /app/build /usr/share/nginx/html  
EXPOSE 80  
CMD ["nginx", "-g", "daemon off;"]
  • Étape « builder » pour installer les dépendances hors de l’image finale.
  • Utilisation d’une image NGINX minimaliste (nginx:stable-alpine), réduisant la surface d’attaque.
  • Résultat : image finale de moins de 30 Mo, vs ~200 Mo sans multi-stage.

3. Configurer .gitlab-ci.yml

Placez ce fichier à la racine du projet pour définir les jobs CI/CD :

stages:  
  - build  
  - test  
  - deploy  

variables:  
  IMAGE_NAME: registry.gitlab.com/mon-projet/my-app  

build:  
  stage: build  
  image: docker:20.10  
  services:  
    - docker:dind  
  script:  
    - docker build -t $IMAGE_NAME:$CI_COMMIT_SHORT_SHA .  
    - docker push $IMAGE_NAME:$CI_COMMIT_SHORT_SHA  

test:  
  stage: test  
  image: node:18  
  script:  
    - npm ci  
    - npm test  

deploy:  
  stage: deploy  
  image: bitnami/kubectl:latest  
  script:  
    - kubectl set image deployment/my-app my-app=$IMAGE_NAME:$CI_COMMIT_SHORT_SHA --namespace=production  
  only:  
    - main
  • Le service docker:dind permet le build Docker in Docker.
  • Le job deploy utilise kubectl pour mettre à jour l’image en production.
  • Astuce sécurité : activez l’option CI_JOB_TOKEN pour l’authentification au registry GitLab.

4. Déployer sur Kubernetes

Assurez-vous d’avoir un contexte kubectl configuré :

kubectl config use-context my-cluster-prod  
kubectl apply -f k8s/deployment.yaml

Exemple minimal de k8s/deployment.yaml :

apiVersion: apps/v1  
kind: Deployment  
metadata:  
  name: my-app  
spec:  
  replicas: 3  
  selector:  
    matchLabels:  
      app: my-app  
  template:  
    metadata:  
      labels:  
        app: my-app  
    spec:  
      containers:  
        - name: my-app  
          image: registry.gitlab.com/mon-projet/my-app:latest  
          ports:  
            - containerPort: 80

Vérifiez le statut :

kubectl get pods -l app=my-app --namespace=production

Bonnes pratiques

  • Cachez les couches Docker pour accélérer les rebuilds (--cache-from).
  • Scannez automatiquement les vulnérabilités (service Application Web).
  • Définissez des probes liveness/readiness dans Kubernetes pour garantir la fiabilité.
  • Limitez les accès RBAC et utilisez des namespaces isolés.

Conclusion

En suivant ces étapes, vous obtiendrez un pipeline CI/CD robuste, capable de gérer la construction, les tests et le déploiement de votre application React. Vous réduirez ainsi les temps de mise en production de plus de 50 % tout en renforçant la sécurité de vos images.

Vous souhaitez automatiser ou optimiser votre chaîne DevOps ? Contactez nos experts pour un audit gratuit.