Pengenalan

Pipeline CI/CD Nuxt.js harus menjamin kode selalu terlinting, dibangun secara terisolasi, dan bisa langsung dipreview tanpa menunggu deploy penuh. Pada paragraf awal ini, tujuan utama tercapai dengan menyusun linting otomatis sebagai gate pertama, diikuti oleh proses build yang cache-aware, lalu preview deploy yang diaktifkan untuk setiap pull request. Artikel ini menjelaskan bagaimana tim Nuxt.js mendesain pipeline tersebut agar responsif, mudah dipantau, dan terbuka untuk feedback cepat.

Ringkasan Arsitektur Pipeline Nuxt.js

Pipeline ini menggabungkan empat job utama: lint, test (opsional jika ada unit/integrasi), build, dan preview. Urutannya menghasilkan aliran kerja sebagai berikut:

  1. Lint job mendeteksi style dan aturan kodifikasi sebelum pekerjaan lain aktif.
  2. Test job dijalankan jika lint sukses (bisa diabaikan jika proyek hanya mengandalkan linting).
  3. Build job memproduksi artefak statis Nuxt yang di-cache untuk menghindari pemasangan ulang dependency.
  4. Preview job mengdeploy artefak build ke environment sementara agar reviewer dapat menilai UI/UX.

Setiap job berjalan di runner terpisah agar proses terisolasi dan lebih mudah didiagnosis.

Penerapan GitHub Actions untuk Pipeline ini

Trigger utama adalah pull request dan push ke cabang utama. Hal ini memastikan linting dipicu pada review awal, sedangkan preview hanya diaktifkan saat ada PR terhadap cabang utama. Berikut contoh konfigurasi praktis:

name: Nuxt CI/CD Pipeline

on:
  pull_request:
    types: [opened, synchronize, reopened]
  push:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Run lint
        run: npm run lint
        continue-on-error: true
      - name: Annotate lint issues
        if: ${{ failure() }}
        run: npx lint-staged --config .lintstagedrc --reporter=github

  build:
    needs: lint
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Restore Nuxt cache
        uses: actions/cache@v3
        with:
          path: |
            node_modules
            .nuxt
            .output
          key: ${{ runner.os }}-nuxt-${{ hashFiles('package-lock.json') }}
      - name: Install dependencies
        run: npm ci
      - name: Build Nuxt
        run: npm run build
      - name: Upload build folder
        uses: actions/upload-artifact@v3
        with:
          name: nuxt-build
          path: .output

  preview:
    needs: build
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Download build artifact
        uses: actions/download-artifact@v3
        with:
          name: nuxt-build
          path: .output
      - name: Deploy ke preview
        run: |
          # skrip deploy ke staging ringan (misal Vercel CLI, Netlify, atau self-hosted server)
          echo "Deploy preview"

Penjelasan tambahan:

  • continue-on-error: true di job lint berarti pipeline tetap berjalan untuk menghasilkan preview walau lint gagal, namun lint job tetap menandai status failed pada GitHub Check. Ini memungkinkan reviewer melihat preview sambil mengetahui lint belum bersih.
  • Perintah tambahan npx lint-staged atau alat serupa dapat membuat komentar inline agar developer langsung tahu bagian mana yang bermasalah tanpa memblokir preview.
  • Cache mengkombinasikan node_modules, .nuxt, dan .output agar build dapat dibangun ulang tanpa mengunduh ulang dependency secara penuh setiap kali.

Optimasi Cache dan Dependensi

Cache merekam:

  • node_modules agar instalasi npm cepat pada job lint dan build.
  • .nuxt untuk modul internal Nuxt yang dibangun ulang.
  • .output yang berisi artefak build akhir.

Gunakan key berbasis package-lock.json agar cache invalid saat dependency berubah. Jika pipeline berjalan lambat, cek log actions/cache untuk memastikan cache hit ratio tinggi. Pastikan juga job lint dan build memiliki npm ci sebelum lint/test untuk menjaga reproducibility.

Cara Menangani Lint Fail Tanpa Menghambat Review

Lint fail masih diperlakukan sebagai warning yang memiliki tanggal: job lint menyelesaikan dengan status failed, tapi tidak menghentikan stage build/preview karena lint job tidak dibutuhkan agar preview berjalan. Hal ini dicapai melalui:

  1. Menandai lint job sebagai continue-on-error: true.
  2. Menggunakan if: failure() untuk menjalankan langkah yang menambahkan komentar atau anotasi otomatis.
  3. Membuat policy tim: reviewer harus melihat lint fail sebagai pengingat, tapi tetap dapat melihat preview agar evaluasi UI tetap berjalan.

Jika lint sudah harus dilewati (misalnya untuk commit sementara), buat branch policy internal yang mengharuskan lint bersih sebelum merge ke main, tapi jangan blok preview pada PR.

Monitoring dan Developer Experience Ringan

Agar pipeline tetap responsif, terapkan monitoring sederhana:

  • Gunakan summary status di pull request (GitHub Check API) untuk menampilkan durasi lint dan build.
  • Pasang notifikasi ringan ke Slack atau Microsoft Teams hanya saat preview gagal atau build job timeout.
  • Berikan badge status pada README untuk menunjukkan pipeline saat ini, sehingga tim sadar kapan lint gagal tanpa membuka panel CI.

Jaga durasi job lint & build di bawah 3 menit dengan cache yang sehat. Bila pipeline mulai lambat, telusuri job mana yang memperlambat dan tambahkan caching atau split job. Hindari menggabungkan lint & build dalam satu job agar error lebih mudah diidentifikasi.

Kesimpulan

Pipeline CI/CD Nuxt.js yang baik menggabungkan linting otomatis, build terisolasi dengan cache, dan preview deploy yang mudah diakses reviewer. Dengan job lint yang memperingatkan tanpa memblokir preview, tim tetap bisa mengevaluasi UI sementara lint errors diperbaiki. Terapkan konfigurasi GitHub Actions di atas sebagai pijakan, lalu sesuaikan detail seperti deployment preview dan alat monitoring ringan agar pipeline tetap cepat dan transparan.