PricingLoginStart free
React Academy · leksjon

GitHub Actions CI/CD for React

Automatiser linting-, test-, bygge- og utrullingstrinn i en GitHub Actions-arbeidsflyt ved hver push.

Leksjon 4 av 413 trinn

GitHub Actions CI/CD for React er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva er GitHub Actions?

GitHub Actions er en CI/CD-plattform som er innebygd i GitHub. Definer arbeidsflyter i YAML-filer under .github/workflows/ som kjøres ved push, pull request eller planlagte hendelser.

Grunnleggende CI-arbeidsflyt

En minimal arbeidsflyt som installerer avhengigheter, kjører linting og kjører tester ved hver push og 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

Bufring av node_modules

Bufre ~/.npm (npm-cachen, ikke node_modules) for å gjøre installasjon av avhengigheter raskere. actions/setup-node håndterer dette med alternativet cache.

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

Byggetrinn

Legg til et byggetrinn etter testene for å kontrollere at prosjektet kompileres uten feil.

- name: Build
  run: npm run build

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

Distribusjon til Vercel ved sammenslåing

Distribuer til Vercel ved push til main ved å bruke Vercel CLI i arbeidsflyten.

- 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

Distribusjon til S3 ved sammenslåing

Synkroniser byggresultatet til S3 og invalider CloudFront etter en vellykket bygging på 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 "/*"

Playwright E2E i CI

Kjør Playwright E2E-tester i CI etter byggingen. Installer nettleserbinærfiler med et eget trinn.

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

Parallelle matrisejobber

Bruk en matrisestrategi til å kjøre tester parallelt på tvers av flere Node.js-versjoner eller miljøer.

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

Håndtering av hemmeligheter

Lagre sensitive verdier (API-nøkler, distribusjonstokener) som GitHub Secrets (repo → Settings → Secrets). Få tilgang til dem i arbeidsflyter som ${{ secrets.MY_SECRET }}.

Betingede trinn

Bruk if:-betingelser til å kjøre trinn bare på bestemte grener, ved bestemte PR-hendelser eller etter at tidligere trinn er fullført.

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

Statusmerker

Legg til et merke for byggestatus i README-filen for å vise CI-status med et øyekast.

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

Rask kontroll

Hvilken GitHub Actions-funksjon kjører den samme jobben på tvers av flere konfigurasjoner (for eksempel ulike Node.js-versjoner) samtidig?

Besvar den i den interaktive leksjonen

Oppsummering

Definer CI-arbeidsflyter i YAML under .github/workflows/. Bruk actions/setup-node med cache: 'npm' for raske installasjoner. Legg til trinn for linting, typesjekking, testing og bygging. Distribuer betinget ved push til main-grenen. Lagre hemmeligheter i GitHub Secrets, og bruk matrisebygg for testing på flere versjoner.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs
88
Leksjoner
324
Start læringen gratisSe hele kurset

Ofte stilte spørsmål

Er leksjonen «GitHub Actions CI/CD for React» gratis?

Ja – hele teksten i «GitHub Actions CI/CD for React» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «GitHub Actions CI/CD for React»?

Automatiser linting-, test-, bygge- og utrullingstrinn i en GitHub Actions-arbeidsflyt ved hver push. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «GitHub Actions CI/CD for React»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

  1. Rulle ut til Vercel: null konfigurasjon og forhåndsvisnings-URL-er
  2. Drifte en React-SPA på AWS S3 og CloudFront
  3. Dockerisere en React/Next.js-app
  4. GitHub Actions CI/CD for React
← Tilbake til React Academy