BaliseTonSite

Ton premier pipeline

Crée ton premier workflow CI qui lint et build ton projet Next.js automatiquement.

Étape 1 : créer le fichier

Bashbash
# Depuis la racine de ton projet
mkdir -p .github/workflows
touch .github/workflows/ci.yml

Étape 2 : le workflow complet

Bashbash
# .github/workflows/ci.yml
name: CI

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

jobs:
  ci:
    name: Lint, Type Check & Build
    runs-on: ubuntu-latest

    steps:
      - name: Checkout du code
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
          cache-dependency-path: frontend/package-lock.json

      - name: Installer les dependances
        working-directory: frontend
        run: npm ci

      - name: Lint
        working-directory: frontend
        run: npm run lint

      - name: Type Check
        working-directory: frontend
        run: npx tsc --noEmit

      - name: Build
        working-directory: frontend
        run: npm run build

Étape 3 : commit et push

Bashbash
git add .github/workflows/ci.yml
git commit -m "ci: ajouter pipeline CI (lint, type-check, build)"
git push origin main

Étape 4 : vérifier dans GitHub

Va sur ton repo GitHub, onglet Actions. Tu devrais voir ton workflow en cours d'exécution. Clique dessus pour voir les logs en temps réel.

Comprendre les erreurs CI

Bashbash
# Erreur typique : "Process completed with exit code 1"
# Le step a échoué. Clique sur le step rouge pour voir les logs.

# Erreurs courantes :
# 1. npm ci failed -> package-lock.json absent ou obsolète
#    Fix : npm install puis commit le package-lock.json

# 2. Lint errors -> ESLint a trouvé des erreurs
#    Fix : npm run lint en local, corrige, re-push

# 3. Type errors -> TypeScript a trouvé des erreurs
#    Fix : npx tsc --noEmit en local, corrige les types

# 4. Build failed -> erreur de compilation Next.js
#    Fix : npm run build en local pour reproduire l'erreur

Ajouter un badge de statut

Bashbash
# Dans ton README.md, ajoute ce badge :
# ![CI](https://github.com/TON-USER/TON-REPO/actions/workflows/ci.yml/badge.svg)

# Le badge affiche automatiquement :
# - Vert : CI passing
# - Rouge : CI failing
# - Gris : pas encore exécuté

Optimisation : séparer les jobs

Bashbash
# Version optimisée avec jobs parallèles :
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm', cache-dependency-path: frontend/package-lock.json }
      - run: npm ci
        working-directory: frontend
      - run: npm run lint
        working-directory: frontend

  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm', cache-dependency-path: frontend/package-lock.json }
      - run: npm ci
        working-directory: frontend
      - run: npx tsc --noEmit
        working-directory: frontend

  build:
    needs: [lint, typecheck]  # Build seulement si lint + typecheck passent
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: 'npm', cache-dependency-path: frontend/package-lock.json }
      - run: npm ci
        working-directory: frontend
      - run: npm run build
        working-directory: frontend

Ce que tu as débloqué

  • Créer un workflow CI complet de zéro
  • Les 3 vérifications de base : lint, type-check, build
  • Diagnostiquer les erreurs CI courantes
  • Ajouter un badge de statut dans le README
  • Optimiser avec des jobs parallèles

Verifie tes acquis

5 questions pour valider ce chapitre

1. Quelle commande vérifie les types TypeScript sans compiler ?

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