# Cara Situs Ini Dibangun — Next.js Self-Hosted | Matthews Wong

> Cara matthewswong.com dibangun dan di-self-host: Next.js 15 dalam Docker di VPS 1 vCPU di balik Cloudflare, dirilis GitHub Actions, dipantau Grafana.

URL: https://www.matthewswong.com/id/architecture/

## Cara Situs Ini Dibangun — Next.js Self-Hosted di Docker

## FAQ

### Apakah situs ini di-hosting di Vercel?

Tidak. Dulu di Vercel, sekarang self-hosted: image Docker Next.js standalone berjalan di container 1 vCPU / 512 MB di VPS kecil, di depan Cloudflare, dengan nginx yang menerminasi TLS. Pindah ke sini memberi satu biaya bulanan yang pasti dan kontrol penuh atas runtime.

### Bagaimana situs ini di-deploy?

Tiap push ke main menjalankan pipeline GitHub Actions: typecheck dan lint, lalu build image Docker, push ke GHCR dengan tag commit SHA, dan deploy via SSH dengan docker compose. Container diganti di tempat hanya setelah healthcheck-nya lolos.

### Kenapa situs pakai WebP alih-alih AVIF untuk gambar?

Di box 1 vCPU, encode satu cover ke AVIF terukur 4–9 detik dibanding sekitar 0,6 detik untuk WebP — penalti 7–16x — dan Cloudflare belum meng-cache image optimiser, jadi origin membayar biaya itu berulang. WebP menang sampai edge meng-cache varian teroptimasi.

### Bagaimana situs tetap cepat di satu VPS kecil?

Tiap halaman di-prerender statis saat build, Cloudflare menyerap traffic berulang di edge, payload i18n client dipangkas dari 1,6 MB jadi 76 KB, dan footer animasinya sekitar 4 kB WebGL tulis tangan alih-alih library 3D.

### Bagaimana situs ini dipantau?

Melapor ke stack Grafana, Prometheus, dan Loki self-hosted bersama server klien di sebelahnya, dengan alert rule yang bereskalasi sampai panggilan telepon. Healthcheck Docker menyondir container tiap 30 detik dan uptime-kuma memeriksa URL publik dari luar.

---

- HTML version: https://www.matthewswong.com/id/architecture/
- English: https://www.matthewswong.com/en/architecture/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json