CI/CD GitHub Actions pour React
Automatisez les étapes d’analyse statique, de test, de compilation et de déploiement dans un flux de travail GitHub Actions à chaque envoi.
CI/CD GitHub Actions pour React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce que GitHub Actions ?
GitHub Actions est une plateforme d’intégration et de livraison continues intégrée à GitHub. Définissez des flux de travail dans des fichiers YAML sous .github/workflows/, qui s’exécutent lors d’un envoi, d’une demande de fusion ou selon des événements planifiés.
Flux de travail CI de base
Un flux de travail minimal qui installe les dépendances, effectue l’analyse statique et exécute les tests à chaque envoi et demande de fusion.
# .github/workflows/ci.yml
name: CI
on:
push:
branches: [main]
pull_request:
branches: [main]
jobs:
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 lint
- run: npm test -- --coverageMise en cache de node_modules
Mettez en cache ~/.npm (le cache de npm, et non node_modules) afin d’accélérer l’installation des dépendances. actions/setup-node s’en charge avec l’option de mise en cache cache.
- uses: actions/setup-node@v4
with:
node-version: 20
cache: 'npm' # caches ~/.npm based on package-lock.json hashÉtape de construction
Ajoutez une étape de construction après les tests pour vérifier que le projet se compile sans erreurs.
- name: Build
run: npm run build
# For Next.js — catch TypeScript errors:
- name: Type Check
run: npx tsc --noEmitDéploiement vers Vercel lors d’une fusion
Déployez vers Vercel lors des envois vers main à l’aide de la CLI Vercel dans le flux de travail.
- name: Deploy to Vercel
env:
VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
run: |
npm install -g vercel
vercel pull --yes --environment=production --token=$VERCEL_TOKEN
vercel build --prod --token=$VERCEL_TOKEN
vercel deploy --prebuilt --prod --token=$VERCEL_TOKENDéploiement vers S3 lors d’une fusion
Synchronisez la sortie de construction vers S3 et invalidez CloudFront après une construction réussie sur main.
- name: Deploy to S3
if: github.ref == 'refs/heads/main'
env:
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
run: |
aws s3 sync dist/ s3://my-bucket/ --delete
aws cloudfront create-invalidation --distribution-id ${{ secrets.CF_ID }} --paths "/*"Tests E2E Playwright dans CI
Exécutez les tests E2E Playwright dans CI après la construction. Installez les binaires des navigateurs avec une étape dédiée.
- name: Install Playwright Browsers
run: npx playwright install --with-deps chromium
- name: Run E2E Tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: failure()
with:
name: playwright-report
path: playwright-report/Tâches matricielles parallèles
Utilisez une stratégie matricielle pour exécuter les tests en parallèle avec plusieurs versions de Node.js ou environnements.
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [18, 20, 22]
steps:
- uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}Gestion des secrets
Stockez les valeurs sensibles (clés d’API, jetons de déploiement) comme secrets GitHub (dépôt → Paramètres → Secrets). Accédez-y dans les flux de travail comme ${{ secrets.MY_SECRET }}.
Étapes conditionnelles
Utilisez des conditions if: pour exécuter des étapes uniquement sur des branches spécifiques, lors d’événements de demandes de fusion ou après la réussite d’étapes précédentes.
- name: Deploy
if: github.ref == 'refs/heads/main' && github.event_name == 'push'
run: npm run deployBadges d’état
Ajoutez un badge d’état de la construction à votre README pour afficher l’état de l’intégration continue en un coup d’œil.
<!-- README.md -->
Vérification rapide
Quelle fonctionnalité de GitHub Actions exécute simultanément la même tâche avec plusieurs configurations (par exemple, différentes versions de Node.js) ?
Récapitulatif
Définissez des flux de travail CI dans des fichiers YAML sous .github/workflows/. Utilisez actions/setup-node avec cache: 'npm' pour accélérer les installations. Ajoutez des étapes d’analyse statique, de vérification des types, de tests et de construction. Déployez conditionnellement lors des envois vers la branche main. Stockez les secrets dans GitHub Secrets et utilisez des constructions matricielles pour tester plusieurs versions.
Questions Fréquemment Posées
La leçon « CI/CD GitHub Actions pour React » est-elle gratuite ?
Oui — le texte complet de « CI/CD GitHub Actions pour React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « CI/CD GitHub Actions pour React » ?
Automatisez les étapes d’analyse statique, de test, de compilation et de déploiement dans un flux de travail GitHub Actions à chaque envoi. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « CI/CD GitHub Actions pour React » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Déployer sur Vercel : configuration nulle et URL de prévisualisation
- Héberger une SPA React sur AWS S3 et CloudFront
- Conteneuriser une application React/Next.js
- CI/CD GitHub Actions pour React