Frontend Pipeline
CI/CD Frontend — ESLint, Next.js build, dan multi-arch Docker dengan health check
Frontend Next.js menggunakan React 19.2.3 dengan Tailwind CSS dan komponen shadcn/ui. Pipeline menjalankan validasi ESLint, build Next.js, dan pembuatan Docker image multi-arch. Saat ini belum memiliki E2E testing framework.
Workflow Files
ci.yml
Setup Node.js 20, npm ci, ESLint, Next.js build. Berjalan pada push/PR ke branch main.
release.yml
Pipeline tiga tahap: Docker build → lint&build → health check. Push multi-arch ke GHCR.
Frontend Quality Gates
ESLint
ESLint saja (tanpa test framework). Lint pada src/app, src/components, src/features. Mem-block build pada lint errors.
Next.js Build
next build dengan mode standalone output. Memvalidasi konfigurasi build dan kesiapan produksi.
Docker Health Check
Container starts, memeriksa endpoint /health, memverifikasi response 200 OK. Memastikan kesiapan produksi.
Frontend Build Tools
| Tool | Version | Purpose |
|---|---|---|
| Node.js | 20 | Runtime untuk CI |
| Node.js | 24-slim | Runtime untuk Docker |
| Next.js | 16.1.6 | Framework |
| React | 19.2.3 | UI library |
| Tailwind CSS | Latest | Styling |
| ESLint | Latest | Linting |
| shadcn/ui | Latest | Component library |
| Docker | Multi-stage | Image optimization |
| standalone output | Latest | Production build |
ci.yml Stages
Setup
Meng-checkout kode, setup Node.js 20, menjalankan npm ci untuk build deterministik.
Lint
Menjalankan ESLint pada src/app, src/components, src/features. Konfigurasi ESLint di .eslintrc.json.
Build
Menjalankan next build dengan mode standalone output. Menghasilkan direktori /.next/standalone.
release.yml Stages
Build
Docker buildx build dengan --platform linux/amd64,linux/arm64. Men-tag image dengan version.
Lint & Build
Menjalankan lint dan Next.js build di dalam container. Memastikan build berfungsi di environment mirip produksi.
Test Image
Container starts, menunggu health check endpoint. Memverifikasi /health mengembalikan 200 OK.
Docker Build
# Multi-stage Dockerfile
# Stage 1: deps (node:24-alpine) - install dependencies
# Stage 2: builder (node:24-alpine) - build Next.js
# Stage 3: runner (node:24-slim) - runtime with non-root user- Menggunakan image final node:24-slim (minimal attack surface)
- Non-root user (node) untuk keamanan
- Mode standalone output untuk deployment yang bersih
- Health check endpoint dikonfigurasi di Next.js config
Keterbatasan Saat Ini
No Test Framework
Tidak ada test framework yang dikonfigurasi. Tidak ada Jest, Vitest, atau E2E tests. CI hanya menjalankan lint dan build.
No E2E Tests
Tidak ada Playwright atau Cypress tests. Tidak ada visual regression testing. Enhancement di masa depan direkomendasikan.
Minimal Validation
CI hanya memvalidasi kualitas kode (ESLint) dan keberhasilan build. Tidak ada runtime testing.
Future Improvements
Playwright E2E Tests
Menambahkan Playwright tests untuk alur pengguna kritis. Menguji authentication, dashboard, halaman leaderboard.
Visual Regression
Menambahkan Storybook Chromatic atau Playwright visual diff. Mendeteksi UI regressions sebelum deployment.
VitePress Docs
Menambahkan VitePress untuk situs dokumentasi internal. Membuat API docs dari kode.
Health Check Endpoint
/health
Mengembalikan 200 OK saat container sehat. Memeriksa koneksi database, koneksi Redis, dan status service.
Config
Dikonfigurasi di next.config.js dengan mode standalone output. Health check terintegrasi ke dalam Dockerfile.