0Pricing
Frontend Academy · Ders

Ön Uç için GitHub Actions: Lint, Test ve Derleme

Bağımlılıkları kuran, ESLint çalıştıran, Jest testlerini yürüten ve her PR'da uygulamayı derleyen bir YAML iş akışı yazmayı öğrenin.

Ön Uç için GitHub Actions: Lint, Test ve Derleme, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Ön Uç için Neden CI

Sürekli Entegrasyon, her gönderme ve birleştirme isteğinde sınamalarınızı, kod denetleyicilerinizi ve derlemenizi çalıştırır. Gerilemeleri ana dala ulaşmadan yakalar. Birden fazla geliştiricisi olan her ekip için gereklidir.

GitHub Actions Temelleri

İş akışları .github/workflows/ dizinindeki YAML dosyalarıdır. Her iş akışında tetikleyicilerle (push, pull_request, schedule) çalışan işler bulunur.

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

Bağımlılıkları Önbelleğe Alma

Her çalıştırmada yeniden kurulum yapmamak için node_modules (veya pnpm/yarn önbelleklerini) önbelleğe alın. setup-node yerleşik önbellek desteğine sahiptir.

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

Kod Denetimi İşi

ESLint ve Prettier denetimlerini çalıştırın. Hatalarda derlemeyi başarısız yapın.

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

Sınama İşi

Vitest veya Jest'i çalıştırın. Görünürlük sağlamak için kapsam raporları oluşturun.

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

Derleme İşi

Üretim paketini derleyin. Sonraki dağıtım işlerinin kullanabilmesi için bir yapıt olarak yükleyin.

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

Paralel İşler

Kod denetimi, sınama ve tür denetimi paralel çalışabilir — Actions her işi kendi çalıştırıcısında yürütür. Sıralamayı zorunlu kılmak için needs: kullanın (derleme, kod denetimi/sınamadan sonra çalışsın).

Tür Denetimi

Özel bir tür denetimi işi ekleyin: tsc --noEmit. TypeScript hatalarını çalışma zamanından önce yakalar.

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

Matris Sınaması

Sınama işini birden fazla Node sürümünde veya işletim sisteminde paralel olarak çalıştırın.

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

Koşullu Adımlar

Adımları yalnızca belirli koşullar altında çalıştırmak için if: kullanın — örneğin yalnızca ana dalda.

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

Gizli Bilgiler ve Değişkenler

API anahtarlarını ve belirteçleri depo gizli bilgilerinde (Ayarlar → Gizli Bilgiler) saklayın. Bunlara secrets.NAME üzerinden erişin. Gizli bilgileri deponuza asla kaydetmeyin.

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

Dal Koruma Kuralları

Ayarlar → Dallar bölümünde, main dalına birleştirmeye izin vermeden önce CI iş akışının başarıyla tamamlanmasını zorunlu tutun. Gerekli incelemelerle birlikte bu, standart ekip güvenlik önlemidir.

Hızlı Kontrol

Bir GitHub Actions iş akışının eşzamanlılık bloğundaki cancel-in-progress: true ifadesinin amacı nedir?

Özet: Frontend için GitHub Actions

İş akışı YAML dosyaları .github/workflows/ konumundadır. İşler push/PR ile çalışır. setup-node aracılığıyla node_modules önbelleğe alınır. Standart işler: kod stili denetimi, tür denetimi, sınama, derleme. Sıralamayı belirlemek için needs ile paralel çalıştırın. Birden çok sürümü sınamak için matris kullanın. Gizli bilgiler depo ayarları üzerinden yönetilir. Dal koruması, birleştirmeden önce CI'ın başarılı olmasını zorunlu tutar. Çalışmaları tekrarlamamak için cancel-in-progress kullanılır.

Sıkça Sorulan Sorular

“Ön Uç için GitHub Actions: Lint, Test ve Derleme” dersi ücretsiz mi?

Evet — “Ön Uç için GitHub Actions: Lint, Test ve Derleme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“Ön Uç için GitHub Actions: Lint, Test ve Derleme” dersinde ne öğreneceğim?

Bağımlılıkları kuran, ESLint çalıştıran, Jest testlerini yürüten ve her PR'da uygulamayı derleyen bir YAML iş akışı yazmayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Ön Uç için GitHub Actions: Lint, Test ve Derleme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Ön Uç için GitHub Actions: Lint, Test ve Derleme
  2. Vercel, Netlify ve Cloudflare Pages'e Dağıtım
  3. CI'da Ortam Değişkenleri
  4. Otomatik Lighthouse Denetimleri
← Frontend Academy Sayfasına Dön