0Pricing
React Academy · Lezione

CI/CD di React con GitHub Actions

Automatizzi i passaggi di lint, test, build e deploy in un workflow di GitHub Actions a ogni push.

CI/CD di React con GitHub Actions è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Che cos'è GitHub Actions?

GitHub Actions è una piattaforma CI/CD integrata in GitHub. Definire i workflow in file YAML nella directory .github/workflows/, eseguiti in risposta a eventi di push, pull request o pianificati.

Workflow CI di base

Un workflow minimo che installa le dipendenze, esegue il linting e i test a ogni push e pull request.

# .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 -- --coverage

Memorizzazione nella cache di node_modules

Memorizzare nella cache ~/.npm (la cache di npm, non node_modules) per velocizzare l'installazione delle dipendenze. actions/setup-node gestisce questa operazione con l'opzione cache.

- uses: actions/setup-node@v4
  with:
    node-version: 20
    cache: 'npm' # caches ~/.npm based on package-lock.json hash

Fase di build

Aggiungere una fase di build dopo i test per verificare che il progetto venga compilato senza errori.

- name: Build
  run: npm run build

# For Next.js — catch TypeScript errors:
- name: Type Check
  run: npx tsc --noEmit

Deploy su Vercel al merge

Eseguire il deploy su Vercel per i push su main utilizzando la CLI di Vercel nel workflow.

- 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_TOKEN

Deploy su S3 al merge

Sincronizzare l'output della build con S3 e invalidare CloudFront dopo una build completata correttamente su 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 "/*"

Test E2E con Playwright in CI

Eseguire i test E2E di Playwright in CI dopo la build. Installare i binari dei browser con una fase dedicata.

- 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/

Job paralleli con matrice

Utilizzare una strategia a matrice per eseguire i test in parallelo su più versioni di Node.js o in ambienti diversi.

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 }}

Gestione dei segreti

Memorizzare i valori sensibili (chiavi API, token di deploy) come GitHub Secrets (repository → Settings → Secrets). Accedervi nei workflow tramite ${{ secrets.MY_SECRET }}.

Fasi condizionali

Utilizzare condizioni if: per eseguire le fasi solo su determinati branch, in risposta a eventi delle PR o dopo il completamento corretto delle fasi precedenti.

- name: Deploy
  if: github.ref == 'refs/heads/main' && github.event_name == 'push'
  run: npm run deploy

Badge di stato

Aggiungere un badge dello stato della build al README per mostrare immediatamente lo stato della CI.

<!-- README.md -->
![CI](https://github.com/myorg/myrepo/actions/workflows/ci.yml/badge.svg)

Verifica rapida

Quale funzionalità di GitHub Actions esegue simultaneamente lo stesso job su più configurazioni (ad esempio, diverse versioni di Node.js)?

Riepilogo

Definire i workflow CI in YAML nella directory .github/workflows/. Utilizzare actions/setup-node con cache: 'npm' per installazioni rapide. Aggiungere fasi di lint, controllo dei tipi, test e build. Eseguire il deploy in modo condizionale per i push sul branch main. Memorizzare i segreti in GitHub Secrets e utilizzare build a matrice per testare più versioni.

Domande Frequenti

La lezione «CI/CD di React con GitHub Actions» è gratuita?

Sì — il testo completo di «CI/CD di React con GitHub Actions» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «CI/CD di React con GitHub Actions»?

Automatizzi i passaggi di lint, test, build e deploy in un workflow di GitHub Actions a ogni push. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «CI/CD di React con GitHub Actions»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Deployment su Vercel: zero configurazione e URL di anteprima
  2. Hosting di una SPA React su AWS S3 e CloudFront
  3. Dockerizzazione di un'app React/Next.js
  4. CI/CD di React con GitHub Actions
← Torna a React Academy