Pipeline Frontend
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. Deployment melalui GHCR → yomu-deployment → VPS Docker Swarm. Saat ini belum memiliki E2E testing framework.
File Workflow
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. Mengirim repository_dispatch ke yomu-deployment.
Quality Gate Frontend
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.
Alat Build Frontend
| Alat | Versi | Tujuan |
|---|---|---|
| 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 | Terbaru | Styling |
| ESLint | Terbaru | Linting |
| shadcn/ui | Terbaru | Component library |
| Docker | Multi-stage | Image optimization |
| standalone output | Terbaru | Production build |
Tahapan ci.yml
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.
Tahapan release.yml
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.
Build Docker
# 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
Deployment
Image Registry
Image: ghcr.io/advprog-2026-a14-project/yomu-frontend:main (production) atau :staging (staging)
Trigger Deploy
Setelan CI mengirim repository_dispatch ke repo yomu-deployment untuk memicu deploy ke VPS. Event type: deploy-trigger dengan payload image_tag.
Target Deployment
VPS GCP 34.101.41.6, user: pongo. Deploy via docker stack deploy -c docker-compose.swarm.yml yomu.
Alur CD
- Release Workflow — Setelah CI lulus,
release.ymlmembuild Docker image dan push ke GHCR - Repository Dispatch — Workflow mengirim event ke yomu-deployment dengan payload:
{ "image_tag": "main" } - Deploy Trigger —
deploy-production.ymldi yomu-deployment menerima eventrepository_dispatch - SSH Connection — Workflow menggunakan
appleboy/ssh-actionuntuk SSH ke VPS - Stack Deploy — Menjalankan
docker stack deploydengan image tag yang sesuai - Rolling Update — Docker Swarm melakukan rolling update service frontend
- Smoke Test — Verifikasi endpoint root
/Frontend
Deploy Manual
Gunakan workflow_dispatch di yomu-deployment dengan input image_tag untuk deploy manual. Berguna untuk rollback atau deploy hotfix.
Health Endpoint
Health check endpoint /health terintegrasi di Dockerfile. Memverifikasi container siap menerima traffic.
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.
Perbaikan di Masa Depan
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.
Tag Image
| Environment | Tag Pattern | Trigger |
|---|---|---|
| Production | main | Push ke branch main |
| Staging | staging | Push ke branch staging |
| Specific | <commit-sha> | Workflow dispatch manual |