Aller au contenu principal
    IT INNOVE - Logo de l'agence de développement web et mobile
    Retour au blog
    Process

    CI/CD React: pipeline complet prêt pour la prod

    Équipe IT INNOVE
    8 min de lecture

    De la PR à la prod: lint, tests, build, preview, déploiement et rollback sécurisés.

    CI/CD React: pipeline complet prêt pour la prod - Process | IT INNOVE
    CI/CD React: pipeline complet prêt pour la prod - Process

    CI/CD React: pipeline complet prêt pour la prod

    Mettre en place une chaîne CI/CD fiable évite les régressions et accélère les livraisons. Voici un pipeline prêt à l’emploi pour une app React/Vite
    qualité automatique, prévisualisation, déploiement progressif et rollback en un clic.

    Objectifs

    • Qualité constante (lint, type-check, tests)
    • Builds reproductibles et rapides
    • Prévisualisation par pull request
    • Déploiement progressif + rollback
    • Traçabilité et métriques de release

    Étape 1 — Qualité de code

    bash
    # Lint + TypeScript + tests unitaires
pnpm lint && pnpm typecheck && pnpm test -- --coverage
    yaml
    # .github/workflows/ci.yml
name: CI
on: [pull_request]
jobs:
  quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm lint && pnpm typecheck && pnpm test -- --coverage

    Étape 2 — Build + artefacts

    yaml
      build:
    runs-on: ubuntu-latest
    needs: [quality]
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v3
        with: { version: 9 }
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'pnpm' }
      - run: pnpm install --frozen-lockfile
      - run: pnpm build
      - uses: actions/upload-artifact@v4
        with:
          name: web-dist
          path: dist

    Étape 3 — Preview par PR

    yaml
      preview:
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    needs: [build]
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist }
      - name: Publish Preview (Netlify)
        run: |
          npx netlify deploy --dir=dist --message "PR #${{ github.event.number }}" --json > preview.json
      - name: Comment PR
        run: |
          URL=$(cat preview.json | jq -r '.deploy_url')
          gh pr comment ${{ github.event.number }} --body "Aperçu: ${URL}"

    Étape 4 — Déploiement progressif

    yaml
    on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    needs: [build]
    steps:
      - uses: actions/download-artifact@v4
        with: { name: web-dist, path: dist }
      - name: Deploy Production (Netlify)
        run: npx netlify deploy --dir=dist --prod --json > prod.json
      - name: Record Release
        run: |
          URL=$(cat prod.json | jq -r '.url')
          echo "Deployed ${URL}"

    Étape 5 — Rollback instantané

    • Conservez les artefacts de build 14 jours
    • Gardez un tag Git sur chaque release (vX.Y.Z)
    • Utilisez « Deploy prev build » (Netlify/Vercel) en cas d’incident

    Observabilité de release

    • Tracer la version déployée via une variable d’environnement injectée au build (ex: APP_VERSION)
    • Logger la version dans les erreurs front et l’outil d’analytics

    Checklist finale

    • [ ] CI verte obligatoire pour merge
    • [ ] Previews validées par QA/Produit
    • [ ] Déploiement automatisé sur main
    • [ ] Rollback documenté
    • [ ] Rétro CI/CD mensuelle

    Questions fréquentes