BaliseTonSite

Pipelines CI/CD & Deploy

Génère des workflows GitHub Actions pour tes déploiements automatisés sur Cloudflare Pages - la chaîne de production qui forge et livre sans intervention humaine.

10.1La chaîne de production automatisée

Un pipeline CI/CD bien configuré fait ceci à chaque git push :

PushLint + TS checkTestsBuildDeployEn ligne

10.2Le prompt "génère mon workflow GitHub Actions"

Prompt : Workflow CI/CD completmarkdown
Tu es DevOps expert GitHub Actions + Cloudflare Pages.

Génère un workflow GitHub Actions complet pour mon projet.

Stack :
- Next.js 15 (App Router, output: 'export' pour Cloudflare Pages)
- TypeScript strict
- Tests : Vitest
- Linting : ESLint + next lint
- Node.js 20

Workflow souhaité :
1. Déclenché sur push main et PR vers main
2. Jobs en parallèle : lint + typecheck + tests
3. Job build (dépend des 3 précédents)
4. Job deploy sur Cloudflare Pages (seulement sur push main)

Secrets à utiliser :
- CLOUDFLARE_API_TOKEN
- CLOUDFLARE_ACCOUNT_ID

Optimisations :
- Cache node_modules entre les jobs
- Afficher le résumé des tests dans la PR
- Notifier en cas d'échec seulement
.github/workflows/ci-deploy.yml - Résultat générébash
name: CI / Deploy

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

env:
  NODE_VERSION: '20'

jobs:
  lint:
    name: Lint & TypeCheck
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json
      - run: npm ci
      - run: npm run lint
      - run: npx tsc --noEmit

  test:
    name: Tests Vitest
    runs-on: ubuntu-latest
    defaults:
      run:
        working-directory: frontend
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json
      - run: npm ci
      - run: npm run test -- --reporter=verbose
        continue-on-error: false

  build:
    name: Build
    runs-on: ubuntu-latest
    needs: [lint, test]
    defaults:
      run:
        working-directory: frontend
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json
      - run: npm ci
      - run: npm run build
        env:
          NEXT_PUBLIC_SITE_URL: ${{ vars.NEXT_PUBLIC_SITE_URL }}
      - uses: actions/upload-artifact@v4
        with:
          name: build-output
          path: frontend/out
          retention-days: 1

  deploy:
    name: Deploy Cloudflare Pages
    runs-on: ubuntu-latest
    needs: [build]
    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
    steps:
      - uses: actions/download-artifact@v4
        with:
          name: build-output
          path: out
      - uses: cloudflare/pages-action@v1
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          projectName: balise-ton-site
          directory: out
          gitHubToken: ${{ secrets.GITHUB_TOKEN }}

10.3CHANGELOG auto depuis les commits

Si tu utilises les Conventional Commits (feat:, fix:, chore:…), un workflow peut générer ton CHANGELOG automatiquement à chaque release :

.github/workflows/release.yml - CHANGELOG autobash
name: Release

on:
  push:
    tags:
      - 'v*'

jobs:
  release:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # Tous les commits pour le changelog
      - name: Générer le CHANGELOG
        uses: conventional-changelog-action@v3
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          output-file: CHANGELOG.md
      - name: Créer la GitHub Release
        uses: softprops/action-gh-release@v1
        with:
          body_path: CHANGELOG.md
          generate_release_notes: true

10.4Adapter le workflow à ton projet

Pour personnaliser ce workflow, utilise ce prompt de suivi :

Prompt : Adapter un workflow existantmarkdown
Voici mon workflow GitHub Actions actuel :
[COLLE LE YAML]

Je veux y ajouter :
- [ex. vérification des variables d'env avant le build]
- [ex. Slack notification en cas d'échec]
- [ex. déploiement preview sur chaque PR avec une URL unique]
- [ex. audit Lighthouse automatique sur l'URL de preview]

Modifie uniquement les jobs concernés, garde le reste intact.

Tu as terminé Génération Auto !

Tu maîtrises maintenant les 10 techniques de génération automatique pour booster ton workflow Next.js / WordPress headless :

Inférence de types depuis API/GraphQL
Synchronisation de contrats
Scaffolding UI intelligent
Génération de hooks de données
Audit performance Lighthouse
Tests unitaires automatisés
SEO sémantique avec JSON-LD
Accessibilité ARIA assistée
Documentation auto-maintenue
Pipelines CI/CD opérationnels

La forge est en marche autonome. Continue avec le cours Audit & Sécurité pour apprendre à traquer les failles et booster tes scores Lighthouse grâce à l'IA.

Verifie tes acquis

5 questions pour valider ce chapitre

1. Qu'est-ce qu'un pipeline CI/CD ?

Valide et sauvegarde ce chapitre

Ne perds pas le fil de ton apprentissage. Chaque QCM terminé sauvegarde ton score. Crée ton profil gratuitement pour débloquer toutes les évaluations du site et retrouver tes résultats plus tard.

Commencer l'aventure
Déjà membre ?Connecte-toi