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 Angular.

Vous devez également avoir :

Un compte GitHub.
Un compte Docker Hub.

Aperçu

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

Construire votre application Angular à 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 : Générer les informations d'identification Docker Hub et définir les secrets GitHub"

Créez un jeton d'accès personnel (PAT) depuis Docker Hub
1. Allez dans votre compte Docker Hub → Paramètres du compte → Sécurité.
2. Générez un nouveau jeton d'accès avec les autorisations Lecture/Écriture.
3. Nommez-le quelque chose comme docker-angular-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 dans 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 : angular-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 Angular

Ajoutez les informations d'identification Docker Hub en tant que secrets du dépôt GitHub

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

Naviguez jusqu'à : 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-angular-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 votre 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 commiter et pousser votre projet local vers votre dépôt GitHub :
1. Préparez tous les fichiers pour le commit.
  $ git add -A
  Cette commande prépare toutes les modifications — y compris les fichiers nouveaux, modifiés et supprimés — en vue du commit.
2. Commitez les modifications préparées avec un message descriptif.
  $ git commit -m "Commit initial"
  Cette commande crée un commit qui enregistre 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 commits locaux 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

En savoir plus sur les commandes Git utilisées dans cette étape :

Git add – Préparez les modifications (nouveaux, modifiés, supprimés) pour le commit

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

Git push – Téléversez les commits locaux vers votre dépôt GitHub

Git remote – Affichez et gérez les URL des dépôts distants

Étape 2 : Configurer le flux de travail

Vous allez maintenant 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 dans 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 Angular 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

      # 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
          cache-from: type=local,src=/tmp/.buildx-cache
          cache-to: type=local,dest=/tmp/.buildx-cache,mode=max

      # 7. Exécuter les tests Angular avec Jasmine
      - name: Exécuter les tests Angular Jasmine à l'intérieur du conteneur
        run: |
          docker run --rm \
            --workdir /app \
            --entrypoint "" \
            ${{ steps.meta.outputs.REPO_NAME }}-dev:latest \
            sh -c "npm ci && npm run test -- --ci --runInBand"
        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 Angular :

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 avec Vitest dans un environnement conteneurisé propre pour garantir la cohérence.
Arrête immédiatement le flux de travail si un test échoue — renforçant 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 du Dockerfile.
Étiquette et pousse l'image finale vers Docker Hub avec les étiquettes 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.

Commit et poussez votre fichier de flux de travail
- Sélectionnez "Commit changes…" dans l'éditeur GitHub.
- Ce push déclenchera automatiquement le pipeline GitHub Actions.
Surveiller l'exécution du flux de travail
- Allez dans l'onglet Actions de votre dépôt GitHub.
- 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 vos dépôts Docker Hub.
- Vous devriez voir une nouvelle image sous votre dépôt avec :
  - Nom de dépôt : ${your-repository-name}
  - Étiquettes 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 des branches :

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

Sous Règles de protection des branches, cliquez sur Add rule.

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 seul le code testé et examiné est fusionné dans la branche main.

Résumé

Dans cette section, vous avez mis en place un pipeline CI/CD complet pour votre application Angular 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 qui :
- Construit votre application à l'intérieur d'un conteneur Docker.
- Exécute des tests dans un environnement conteneurisé cohérent.
- Pousse 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 Angular 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 automatisent vos workflows
Docker Build GitHub Actions – Configurer des constructions conteneurisées avec GitHub Actions
Syntaxe du flux de travail pour GitHub Actions – Référence complète pour écrire des flux de travail GitHub
Référence du fichier de composition – Référence complète de configuration pour compose.yaml
Meilleures pratiques pour écrire des fichiers Dockerfile – Optimiser votre image pour la performance et la sécurité

Étapes suivantes

Suivant, apprenez comment vous pouvez tester et déboguer vos charges de travail Angular 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.