Frontend Academy · Lektion

GitHub Actions til frontend: lint, test og build

Skriv en workflow-YAML, der installerer afhængigheder, kører ESLint, udfører Jest-tests og bygger appen ved hver pull request.

Lektion 1 af 414 trin

GitHub Actions til frontend: lint, test og build er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvorfor CI til frontend?

Continuous Integration kører dine tests, lintkontroller og byggeproces ved hvert push og hver pull request. Det fanger regressioner, før de når main. Det er et krav for alle teams med mere end én udvikler.

Grundlæggende om GitHub Actions

Arbejdsgange er YAML-filer i .github/workflows/. Hver arbejdsgang har job, der kører ved udløsere (push, pull_request, schedule).

# .github/workflows/ci.yml
name: CI
on:
  push:
    branches: [main]
  pull_request:
concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20' }
      - run: npm ci
      - run: npm test

Caching af afhængigheder

Gem node_modules (eller pnpm-/yarn-caches) for at undgå at installere alt igen ved hver kørsel. setup-node har indbygget understøttelse af cache.

- uses: actions/setup-node@v4
  with:
    node-version: '20'
    cache: 'npm'   # or 'yarn' or 'pnpm'

Lint-job

Kør ESLint- og Prettier-kontroller. Lad byggeprocessen fejle ved fejl.

lint:
  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 run format:check

Testjob

Kør Vitest eller Jest. Generér dækningsrapporter, så resultaterne er synlige.

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 test -- --coverage
    - uses: codecov/codecov-action@v4
      with:
        files: ./coverage/lcov.info

Buildjob

Byg produktionspakken. Upload den som en artefakt til efterfølgende implementeringsjob.

build:
  runs-on: ubuntu-latest
  needs: [lint, test]
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npm run build
    - uses: actions/upload-artifact@v4
      with:
        name: dist
        path: dist/
        retention-days: 7

Parallelle job

Lint, test og typekontrol kan køre parallelt — Actions kører hvert job i sit eget kørselsmiljø. Brug needs: til at håndhæve rækkefølgen (byg efter lint/test).

Typekontrol

Tilføj et dedikeret typekontroljob: tsc --noEmit. Det fanger TypeScript-fejl før kørsel.

typecheck:
  runs-on: ubuntu-latest
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: '20', cache: 'npm' }
    - run: npm ci
    - run: npx tsc --noEmit

Test med matrix

Kør testjobbet mod flere Node-versioner eller operativsystemer parallelt.

test:
  strategy:
    fail-fast: false
    matrix:
      node: [18, 20, 22]
      os: [ubuntu-latest, windows-latest, macos-latest]
  runs-on: ${{ matrix.os }}
  steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with: { node-version: ${{ matrix.node }} }
    - run: npm ci && npm test

Betingede trin

Brug if: til kun at køre trin under bestemte betingelser — f.eks. kun på main-branchen.

- name: Deploy to staging
  if: github.ref == 'refs/heads/main'
  run: npm run deploy:staging

Hemmeligheder og variabler

Gem API-nøgler og adgangstokens i repositoryets hemmeligheder (Indstillinger → Hemmeligheder). Få adgang via secrets.NAME. Commit aldrig hemmeligheder til repositoryet.

- run: npm run deploy
  env:
    DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }}
    AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}

Regler for grenbeskyttelse

Gå til Indstillinger → Grene, og kræv, at CI-arbejdsgangen gennemføres, før en fletning til main tillades. Sammen med obligatoriske kodegennemgange er dette den almindelige beskyttelse for teams.

Hurtigt tjek

Hvad er formålet med cancel-in-progress: true i samtidighedsblokken i en GitHub Actions-arbejdsgang?

Besvar den i den interaktive lektion

Opsummering: GitHub Actions til frontend

YAML til arbejdsgange i .github/workflows/. Jobs kører ved push/PR. Cachel node_modules via setup-node. Standardjobs: lint, typecheck, test, build. Kør parallelt med needs for at styre rækkefølgen. Brug matrix til test med flere versioner. Hemmeligheder via repositoryindstillingerne. Grenbeskyttelse kræver, at CI er fejlfri før en fletning. cancel-in-progress fjerner dublerede kørsler.

Gratis at komme i gang

Lær HTML med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 41
Lektioner: 163

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “GitHub Actions til frontend: lint, test og build” gratis?

Ja — hele teksten til “GitHub Actions til frontend: lint, test og build” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Frontend Academy-kurset, skal du opgradere til CoddyKit PRO. Frontend Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “GitHub Actions til frontend: lint, test og build”?

Skriv en workflow-YAML, der installerer afhængigheder, kører ESLint, udfører Jest-tests og bygger appen ved hver pull request. Du øver dig i Frontend Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Frontend Academy?

Der kræves ingen tidligere erfaring. Frontend Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “GitHub Actions til frontend: lint, test og build”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Frontend Academy-lektion?

Ja. Alle Frontend Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

GitHub Actions til frontend: lint, test og build
Deployment til Vercel, Netlify og Cloudflare Pages
Miljøvariabler i CI
Automatiserede Lighthouse-tjek

← Tilbage til Frontend Academy