Frontend Academy · Lekcja

GitHub Actions dla frontendu: lint, test i build

Napisze Pan/Pani workflow YAML, który zainstaluje zależności, uruchomi ESLint i testy Jest oraz zbuduje aplikację przy każdym pull requeście.

GitHub Actions dla frontendu: lint, test i build to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Dlaczego frontend potrzebuje CI?

Integracja ciągła uruchamia testy, lintery i kompilację przy każdym wypchnięciu zmian oraz żądaniu pull request. Wykrywa regresje, zanim trafią do gałęzi main. Jest wymagana w każdym zespole liczącym więcej niż jednego programistę.

Podstawy GitHub Actions

Workflowy są plikami YAML w katalogu .github/workflows/. Każdy workflow zawiera zadania uruchamiane przez wyzwalacze (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

Buforowanie zależności

Należy buforować node_modules (lub bufory pnpm/yarn), aby uniknąć ponownej instalacji przy każdym uruchomieniu. setup-node ma wbudowaną obsługę buforowania.

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

Zadanie lintowania

Należy uruchamiać kontrole ESLint i Prettier. W przypadku błędów kompilacja powinna zakończyć się niepowodzeniem.

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

Zadanie testów

Należy uruchamiać Vitest lub Jest. Dla lepszej widoczności należy generować raporty pokrycia kodu.

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

Zadanie kompilacji

Należy zbudować paczkę produkcyjną. Należy przesłać ją jako artefakt, aby mogły z niej korzystać kolejne zadania wdrożeniowe.

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

Zadania równoległe

Lintowanie, testy i sprawdzanie typów mogą być uruchamiane równolegle — Actions uruchamia każde zadanie na osobnym runnerze. Należy użyć needs:, aby wymusić kolejność (kompilacja po lintowaniu i testach).

Sprawdzanie typów

Należy dodać osobne zadanie sprawdzania typów: tsc --noEmit. Wykrywa ono błędy TypeScript przed uruchomieniem programu.

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

Testowanie macierzowe

Zadanie testów należy uruchamiać równolegle dla wielu wersji Node lub systemów operacyjnych.

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

Kroki warunkowe

Należy użyć if:, aby uruchamiać kroki tylko pod określonymi warunkami — na przykład wyłącznie w gałęzi main.

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

Sekrety i zmienne

Klucze API i tokeny należy przechowywać w sekretach repozytorium (Ustawienia → Sekrety). Dostęp do nich uzyskuje się przez secrets.NAME. Nigdy nie należy zatwierdzać sekretów w repozytorium.

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

Reguły ochrony gałęzi

W sekcji Ustawienia → Gałęzie należy wymagać pomyślnego przejścia workflow CI przed zezwoleniem na scalanie z gałęzią main. W połączeniu z wymaganymi przeglądami kodu jest to standardowe zabezpieczenie zespołu.

Szybkie sprawdzenie

Jaki jest cel ustawienia cancel-in-progress: true w bloku concurrency workflow GitHub Actions?

Podsumowanie: GitHub Actions dla frontendu

Pliki YAML workflow znajdują się w .github/workflows/. Zadania są uruchamiane po pushu lub utworzeniu PR. Zależności node_modules są buforowane za pomocą setup-node. Standardowe zadania to: lint, typecheck, test i build. Zadania można uruchamiać równolegle, używając needs do ustalania kolejności. Matrix służy do testowania wielu wersji. Sekrety konfiguruje się w ustawieniach repozytorium. Ochrona gałęzi wymaga pomyślnego przejścia CI przed scaleniem. cancel-in-progress eliminuje zduplikowane uruchomienia.

Często zadawane pytania

Czy lekcja „GitHub Actions dla frontendu: lint, test i build” jest bezpłatna?

Tak — pełny tekst „GitHub Actions dla frontendu: lint, test i build” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „GitHub Actions dla frontendu: lint, test i build”?

Napisze Pan/Pani workflow YAML, który zainstaluje zależności, uruchomi ESLint i testy Jest oraz zbuduje aplikację przy każdym pull requeście. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „GitHub Actions dla frontendu: lint, test i build”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

GitHub Actions dla frontendu: lint, test i build
Wdrażanie na Vercel, Netlify i Cloudflare Pages
Zmienne środowiskowe w CI
Automatyczne kontrole Lighthouse

← Powrót do Frontend Academy