Pipeline CI/CD Express.js idealnya menjawab tiga kebutuhan: memastikan kualitas kode melalui lint dan test, serta menyediakan preview environment yang bisa dievaluasi sebelum merge. Dalam dua paragraf ini, langsung jawab kebutuhan tersebut dengan menjelaskan bahwa lint dan test otomatis akan dijalankan saat push serta pr, sementara preview environment dibuat dengan tooling seperti ngrok atau Vercel agar tim bisa mengecek kembali fitur tanpa mengganggu produksi.

Papan jawaban dari judul ini adalah: bangun workflow GitHub Actions atau GitLab CI yang menyiapkan Node, caching dependensi, menjalankan lint/test, dan memicu preview environment dengan secrets aman. Artikel ini menguraikan struktur workspace dan langkah verifikasi pra-rilis sehingga setiap merge request memiliki data valid sebelum disetujui.

Desain pipeline lint, test, dan preview

Mekanisme penting untuk aplikasi Express.js adalah menjalankan linting, unit test, dan preview environment dalam satu flow agar potensi regresi dapat diketemukan lebih awal. Gunakan pendekatan multi-step:

  1. Dependensi terpercaya: gunakan cache untuk mempercepat install, dan pastikan package-lock atau yarn.lock selalu dikommit.
  2. Linting otomatis: jalankan ESLint terhadap seluruh kode backend untuk menangkap kesalahan gaya atau bug awal.
  3. Unit test: jalankan test suite (misalnya Jest atau Mocha) pada mode headless agar bisa dijalankan di runner stateless.
  4. Preview environment: buat instans Express yang dijalankan dengan environment variabel PR, lalu buka aksesnya lewat ngrok atau deploy ke Vercel Preview untuk QA/periksa pada pull request.

Pada setiap step, pastikan status dikembalikan dari tool tersebut, karena job CI harus gagal jika lint atau test gagal. Demikian pula, saat preview diaktifkan, sertakan perintah cleanup (misalnya menghentikan ngrok atau menghapus deployment sementara) agar tidak meninggalkan resource berjalan terus.

Struktur workspace dan caching dependensi

Susun workspace agar mudah dikenali runner CI:

  • root berisi file penting seperti package.json, package-lock.json, dan .eslintrc.json.
  • src/ untuk kode Express, dengan satu app.js yang mengekspor instance Express.
  • tests/ berisi unit test.
  • scripts/ optional, untuk helper seperti build atau preview.

Contoh struktur sederhana:

project-root/  # workspace CI/CD akan bekerja dari sini
├── package.json
├── package-lock.json
├── src/
│   └── app.js
├── tests/
│   └── app.test.js
└── scripts/
    └── preview-server.js

Cache dependensi penting untuk menghemat waktu. Dalam workflow GitHub Actions, gunakan actions/cache dengan kunci berdasarkan Node version dan lockfile. Setelah cache digunakan, npm install akan mengambil cache jika valid, mempercepat lint/test.

Konfigurasi GitHub Actions lengkap

Contoh workflow .github/workflows/ci.yml berikut menjalankan lint, test, dan preview. Workflow disetel untuk setiap push dan pull request pada main:

name: CI Express.js
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - name: Cache node modules
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: npm-cache-${{ runner.os }}-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            npm-cache-${{ runner.os }}-
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - name: Install dependencies
        run: npm install
      - name: Lint codebase
        run: npm run lint
      - name: Run unit tests
        run: npm test
      - name: Start preview server
        run: npm run preview &
      - name: Expose via ngrok (optional)
        if: github.event_name == 'pull_request'
        run: |
          npm install -g ngrok
          ngrok http 3000 --log=stdout >/tmp/ngrok.log &
          sleep 5
          cat /tmp/ngrok.log
      - name: Deploy preview to Vercel (optional)
        if: github.event_name == 'pull_request'
        env:
          VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
        run: npx vercel --prebuilt --confirm --token $VERCEL_TOKEN

Penjelasan:

  • actions/cache menyimpan folder ~/.npm untuk mempercepat instalasi.
  • Lint & test dijalankan setelah dependensi siap.
  • Preview bisa dilakukan dengan menjalankan server Express di background, lalu mengekspose URL sementara lewat ngrok agar reviewer bisa mengaksesnya.
  • Vercel hanya dijalankan saat pull request; token dan ID proyek disimpan di secrets. Ini membuat preview permanen lebih terpercaya daripada tunnel ngrok.

Pastikan npm run preview menjalankan instance Express pada port statis (misalnya 3000) untuk konsistensi.

Menjaga secrets dan verifikasi pra-rilis

Secrets seperti VERCEL_TOKEN atau DB_CONNECTION harus disimpan di GitHub Secrets (atau GitLab CI/CD Variables). Tidak pernah commit file .env. Dalam workflow, akses secrets hanya di bagian env: job step tertentu agar tidak terekspos di log.

Buat langkah verifikasi pra-rilis:

  • Lint dan test harus berhenti apabila ada kegagalan; jangan lanjut ke preview.
  • Gunakan milestone untuk QA: tambahkan status check di branch protection agar CI tidak boleh gagal saat review.
  • Gunakan artifact (misalnya laporan coverage) untuk memeriksa hasil test di PR.

Patching terakhir dilakukan setelah verifikasi preview diberi komentar URL ngrok atau deployment Vercel, sehingga reviewer bisa membandingkan dengan staging. Setelah merge, workflow dapat melanjutkan ke deployment lain dengan konfigurasi release berbeda.

Tips debugging dan trade-off

Jika lint atau test gagal tanpa log jelas, jalankan ulang job lokal dengan npm run lint / npm test. Di GitHub Actions, aktifkan step debug dengan env: ACTIONS_RUNNER_DEBUG: true. Untuk preview, ngrok mudah di-set up tetapi terbatas durasi dan tidak cocok untuk audit keamanan; gunakan Vercel Preview untuk simulasi lebih dekat ke produksi.

Cache mempercepat pipeline tapi bisa menyebabkan konflik jika dependencies berubah drastis; ketika mengalami kesalahan npm install, hapus cache untuk memaksa unduhan ulang.

Dengan struktur workspace yang konsisten, caching yang efektif, dan preview environment yang bisa diverifikasi, pipeline CI/CD Express.js Anda akan memberikan confidence tinggi sebelum merge.