Automatisez vos constructions avec GitHub Actions

Table des matières

Prérequis

Terminez toutes les sections précédentes de ce guide, en commençant par Conteneuriser une application React.js.

Vous devez également avoir :

Un compte GitHub.
Un compte Docker Hub.

Aperçu

Dans cette section, vous mettrez en place un pipeline CI/CD en utilisant GitHub Actions pour automatiquement :

Construire votre application React.js à l'intérieur d'un conteneur Docker.
Exécuter des tests dans un environnement cohérent.
Pousser l'image prête pour la production vers Docker Hub.

Connecter votre dépôt GitHub à Docker Hub

Pour permettre à GitHub Actions de construire et de pousser des images Docker, vous stockerez de manière sécurisée vos informations d'identification Docker Hub dans votre nouveau dépôt GitHub.

Étape 1 : Connecter votre dépôt GitHub à Docker Hub

Créez un Jeton d'Accès Personnel (PAT) depuis Docker Hub
1. Allez à votre compte Docker Hub → Paramètres du compte → Sécurité.
2. Générez un nouveau Jeton d'Accès avec les permissions Lecture/Écriture.
3. Nommez-le quelque chose comme docker-reactjs-sample.
4. Copiez et sauvegardez le jeton — vous en aurez besoin à l'étape 4.
Créez un dépôt dans Docker Hub
1. Allez à votre compte Docker Hub → Créer un dépôt.
2. Pour le nom du dépôt, utilisez quelque chose de descriptif — par exemple : reactjs-sample.
3. Une fois créé, copiez et sauvegardez le nom du dépôt — vous en aurez besoin à l'étape 4.
Créez un nouveau dépôt GitHub pour votre projet React.js

Ajoutez les informations d'identification de Docker Hub comme secrets du dépôt GitHub

Dans votre dépôt GitHub nouvellement créé :

Naviguez vers : Paramètres → Secrets et variables → Actions → Nouveau secret de dépôt.
Ajoutez les secrets suivants :

Nom	Valeur
`DOCKER_USERNAME`	Votre nom d'utilisateur Docker Hub
`DOCKERHUB_TOKEN`	Votre jeton d'accès Docker Hub (créé à l'étape 1)
`DOCKERHUB_PROJECT_NAME`	Le nom de votre projet Docker (créé à l'étape 2)

Ces secrets permettent à GitHub Actions de s'authentifier de manière sécurisée avec Docker Hub lors des flux de travail automatisés.

Connectez votre projet local à GitHub

Liez votre projet local docker-reactjs-sample au dépôt GitHub que vous venez de créer en exécutant la commande suivante depuis la racine de votre projet :
$ git remote set-url origin https://github.com/{your-username}/{your-repository-name}.git
Important

Remplacez {your-username} et {your-repository} par votre nom d'utilisateur et nom de dépôt GitHub réels.

Pour confirmer que votre projet local est correctement connecté au dépôt GitHub distant, exécutez :
$ git remote -v
Vous devriez voir une sortie similaire à :
origin https://github.com/{your-username}/{your-repository-name}.git (fetch) origin https://github.com/{your-username}/{your-repository-name}.git (push)
Cela confirme que votre dépôt local est correctement lié et prêt à pousser votre code source vers GitHub.
Poussez votre code source vers GitHub

Suivez ces étapes pour valider et pousser votre projet local vers votre dépôt GitHub :
1. Préparez tous les fichiers pour la validation.
  $ git add -A
  Cette commande prépare toutes les modifications — y compris les fichiers nouveaux, modifiés et supprimés — pour la validation.
2. Validez vos modifications.
  $ git commit -m "Validation initiale"
  Cette commande crée une validation qui capture les modifications préparées avec un message descriptif.
3. Poussez le code vers la branche main.
  $ git push -u origin main
  Cette commande pousse vos validations locales vers la branche main du dépôt GitHub distant et définit la branche amont.

Une fois terminé, votre code sera disponible sur GitHub, et tout flux de travail GitHub Actions que vous avez configuré s'exécutera automatiquement.

Note

Apprenez-en plus sur les commandes Git utilisées dans cette étape :

Git add – Prépare les modifications (nouvelles, modifiées, supprimées) pour la validation

Git commit – Sauvegarde un instantané de vos modifications préparées

Git push – Envoie les validations locales vers votre dépôt GitHub

Git remote – Affiche et gère les URL des dépôts distants

Étape 2 : Configurer le flux de travail

Maintenant, vous allez créer un flux de travail GitHub Actions qui construit votre image Docker, exécute des tests et pousse l'image vers Docker Hub.

Allez à votre dépôt sur GitHub et sélectionnez l'onglet Actions dans le menu supérieur.
Sélectionnez Configurer un flux de travail vous-même lorsque vous y êtes invité.

Cela ouvre un éditeur en ligne pour créer un nouveau fichier de flux de travail. Par défaut, il sera enregistré dans : .github/workflows/main.yml
Ajoutez la configuration de flux de travail suivante au nouveau fichier :

name: CI/CD – Application React.js avec Docker

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
    types: [opened, synchronize, reopened]

jobs:
  build-test-push:
    name: Construire, tester et pousser l'image Docker
    runs-on: ubuntu-latest

    steps:
      # 1. Récupérer le code source
      - name: Récupérer le code source
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 # Récupère l'historique complet pour une meilleure mise en cache/contexte

      # 2. Configurer Docker Buildx
      - name: Configurer Docker Buildx
        uses: docker/setup-buildx-action@v3

      # 3. Mettre en cache les couches Docker
      - name: Mettre en cache les couches Docker
        uses: actions/cache@v4
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ github.sha }}
          restore-keys: ${{ runner.os }}-buildx-

      # 4. Mettre en cache les dépendances npm
      - name: Mettre en cache les dépendances npm
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
          restore-keys: ${{ runner.os }}-npm-

      # 5. Extraire les métadonnées
      - name: Extraire les métadonnées
        id: meta
        run: |
          echo "REPO_NAME=${GITHUB_REPOSITORY##*/}" >> "$GITHUB_OUTPUT"
          echo "SHORT_SHA=${GITHUB_SHA::7}" >> "$GITHUB_OUTPUT"

      # 6. Construire l'image Docker de développement
      - name: Construire l'image Docker pour les tests
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile.dev
          tags: ${{ steps.meta.outputs.REPO_NAME }}-dev:latest
          load: true # Charger dans le démon Docker local pour les tests
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Exécuter les tests Vitest
      - name: Exécuter les tests Vitest et générer un rapport
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npx vitest run --reporter=verbose"
        env:
          CI: true
          NODE_ENV: test
        timeout-minutes: 10

      # 8. Se connecter à Docker Hub
      - name: Se connecter à Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKER_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

      # 9. Construire et pousser l'image de production
      - name: Construire et pousser l'image de production
        uses: docker/build-push-action@v6
        with:
          context: .
          file: Dockerfile
          push: true
          platforms: linux/amd64,linux/arm64
          tags: |
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:latest
            ${{ secrets.DOCKER_USERNAME }}/${{ secrets.DOCKERHUB_PROJECT_NAME }}:${{ steps.meta.outputs.SHORT_SHA }}
          cache-from: type=local,src=/tmp/.buildx-cache

Ce flux de travail effectue les tâches suivantes pour votre application React.js :

Se déclenche à chaque push ou pull request ciblant la branche main.
Construit une image Docker de développement en utilisant Dockerfile.dev, optimisée pour les tests.
Exécute les tests unitaires en utilisant Vitest dans un environnement conteneurisé propre pour assurer la cohérence.
Arrête immédiatement le flux de travail si un test échoue — garantissant la qualité du code.
Met en cache les couches de construction Docker et les dépendances npm pour des exécutions CI plus rapides.
S'authentifie de manière sécurisée avec Docker Hub en utilisant les secrets du dépôt GitHub.
Construit une image prête pour la production en utilisant l'étape prod dans Dockerfile.
Tague et pousse l'image finale vers Docker Hub avec les tags latest et SHA court pour la traçabilité.

Note

Pour plus d'informations sur docker/build-push-action, consultez le README de l'action GitHub.

Étape 3 : Exécuter le flux de travail

Après avoir ajouté votre fichier de flux de travail, il est temps de déclencher et d'observer le processus CI/CD en action.

Validez et poussez votre fichier de flux de travail

Sélectionnez "Valider les modifications…" dans l'éditeur GitHub.
- Ce push déclenchera automatiquement le pipeline GitHub Actions.
Surveiller l'exécution du flux de travail
1. Allez à l'onglet Actions dans votre dépôt GitHub.
2. Cliquez sur le flux de travail pour suivre chaque étape : build, test, et (si réussie) push.
Vérifier l'image Docker sur Docker Hub
- Après une exécution de flux de travail réussie, visitez votre Docker Hub repositories.
- Vous devriez voir une nouvelle image sous votre dépôt avec :
  - Nom de dépôt : ${your-repository-name}
  - Tags incluent :
    - latest – représente la dernière build réussie ; idéal pour les tests rapides ou le déploiement.
    - <short-sha> – un identifiant unique basé sur le hash de commit, utile pour le suivi de version, les rollbacks et la traçabilité.

Tip

Pour maintenir la qualité du code et empêcher les pushes directs accidentels, activez les règles de protection de branche :

Allez à votre GitHub repo → Paramètres → Branches.

Sous Règles de protection de branche, cliquez sur Ajouter une règle.

Spécifiez main comme nom de branche.

Activez les options comme :

Require a pull request before merging.

Require status checks to pass before merging.

Cela garantit que seulement le code testé et révisé est fusionné dans la branche main.

Sommaire

Dans cette section, vous avez configuré un pipeline CI/CD complet pour votre application React.js conteneurisée en utilisant GitHub Actions.

Voici ce que vous avez accompli :

Créé un nouveau dépôt GitHub spécifiquement pour votre projet.
Généré un jeton d'accès Docker Hub sécurisé et l'avez ajouté à GitHub en tant que secret.
Défini un flux de travail GitHub Actions pour :
- Construire votre application à l'intérieur d'un conteneur Docker.
- Exécuter des tests dans un environnement conteneurisé cohérent.
- Pousser une image prête pour la production vers Docker Hub si les tests passent.
Déclenché et vérifié l'exécution du flux de travail via GitHub Actions.
Confirmé que votre image était publiée avec succès sur Docker Hub.

Avec cette configuration, votre application React.js est maintenant prête pour des tests automatisés et des déploiements sur différents environnements — augmentant la confiance, la cohérence et la productivité de l'équipe.

Ressources connexes

Renforcez votre compréhension de l'automatisation et des bonnes pratiques pour les applications conteneurisées :

Introduction à GitHub Actions – Apprenez comment GitHub Actions automatisez vos workflows
Docker Build GitHub Actions – Configurer des constructions de conteneurs avec GitHub Actions
Syntaxe de flux de travail pour GitHub Actions – Référence complète pour écrire des flux de travail GitHub
Référence de fichier compose – Référence complète de configuration pour compose.yaml
Meilleures pratiques pour écrire des fichiers Docker – Optimiser votre image pour les performances et la sécurité

Étapes suivantes

Suivant, apprenez comment vous pouvez tester et déboguer vos workloads React.js localement sur Kubernetes avant de les déployer. Cela vous aide à vous assurer que votre application se comporte comme prévu dans un environnement de production similaire, réduisant les surprises lors du déploiement.