Déploiement Full-Stack sur le Cloud via CI/CD

1. Qu'est-ce que le CI/CD ?

Avant de nous lancer dans la pratique, il est essentiel de comprendre la philosophie qui sous-tend notre démarche. Le terme CI/CD est au cœur de la culture DevOps, qui vise à unifier le développement (Dev) et les opérations (Ops) pour livrer des applications plus rapidement et de manière plus fiable.

La vidéo suivante offre une excellente introduction à ces concepts.

En résumé :

• CI (Intégration Continue) : À chaque fois qu'un développeur pousse du code, des actions automatiques sont déclenchées (compilation, tests, analyse de code, création d'une image Docker). L'objectif est de s'assurer que le nouveau code s'intègre bien au projet existant.
• CD (Déploiement Continu) : Si l'étape de CI réussit, le processus continue automatiquement pour déployer l'application sur un ou plusieurs environnements (test, pré-production, production).

2. Notre Stratégie de Déploiement

Pour notre projet, nous allons déployer notre application full-stack (backend Spring Boot, frontend Next.js, base de données MySQL) conteneurisée avec Docker. L'ensemble sera orchestré par docker-compose. Notre "plateforme cloud" sera un serveur privé virtuel (VPS), une machine Linux distante sur laquelle nous aurons un contrôle total.

Le processus sera entièrement automatisé par GitHub Actions. Voici le plan :

1. À chaque push sur notre branche principale, GitHub Actions se déclenche.
2. Le pipeline va construire l'application Spring Boot.
3. Il copiera ensuite les fichiers nécessaires (le .jar du backend, le code source du frontend, et les fichiers de configuration Docker) sur notre VPS.
4. Enfin, il se connectera au VPS via SSH et lancera une commande docker-compose pour construire les nouvelles images et démarrer les conteneurs.

Des architectures plus complexes existent, notamment sur des plateformes comme AWS, où l'on découple les services (frontend sur S3/CloudFront, backend sur ECS, base de données sur RDS).

3. Mise en Place du Pipeline : Guide Pratique

Nous allons suivre une excellente vidéo qui détaille la mise en place d'un pipeline CI/CD pour une application Spring Boot. Nous l'adapterons ensuite pour notre contexte full-stack.

Étape 1 : Préparation du Serveur Cloud (VPS)

La première étape consiste à préparer notre environnement de destination. Cela implique de louer un VPS, d'y installer nos outils et de sécuriser l'accès.

Étape 2 : Configuration des Secrets sur GitHub

Votre pipeline aura besoin d'informations sensibles pour se connecter à votre VPS (son adresse IP, le nom d'utilisateur, la clé SSH privée). Il est impératif de ne jamais les écrire en clair dans vos fichiers de configuration. GitHub Actions propose une solution sécurisée : les "Secrets".

Étape 3 : Création du Workflow GitHub Actions

C'est ici que nous décrivons toutes les étapes de notre pipeline CI/CD dans un fichier YAML. Créez le fichier .github/workflows/deploy.yml à la racine de votre projet.

La vidéo va vous guider dans la création de ce fichier. Voici une décomposition de sa logique :

4. Adapter le Pipeline pour une Application Full-Stack

La vidéo se concentre sur un backend Java. Nous devons l'adapter pour notre application full-stack. Les deux points de modification principaux sont le docker-compose.yml et l'étape de copie de fichiers dans le workflow.

1. Mettez à jour votre docker-compose.yml :

Votre fichier docker-compose.yml doit maintenant décrire trois services : la base de données, le backend et le frontend. Il devrait ressembler à ceci :

version: '3.8'

services:
  mysql-db:
    image: mysql:8.0
    container_name: mysql-container
    restart: unless-stopped
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      MYSQL_DATABASE: ${DB_NAME}
    ports:
      - "3306:3306"
    volumes:
      - db-data:/var/lib/mysql

  backend:
    build:
      context: ./backend # Suppose que le Dockerfile est dans un sous-dossier "backend"
    container_name: spring-boot-container
    restart: unless-stopped
    depends_on:
      - mysql-db
    ports:
      - "8080:8080"
    environment:
      - SPRING_DATASOURCE_URL=jdbc:mysql://mysql-db:3306/${DB_NAME}?useSSL=false



      # ... autres variables d'environnement (JWT secret, etc.)

  frontend:
    build:
      context: ./frontend # Suppose que le Dockerfile est dans un sous-dossier "frontend"
    container_name: nextjs-container
    restart: unless-stopped
    ports:
      - "3000:3000"
    environment:



      # L'URL du backend, accessible via le nom du service Docker
      - NEXT_PUBLIC_API_URL=http://backend:8080 

volumes:
  db-data:

Note : Pour que cela fonctionne, vous devez avoir un Dockerfile pour votre backend et un autre pour votre frontend dans leurs dossiers respectifs.

2. Mettez à jour l'étape de copie dans deploy.yml :

L'action scp-action doit maintenant copier non seulement les fichiers du backend mais aussi le dossier complet du frontend et le docker-compose.yml.

      - name: Copy files via SSH
        uses: appleboy/scp-action@master
        with:
          host: ${{ secrets.VPS_IP }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          source: "./backend/target/*.jar,./frontend,./docker-compose.yml" # <-- MODIFICATION
          target: "/opt/mon-app"
          strip_components: 1 # Ajustez si nécessaire pour aplatir la structure

Ici, nous copions le JAR, tout le dossier frontend et le fichier docker-compose.yml.

3. Mettez à jour le script de déploiement dans deploy.yml :

Le script exécuté via SSH doit maintenant naviguer vers le bon répertoire et utiliser docker compose pour construire et lancer les services.

      - name: Deploy to VPS
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.VPS_IP }}
          username: ${{ secrets.VPS_USER }}
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            cd /opt/mon-app
            docker compose down
            docker compose up --build -d
            docker image prune -f

La commande docker compose up --build -d est la clé :

• --build : force la reconstruction des images (backend et frontend) si leurs fichiers sources ont changé.
• -d : lance les conteneurs en mode "détaché" (en arrière-plan).

5. Déploiement et Vérification

Une fois votre fichier deploy.yml poussé sur GitHub, le pipeline se déclenchera. Vous pouvez suivre son exécution dans l'onglet "Actions" de votre dépôt.

Conclusion

Félicitations ! Vous avez non seulement construit une application full-stack complète, mais vous l'avez également dotée d'un pipeline de déploiement automatisé et professionnel.

Points clés à retenir :

• Le CI/CD est une pratique essentielle du DevOps moderne qui automatise l'intégration et le déploiement de votre code.
• GitHub Actions est un outil puissant et intégré pour construire des pipelines de CI/CD directement depuis votre dépôt de code.
• La sécurité est primordiale : utilisez toujours des secrets pour gérer les informations sensibles (clés SSH, mots de passe).
• Docker et Docker Compose sont les fondations qui garantissent que votre application s'exécutera de la même manière sur votre machine, sur la machine de CI et sur le serveur de production.
• L'adaptation est la clé : savoir prendre un exemple existant et l'adapter à son propre contexte (ici, passer d'un simple backend à une application full-stack) est une compétence fondamentale.

Vous avez maintenant assemblé toutes les pièces du puzzle du développement d'applications modernes, de l'idée initiale à la mise en production.

Prochaine étape :

Le cycle de développement technique de notre projet de synthèse est terminé. La dernière étape, et non des moindres, est de savoir présenter votre travail. Dans la leçon finale, nous allons préparer et simuler une présentation de livraison de projet au client, en mettant en valeur les choix techniques et fonctionnels que vous avez faits tout au long de ce parcours.