Mettre en place une pipeline CI/CD simple avec GitHub Actions — Dev Notes

Introduction : GitHub Actions, le CI/CD natif de GitHub

GitHub Actions est devenu l'outil CI/CD incontournable pour les projets hébergés sur GitHub. Lancé en 2019, il offre une intégration native avec vos repositories, éliminant le besoin de configurer des services tiers comme Jenkins ou Travis CI. L'avantage majeur ? Tout se passe au même endroit : code, issues, pull requests et pipelines de déploiement.

Concepts fondamentaux

Workflows, Jobs et Steps

Un workflow est un processus automatisé défini en YAML et stocké dans .github/workflows/. Structure hiérarchique :

Workflow : processus complet (CI, CD, release...)
Job : unité d'exécution (tests, build, deploy...)
Step : action individuelle (run command, use action...)

Déclencheurs (Triggers)

GitHub Actions peut réagir à de nombreux événements :

push : sur un commit
pull_request : ouverture/modification de PR
schedule : cron jobs (backups, cleanups...)
workflow_dispatch : déclenchement manuel
release : création de release

Pipeline CI complète

Créez .github/workflows/ci.yml :

name: CI Pipeline

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  lint:
    name: Code Quality
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run lint
      - run: npm run format:check

  test:
    name: Tests
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [18, 20]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      
      - run: npm ci
      - run: npm test -- --coverage
      
      - name: Upload coverage
        if: matrix.node-version == '20'
        uses: codecov/codecov-action@v4
        with:
          token: ${{ secrets.CODECOV_TOKEN }}

  build:
    name: Build
    needs: [lint, test]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
      
      - name: Upload artifact
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

Points clés

1. Parallélisation "lint" et "test" tournent en même temps. "build" attend leur succès avec needs. 2. Matrix builds Teste sur Node 18 et 20 simultanément. 3. Caching cache: 'npm' divise le temps d'install par 3.

Pipeline CD : Déploiement

.github/workflows/deploy.yml :

name: Deploy

on:
  push:
    branches: [main]

jobs:
  deploy-staging:
    name: Deploy Staging
    runs-on: ubuntu-latest
    environment:
      name: staging
      url: https://staging.app.com
    
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
        env:
          VITE_API_URL: ${{ secrets.STAGING_API }}
      
      - name: Deploy to Vercel
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}

  deploy-production:
    name: Deploy Production
    needs: deploy-staging
    runs-on: ubuntu-latest
    environment:
      name: production
      url: https://app.com
    
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'
      
      - run: npm ci
      - run: npm run build
        env:
          VITE_API_URL: ${{ secrets.PROD_API }}
      
      - name: Deploy to Vercel Prod
        uses: amondnet/vercel-action@v25
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          vercel-org-id: ${{ secrets.ORG_ID }}
          vercel-project-id: ${{ secrets.PROJECT_ID }}
          vercel-args: '--prod'

Gestion des Secrets

Créer des secrets

Dans GitHub : Settings → Secrets and variables → Actions Types de secrets :

Repository secrets : accessibles partout
Environment secrets : staging vs production
Organization secrets : partagés entre repos

Utilisation dans le workflow

env:
  API_KEY: ${{ secrets.API_KEY }}
  DB_URL: ${{ secrets.DATABASE_URL }}
  PUBLIC_VAR: ${{ vars.PUBLIC_CONFIG }}

Sécurité :

Ne jamais echo un secret
Masquer automatiquement dans les logs
Révoquer si compromis

Optimisations avancées

Caching multi-niveaux

- name: Cache dependencies
  uses: actions/cache@v4
  with:
    path: |
      ~/.npm
      node_modules
      .next/cache
    key: ${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}

Conditional execution

- name: Deploy only on main
  if: github.ref == 'refs/heads/main' && success()
  run: npm run deploy

Reusable workflows

Créez des workflows réutilisables pour éviter la duplication :

# .github/workflows/deploy-reusable.yml
on:
  workflow_call:
    inputs:
      environment:
        required: true
        type: string

Actions du Marketplace

Actions essentielles :

actions/checkout@v4 : clone le repo
actions/setup-node@v4 : installe Node.js
actions/cache@v4 : cache les dépendances
codecov/codecov-action : upload coverage
slackapi/slack-github-action : notifs Slack

Debugging

Activer les logs détaillés

Ajoutez dans Settings → Secrets :

ACTIONS_RUNNER_DEBUG = true
ACTIONS_STEP_DEBUG = true

Afficher le contexte

- name: Debug
  run: echo '${{ toJSON(github) }}'

Best Practices

1. Versionner les actions

actions/checkout@v4
actions/checkout@main

2. Timeouts

jobs:
  test:
    timeout-minutes: 10

3. Fail fast

strategy:
  fail-fast: true

4. Environnements protégés Activez "Required reviewers" pour la production.

Conclusion

GitHub Actions transforme le CI/CD en un processus transparent et automatisé. Avantages clés :

Gratuit pour projets publics
Intégration GitHub native
10 000+ actions disponibles
Configuration simple en YAML

Action immédiate : Créez votre premier workflow CI aujourd'hui et observez la magie opérer ! Ressources :

docs.github.com/actions
github.com/marketplace?type=actions
github.com/sdras/awesome-actions