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'erreurAjouter un badge de statut
Bashbash
# Dans ton README.md, ajoute ce badge :
# 
# 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: frontendCe 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'aventureDéjà membre ?Connecte-toi