📚 Rapport Technique CI/CD - Projet Qrious Quiz

Projet Cloud Native DevOps - ESIEE Paris 2025

👤 Auteurs : Ilyas GHANDAOUI & Cyprien BOSCHER - E4FI ESIEE Paris

👨‍🏫 Enseignant : Badr TAJINI

📅 Date : 28 décembre 2025

🔗 Repository : https://github.com/ilyasgdo/Projet-Full-Stack-ESIEE-2025-Ilyas-Cyprien

🌐 Application en Ligne

Architecture hybride : Le frontend est déployé sur le CDN Cloudflare Pages (disponible 24/7), tandis que le backend utilise un tunnel Cloudflare pour exposer le cluster Kubernetes local (Minikube) sur Internet.

📋 Table des Matières

1. Introduction
2. Architecture Globale
3. Phase 1 : Application Web
4. Phase 2 : Intégration Continue (CI)
5. Phase 3 : Livraison Continue (CD)
6. Phase 4 : Déploiement Kubernetes
7. Base de Données
8. Scripts d’Automatisation
9. Sécurité
10. Guide de Déploiement
11. Phase 5 : Déploiement Cloud (Cloudflare)
12. Métriques de Performance
13. Sécurité et Zero Trust
14. Erreurs Rencontrées et Solutions
15. Couverture des Tests
16. Bonnes Pratiques et Leçons Apprises
17. Conclusion

1. Introduction

1.1 Contexte du Projet

Ce projet implémente une architecture CI/CD complète pour une application de quiz web. L’objectif est de démontrer les pratiques DevOps modernes avec :

• Intégration Continue (CI) : Tests automatisés et build Docker
• Livraison Continue (CD) : Déploiement automatique sur Kubernetes
• Infrastructure locale : Minikube pour le cluster Kubernetes

1.2 Technologies Utilisées

1.3 Objectifs Pédagogiques

2. Architecture Globale

2.1 Vue d’Ensemble du Système

2.2 Flux de Données

3. Phase 1 : Application Web

3.1 Architecture de l’Application

3.2 Structure des Fichiers

📁 Projet-Full-Stack-ESIEE-2025-Ilyas-Cyprien/
├── 📁 .github/workflows/
│   └── 📄 ci-cd.yml              # Pipeline GitHub Actions
├── 📁 k8s/
│   ├── 📄 configmap.yaml         # Variables d'environnement
│   ├── 📄 secrets.yaml           # Secrets (base64)
│   ├── 📄 backend-deployment.yaml
│   ├── 📄 frontend-deployment.yaml
│   └── 📄 pvc.yaml               # Persistent Volume Claim
├── 📁 scripts/
│   ├── 📄 start-cd.sh            # Setup complet
│   ├── 📄 setup-minikube.sh      # Config Minikube
│   ├── 📄 deploy.sh              # Déploiement K8s
│   └── 📄 auto-deploy.sh         # Watcher Docker Hub
├── 📁 quiz-api/                   
│   ├── 📄 app.py               
│   ├── 📄 models.py              
│   ├── 📄 auth.py                
│   ├── 📄 Dockerfile
│   ├── 📄 requirements.txt
│   └── 📁 tests/
│       └── 📄 test_api.py        
└── 📁 quiz-ui/                    
    ├── 📁 src/
    │   ├── 📁 views/             
    │   ├── 📁 services/          
    │   └── 📁 test/             
    ├── 📄 Dockerfile.k8s
    └── 📄 package.json

3.3 API REST Endpoints

4. Phase 2 : Intégration Continue (CI)

4.1 Pipeline GitHub Actions

4.2 Configuration du Workflow

# .github/workflows/ci-cd.yml
name: CI/CD Pipeline
 
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
 
jobs:
  test-frontend:
    name: Frontend Tests (Vitest)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
        working-directory: quiz-ui
      - run: npm run test:run
        working-directory: quiz-ui
 
  test-backend:
    name: Backend Tests (Pytest)
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-python@v5
        with:
          python-version: '3.9'
      - run: pip install -r requirements.txt
        working-directory: quiz-api
      - run: pytest tests/ -v
        working-directory: quiz-api
 
  build-and-push:
    needs: [test-frontend, test-backend]
    runs-on: ubuntu-latest
    # ... build Docker multi-arch

4.3 Couverture des Tests

5. Phase 3 : Livraison Continue (CD)

5.1 Processus de Déploiement Automatique

5.2 Images Docker

6. Phase 4 : Déploiement Kubernetes

6.1 Architecture du Cluster

6.2 Manifests Kubernetes

ConfigMap

apiVersion: v1
kind: ConfigMap
metadata:
  name: quiz-config
data:
  FLASK_ENV: "production"
  FLASK_DEBUG: "0"
  VITE_API_URL: "http://quiz-backend:5000"

Secrets

apiVersion: v1
kind: Secret
metadata:
  name: quiz-secrets
type: Opaque
data:
  SECRET_KEY: <base64>
  ADMIN_PASSWORD: <base64>

6.3 Ressources et Limites

6.4 Health Checks (Probes)

7. Base de Données

7.1 Schéma de la Base de Données

7.2 Opérations CRUD

8. Scripts d’Automatisation

8.1 Vue d’Ensemble des Scripts

8.2 Détail des Scripts

9. Sécurité

9.1 Matrice de Sécurité

9.2 Bonnes Pratiques Implémentées

10. Guide de Déploiement

10.1 Prérequis

10.2 Installation Pas à Pas

git clone https://github.com/ilyasgdo/Projet-Full-Stack-ESIEE-2025-Ilyas-Cyprien.git
cd Projet-Full-Stack-ESIEE-2025-Ilyas-Cyprien
 
./scripts/start-cd.sh
 
./scripts/auto-deploy.sh
 
minikube service quiz-frontend --url

10.3 Commandes Utiles

# Status des pods
kubectl get pods -l app=quiz
 
# Logs backend
kubectl logs -l component=backend -f
 
# Logs frontend
kubectl logs -l component=frontend -f
 
# Dashboard Kubernetes
minikube dashboard
 
# Redémarrer les déploiements
kubectl rollout restart deployment/quiz-backend
kubectl rollout restart deployment/quiz-frontend

11. Phase 5 : Déploiement Cloud (Cloudflare)

En plus du déploiement local Minikube, l’application est désormais accessible publiquement via Cloudflare !

11.1 Architecture Cloud

🔒 Sécurité : Le port-forward écoute uniquement sur localhost (127.0.0.1). Le trafic est chiffré de bout en bout via le tunnel Cloudflare.

11.2 Composants Cloud

11.3 Workflow de Déploiement Frontend

Un nouveau workflow GitHub Actions a été ajouté pour déployer automatiquement le frontend sur Cloudflare Pages :

# .github/workflows/deploy-frontend.yml
name: Deploy Frontend to Cloudflare Pages
 
on:
  push:
    branches: [main, master]
    paths:
      - 'quiz-ui/**'
  workflow_dispatch:
 
jobs:
  deploy:
    name: Deploy to Cloudflare Pages
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm ci
        working-directory: quiz-ui
      - run: npm run build
        working-directory: quiz-ui
        env:
          VITE_API_URL: ${{ secrets.VITE_API_URL }}
      - uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: quiz-frontend
          directory: quiz-ui/dist

11.4 Configuration Cloudflare Tunnel

Le backend Flask sur Minikube est exposé publiquement via un tunnel Cloudflare :

Configuration du tunnel (~/.cloudflared/config.yml) :

tunnel: 50ea3b9e-3937-4c50-b6e0-36bb54fb9591
credentials-file: ~/.cloudflared/50ea3b9e-....json
 
ingress:
  - hostname: api.ilyasghandaoui.store
    service: http://localhost:5000
  - service: http_status:404

Démarrage du tunnel :

# Terminal 1 : Port-forward Kubernetes
kubectl port-forward svc/quiz-backend 5000:5000
 
# Terminal 2 : Tunnel Cloudflare
cloudflared tunnel run quiz-backend

11.5 Secrets GitHub Requis

11.6 Avantages du Déploiement Cloud

12. Métriques de Performance

12.1 Temps de Build et Déploiement

12.2 Performance de l’Application

13. Sécurité et Zero Trust

13.1 Architecture de Sécurité

13.2 Cloudflare Zero Trust

L’application est protégée par Cloudflare Zero Trust Access :

• Politique d’accès : Uniquement les emails @esiee.fr et @edu.esiee.fr
• Authentification : Email OTP (One-Time Password)
• Session : Expiration configurable

Utilisateur → Cloudflare Access → Vérification email ESIEE → Application

13.3 Chiffrement du Tunnel

Le tunnel Cloudflare assure un chiffrement TLS de bout en bout :

flowchart LR
    subgraph Internet
        User["👤 Utilisateur"]
    end
    subgraph Cloudflare["☁️ Cloudflare Edge"]
        CF["TLS Termination"]
    end
    subgraph Local["💻 Machine Locale"]
        Tunnel["cloudflared<br/>TLS Tunnel"]
        K8s["Kubernetes<br/>Backend"]
    end
    
    User -->|HTTPS| CF
    CF -->|TLS 1.3| Tunnel
    Tunnel -->|localhost| K8s

Avantages sécurité :

• ✅ Aucun port exposé sur la machine locale
• ✅ Pas besoin de VPN ou IP publique
• ✅ Authentification gérée par Cloudflare
• ✅ Logs et audit centralisés

14. Erreurs Rencontrées et Solutions

14.1 Problèmes CI/CD

14.2 Problèmes Kubernetes

14.3 Problèmes Cloudflare

15. Couverture des Tests

15.1 Métriques de Couverture

15.2 Types de Tests

16. Bonnes Pratiques et Leçons Apprises

16.1 Leçons Apprises

16.2 Bonnes Pratiques Appliquées

• ✅ Infrastructure as Code : Tout est versionné (K8s manifests, workflows)
• ✅ Secrets Management : Secrets GitHub et Kubernetes Secrets
• ✅ Immutable Tags : Images Docker avec SHA commit
• ✅ Blue-Green possible : Architecture prête pour déploiements sans downtime
• ✅ Observabilité : Logs centralisés, health checks

17. Conclusion

17.1 Récapitulatif du Projet

18.2 Objectifs Atteints

📎 Annexes

A. Liens Utiles

• Repository GitHub
• Docker Hub - quiz-api
• Docker Hub - quiz-ui
• Application Live
• API Backend

B. Références

• Kubernetes Documentation
• GitHub Actions Documentation
• Flask Documentation
• Vue.js Documentation
• Cloudflare Pages
• Cloudflare Tunnel