Memulai Otomasi Nuxt.js dengan GitHub Actions

Untuk menjaga kualitas rilis Nuxt.js, otomatisasi linting, unit test, dan preview deploy harus terjadi setiap commit ke pull request. Workflow GitHub Actions bisa memastikan lint dan test berjalan sebelum kode ditinjau, dan versi staging cepat tersedia tanpa intervensi manual.

Artikel ini menunjukkan cara menyusun pipeline CI/CD: linting ESLint/StyleLint, unit test, build image, deploy preview ringan, caching dependency, serta strategi branch protection dan respon cepat untuk tim frontend.

Prasyarat Repository Nuxt.js

Pastikan package.json sudah memiliki skrip terpisah untuk lint ESLint dan StyleLint, unit test, build, serta preview. Contohnya:

{
  "scripts": {
    "lint:eslint": "eslint .",
    "lint:style": "stylelint \"assets/**/*.css\"",
    "test:unit": "vitest run",
    "build": "nuxt build",
    "preview": "nuxt preview"
  }
}

Stabilkan konfigurasi ESLint, StyleLint, dan Vitest agar hasil lint/test deterministik. Gunakan plugin Nuxt dan aturan berbasis standar tim.

Struktur Workflow GitHub Actions

Workflow utama akan berjalan di event pull_request dan push ke branch utama. Fokus pada lint, test, build image, lalu deploy preview. Berikut contoh konfigurasi:

name: Nuxt.js CI
on:
  pull_request:
    branches: ["main"]
  push:
    branches: ["main"]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Cache dependencies
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            node_modules
          key: npm-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
      - name: Install deps
        run: npm ci
      - name: ESLint
        run: npm run lint:eslint
      - name: StyleLint
        run: npm run lint:style
  test:
    needs: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Restore cache
        uses: actions/cache@v4
        with:
          path: |
            ~/.npm
            node_modules
          key: npm-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
      - name: Install deps
        run: npm ci
      - name: Unit tests
        run: npm run test:unit
  build_image:
    needs: test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install deps
        run: npm ci
      - name: Build Nuxt
        run: npm run build
      - name: Build Docker image
        run: |
          docker build -t ghcr.io/${{ github.repository }}/preview:${{ github.sha }} .
      - name: Login GHCR
        uses: docker/login-action@v2
        with:
          registry: ghcr.io
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Push image
        run: docker push ghcr.io/${{ github.repository }}/preview:${{ github.sha }}
  preview_staging:
    needs: build_image
    runs-on: ubuntu-latest
    steps:
      - name: Notify staging deploy
        run: echo "Deploy preview image to staging via render.com webhook"

Lingkup deploy di atas cukup ringan karena cukup membangun image dan mendorongnya ke registry. Lalu, auto-trigger endpoint staging (Render, Fly, atau Kap) menggunakan URL taktis agar tim QA bisa mengakses versi commit PR.

Caching Dependency untuk Kecepatan Balik

Menggunakan actions/cache di lint dan test meminimalkan waktu setup node_modules. Pastikan key mencakup package-lock.json supaya cache invalidasi saat dependency berubah.

Cache hanya berlaku saat struktur dependensi stabil; bila sering berubah, pertimbangkan memisah cache untuk ~/.npm dan node_modules agar lint tidak menunggu instalasi penuh.

Strategi Preview Staging Ringan

Daripada menghosting server lengkap, gunakan service preview ringan yang membaca image terbaru. Workflow cukup mendorong image dengan tag ber-commit. Setelah itu, trigger endpoint staging (contoh: Render Web Service Deploy) menyediakan URL preview.

Tambahkan komentar otomatis ke PR berisi nama image dan URL preview jika tersedia. Ini membantu reviewer mendapat feedback visual dengan cepat.

Branch Protection dan Feedback Cepat

Untuk memastikan status lint/test tidak dilewati, aktifkan branch protection di GitHub:

  • Aktifkan rule untuk branch utama (main).
  • Tandai requirement status checks: lint, test, build_image, preview_staging.
  • Wajibkan PR review, sertakan changelog singkat.
  • Gunakan require linear history agar rebase lebih mudah.

Dengan aturan ini, PR tidak bisa di-merge sampai workflow berhasil. Otomasi seperti ini meningkatkan kualitas rilis karena kesalahan lint dan test tertangkap sejak awal.

Mempercepat Feedback Pipeline

Untuk membuat pipeline cepat tanggap saat commit PR:

  1. Jalankan lint dan test secara paralel di job terpisah agar total waktu lebih kecil.
  2. Gunakan caching agar job hanya menginstal dependensi sekali per run.
  3. Gunakan paths-ignore jika commit hanya memperbarui dokumen.
  4. Pakai concurrency dengan group: ${{ github.workflow }}-${{ github.ref }} agar job lama dibatalkan saat commit baru masuk.

Pengaturan ini menjaga CI selalu relevan untuk commit terbaru tanpa menunggu job usang selesai.

Kesimpulan

Workflow lint, test, build image, dan preview staging yang dibangun di GitHub Actions memberikan feedback cepat kepada tim frontend. Cache dependency, branch protection, dan preview staging menjadikan pipeline otomatis tidak hanya memastikan kualitas tapi juga mengurangi waktu yang diperlukan untuk validasi PR.

Dengan logging yang jelas, job terpisah, serta preview image yang bisa diakses reviewer, tim dapat mendeteksi isu fungsi dan UI sebelum kode masuk ke branch utama.