Docker dari nol, biar “extract → compose up” beneran masuk akal

Isi

1. Masalah yang diselesaikan Docker

Tanpa Docker, tiap mesin harus disetup manual. Versi PHP beda, extension hilang, Postgres conflict, Node 18 vs 20 — “di laptop gua jalan”.

2. Enam konsep wajib hafal

3. Analogi cepat

4. Dockerfile dibedah (claim-approval)

Backend — php:8.3-cli-alpine

# base runtime PHP, bukan PHP host lo
FROM php:8.3-cli-alpine

# extension + lib Postgres
RUN apk add ... && docker-php-ext-install pdo pdo_pgsql bcmath

# curi binary Composer dari image lain
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer

WORKDIR /var/www/html
COPY . .
RUN composer install ...     # deps PHP dibakar ke image saat BUILD

EXPOSE 8000
ENTRYPOINT ["./docker-entrypoint.sh"]  # jalan tiap container START

Frontend — node:20-alpine

FROM node:20-alpine
WORKDIR /app
COPY package.json ./
RUN npm install              # layer cache: ganti source ≠ reinstall deps
COPY . .
ENV HOST=0.0.0.0 PORT=3000  # WAJIB 0.0.0.0 biar port-map host masuk
CMD ["npm", "run", "dev"]

Postgres — tanpa Dockerfile project

Cuma image: postgres:16-alpine. Image resmi sudah: start server, baca env POSTGRES_*, auto-create DB/user saat volume kosong first boot.

5. Entrypoint = kenapa migrate & seed auto

backend/docker-entrypoint.sh jalan setiap backend start:

1. Kalau belum ada .env → copy dari .env.example
2. Kalau APP_KEY kosong → php artisan key:generate
3. Loop tunggu Postgres benar-benar accept PDO (bukan cuma TCP open)
4. php artisan migrate --force --seed → table + demo users/claims
5. php artisan serve --host=0.0.0.0 --port=8000

6. Compose: 3 service = 1 app

HOST (VPS)
  │ port map
  │ :3010 ──────────────► frontend :3000  (Nuxt)
  │ :8000 ──────────────► backend  :8000  (Laravel)
  │ :5437 ──────────────► db       :5432  (Postgres)  // opsional dari host
  │
  └─ docker network: claim-approval-system_default
        backend ──DB_HOST=db:5432──► db
        frontend tidak ke DB
        browser-lah yang nembak API di host:8000

  volume db_data → /var/lib/postgresql/data  (data tahan recreate)

Service ringkas

Tabel “localhost mana?”

7. Alur persis: docker compose up --build

1. Parse docker-compose.yml → 3 service, volume, network.
2. Build service yang punya build: (backend, frontend). Layer cache dipakai kalau bisa. db cuma pull image.
3. Create network project + volume db_data.
4. Start db → healthcheck lolos.
5. Start backend → entrypoint: key, wait DB, migrate, seed, serve.
6. Start frontend → npm run dev listen 0.0.0.0:3000.
7. Publish ports ke host → lo bisa curl/browser.

8. Port mapping & kenapa VPS perlu edit yaml

Format: "HOST:CONTAINER". Kiri = lubang di mesin lo. Kanan = port proses di dalam container.

# default README (laptop bersih)
"5432:5432"   # host 5432 → postgres container
"8000:8000"
"3000:3000"

# VPS kita (yang kepake: 5432, 3000, 3001-3003)
"5437:5432"   # host 5437 → postgres tetap 5432 INTERNAL
"8000:8000"
"3010:3000"   # browser buka :3010

9. Data: apa hilang, apa aman

docker compose down      # stop + hapus container; VOLUME TETAP
docker compose down -v   # + hapus volume → DB ILANG

10. Command harian

cd claim-approval-system
docker compose ps
docker compose up --build -d
docker compose logs -f backend
docker compose exec backend sh
docker compose exec db psql -U postgres -d approval_system
docker compose down

docker ps
docker images
docker volume ls
docker network ls
docker logs <container>
docker system prune   # hati-hati

docker = engine. docker compose = project multi-service (baca yaml di folder sekarang).

11. Pitfall klasik + checklist debug

Checklist “kok nggak jalan”

1. docker compose ps — container up?
2. docker compose logs backend — error migrate/key/DB?
3. Salah localhost / service name?
4. Port host free + mapping bener?
5. DNS db cuma di network project itu
6. Volume kosong first boot vs data stale
7. CORS / NUXT_PUBLIC_API_BASE dari sudut browser

Bonus: layer cache kenapa build kadang 2 menit / 10 detik

COPY package.json ./
RUN npm install     # mahal — cache selama package.json sama
COPY . .            # sering berubah — taruh di bawah

Urutan Dockerfile = strategi cache. Ubah 1 file source nggak harus reinstall 800 package.

Dev style deliverable vs production

Konsep Docker sama; yang beda Dockerfile/CMD/security posture.

12. Next level (belum dibahas di atas, tapi perlu tau)

Ringkas 10 poin biar nempel

1. Docker bungkus app + dependency jadi image portable.
2. Container = image yang lagi running.
3. Dockerfile = resep image (RUN build-time, CMD run-time).
4. Compose = banyak container sebagai 1 project.
5. Service name (db) = hostname internal.
6. localhost di container ≠ localhost di VPS.
7. Port map host:container cuma untuk akses dari luar.
8. Volume = data yang nggak ikut mati pas container ilang.
9. Entrypoint backend yang bikin migrate/seed otomatis.
10. compose up --build = build + wiring + start sesuai yaml.

Contoh nyata yang kita jalanin

13. Diagram animasi: request lo ke mana?

Bayangin lo buka UI, login, create claim. Packet nggak “nyampe DB dari browser”. Alurnya: browser → FE (HTML/JS) + browser → API → Postgres internal.

14. docker run setara compose (biar keliatan “magic”-nya)

Compose bukan engine terpisah. Dia cuma file deklaratif yang nge-generate rangkaian docker network/volume/build/run.

# 1. network + volume
docker network create claimnet
docker volume create db_data

# 2. database
docker run -d --name db --network claimnet \
  -e POSTGRES_DB=approval_system \
  -e POSTGRES_USER=postgres \
  -e POSTGRES_PASSWORD=postgres \
  -v db_data:/var/lib/postgresql/data \
  -p 5437:5432 \
  postgres:16-alpine

# 3. build images
docker build -t claim-be ./backend
docker build -t claim-fe ./frontend

# 4. backend (nunggu DB healthy dulu — manual)
docker run -d --name backend --network claimnet \
  -e DB_HOST=db -e DB_PORT=5432 \
  -e DB_DATABASE=approval_system \
  -e DB_USERNAME=postgres -e DB_PASSWORD=postgres \
  -e CORS_ALLOWED_ORIGINS=http://localhost:3010 \
  -p 8000:8000 claim-be

# 5. frontend
docker run -d --name frontend --network claimnet \
  -e NUXT_PUBLIC_API_BASE=http://localhost:8000/api \
  -p 3010:3000 claim-fe

docker compose up --build -d

# plus gratis:
# - project namespace (prefix nama)
# - depends_on + healthcheck
# - recreate konsisten
# - logs/ps/exec per service
# - down / down -v

Inspect mental model

# setelah compose up
docker compose ps
docker network inspect claim-approval-system_default | head
docker volume inspect claim-approval-system_db_data | head
docker inspect claim-approval-system-backend-1 --format '{{json .HostConfig.PortBindings}}'
docker inspect claim-approval-system-backend-1 --format '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}'

15. Quiz — 8 soal, cek konsep nempel

Klik jawaban. Langsung ada penjelasan. Nggak disimpan ke server mana pun — pure browser.