Frontend Academy · Pelajaran

GitHub Actions untuk Frontend: lint test build

Tulis YAML alur kerja yang memasang dependensi, menjalankan ESLint, mengeksekusi test Jest, dan membangun aplikasi pada setiap pull request.

Pelajaran 1 dari 414 langkah

GitHub Actions untuk Frontend: lint test build adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa CI untuk Frontend?

Integrasi Berkelanjutan menjalankan pengujian, pemeriksaan lint, dan kompilasi Anda pada setiap pengunggahan perubahan dan permintaan penggabungan. Ini menemukan regresi sebelum mencapai cabang utama. Hal ini wajib bagi tim yang memiliki lebih dari satu pengembang.

Dasar-Dasar GitHub Actions

Alur kerja adalah berkas YAML di .github/workflows/. Setiap alur kerja memiliki tugas yang berjalan berdasarkan pemicu (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

Menyimpan Dependensi dalam Tembolok

Simpan node_modules (atau tembolok pnpm/yarn) untuk menghindari pemasangan ulang pada setiap proses. setup-node memiliki dukungan tembolok bawaan.

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

Tugas Pemeriksaan Kode

Jalankan pemeriksaan ESLint dan Prettier. Gagalkan kompilasi jika terdapat kesalahan.

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

Tugas Pengujian

Jalankan Vitest atau Jest. Tampilkan laporan cakupan agar hasilnya dapat dipantau.

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

Tugas Kompilasi

Kompilasikan bundel produksi. Unggah sebagai artefak untuk tugas penerapan lanjutan.

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

Tugas Paralel

Pemeriksaan kode, pengujian, dan pemeriksaan tipe dapat berjalan secara paralel—Actions menjalankan setiap tugas pada mesin pelaksananya sendiri. Gunakan needs: untuk menerapkan urutan (kompilasi setelah pemeriksaan kode/pengujian).

Pemeriksaan Tipe

Tambahkan tugas pemeriksaan tipe khusus: tsc --noEmit. Ini menemukan kesalahan TypeScript sebelum waktu proses.

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

Pengujian Matriks

Jalankan tugas pengujian pada beberapa versi Node atau sistem operasi secara paralel.

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

Langkah Bersyarat

Gunakan if: untuk menjalankan langkah hanya dalam kondisi tertentu—misalnya, hanya pada cabang utama.

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

Rahasia dan Variabel

Simpan kunci API dan token dalam rahasia repositori (Pengaturan → Rahasia). Akses melalui secrets.NAME. Jangan pernah memasukkan rahasia ke dalam repositori.

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

Aturan Perlindungan Cabang

Di Pengaturan → Cabang, wajibkan alur kerja integrasi berkelanjutan berhasil sebelum mengizinkan penggabungan ke main. Jika digabungkan dengan tinjauan wajib, ini menjadi perlindungan standar bagi tim.

Pemeriksaan Singkat

Apa tujuan cancel-in-progress: true di blok konkurensi alur kerja GitHub Actions?

Jawab di pelajaran interaktif

Ringkasan: GitHub Actions untuk Frontend

YAML alur kerja berada di .github/workflows/. Pekerjaan dijalankan saat push/PR. Simpan node_modules dalam cache melalui setup-node. Pekerjaan standar: lint, pemeriksaan tipe, pengujian, dan pembangunan. Jalankan secara paralel dengan needs untuk mengatur urutan. Gunakan matrix untuk menguji beberapa versi. Simpan rahasia melalui pengaturan repositori. Perlindungan cabang mewajibkan CI berhasil sebelum penggabungan. Gunakan cancel-in-progress untuk menghindari proses yang sama berjalan berulang kali.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “GitHub Actions untuk Frontend: lint test build” gratis?

Ya — teks lengkap “GitHub Actions untuk Frontend: lint test build” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “GitHub Actions untuk Frontend: lint test build”?

Tulis YAML alur kerja yang memasang dependensi, menjalankan ESLint, mengeksekusi test Jest, dan membangun aplikasi pada setiap pull request. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “GitHub Actions untuk Frontend: lint test build” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

GitHub Actions untuk Frontend: lint test build
Deployment ke Vercel Netlify dan Cloudflare Pages
Variabel Lingkungan dalam CI
Pemeriksaan Lighthouse Otomatis

← Kembali ke Frontend Academy