Proyek: Container Web Statis

Dua puluh section materi telah kita tempuh, dari Apa itu Docker? sampai Memilih Platform Orchestration, dan setiap konsepnya kita lihat dalam potongan kecil: satu Dockerfile di sini, satu flag di sana. Section Proyek membuka babak penerapan — seluruh pengetahuan itu dirangkai menjadi produk nyata yang bisa dijalankan dan diuji dari ujung ke ujung. Proyek pertama sengaja dipilih yang paling ramping: sebuah situs katalog produk statis yang dikemas menjadi image nginx, dijalankan sebagai container, lalu dinyatakan penuh dalam compose.yaml. Jangan tertipu ukurannya — proyek mungil ini menyentuh hampir semua otot Course ini: image layer, build cache, konfigurasi server, port publishing, restart policy, sampai membaca log akses.

Apa yang Kita Bangun #

Kita berperan sebagai pengelola situs Kopi Nusantara, toko kopi yang butuh halaman katalog sederhana. Situs yang kita bangun memiliki karakter berikut:

• satu berkas HTML mandiri berisi katalog tiga kopi — tanpa CSS eksternal, tanpa JavaScript, tanpa proses build front-end,
• image berbasis nginx:1.29-alpine dengan konfigurasi kustom: kompresi gzip, kebijakan cache 7 hari untuk aset, no-cache untuk index.html, dan fallback 404 untuk jalur yang tak ada,
• container yang dijalankan dulu manual lewat docker run agar tiap flag terasa, lalu dideklarasikan penuh dalam compose.yaml,
• verifikasi menyeluruh dengan curl dan docker logs: header HTTP dibedah satu per satu, gzip diukur byte-nya, siklus stop-start diuji, dan stack dibongkar dengan bersih.

Hasil Akhir dalam Dua Perintah #

Seluruh proyek bermuara pada dua perintah berikut, dijalankan dari dalam folder proyek setelah keempat bagian selesai:

$ docker compose up -d --build

Output yang Dihasilkan:

[+] Building 1.8s (12/12) FINISHED
 => [internal] load build definition from Dockerfile                    0.0s
 => => transferring dockerfile: 686B                                    0.0s
...
 => CACHED [6/6] RUN nginx -t                                           0.0s
 => => naming to docker.io/library/container-web-statis:1.0             0.0s
[+] Running 2/2
 ✔ Network container-web-statis_default  Created                         0.2s
 ✔ Container web-statis                  Started                         0.4s

Potongan tengah build dipotong agar ringkas — Bagian 3 membacanya baris demi baris. Satu perintah ini membangun image, membuat network, dan menghidupkan container. Perintah kedua mengetuk pintunya:

$ curl -I http://localhost:8080

Output yang Dihasilkan:

HTTP/1.1 200 OK
Server: nginx/1.29.4
Date: Tue, 13 Oct 2026 15:07:31 GMT
Content-Type: text/html
Content-Length: 2154
Last-Modified: Tue, 13 Oct 2026 14:56:26 GMT
Connection: keep-alive
ETag: "6ace469a-86a"
Cache-Control: no-cache
Accept-Ranges: bytes

Sepuluh baris respons itu adalah kartu nama proyek kita: Server membocorkan image dasarnya, Content-Length menghitung isi index.html byte-per-byte, ETag merangkum waktu dan ukuran berkas, dan Cache-Control adalah buah dari satu trik konfigurasi nginx yang kita pasang di Bagian 2. Bagian 4 membuktikan asal-usul setiap barisnya — termasuk mengapa no-cache justru melekat pada halaman depan.

Tujuan Pembelajaran #

Setelah menyelesaikan proyek ini, kita mampu:

• menyusun situs statis satu berkas yang sadar-container sejak baris pertamanya,
• menulis Dockerfile utuh dari nol — FROM yang dipin, LABEL OCI, dua COPY yang diurutkan demi cache, EXPOSE, dan validasi nginx -t saat build,
• mengonfigurasi nginx gaya conf.d: gzip, kebijakan cache per pola URL, dan try_files,
• membaca output BuildKit, menjalankan container dengan flag yang tepat, lalu memindahkan seluruh definisi ke compose.yaml,
• memverifikasi container web dengan curl, docker logs, dan siklus hidup stop-start-down.

Prasyarat #

Proyek ini tidak memperkenalkan konsep baru; ia merangkai yang lama. Pastikan mesin latihan memenuhi hal berikut:

• Docker Engine 29.9.0 dengan plugin Compose v5.6.0 terpasang dan lulus ritual Verifikasi Instalasi,
• klien curl tersedia di host — Bagian 4 memakainya sebagai alat uji utama,
• browser apa pun untuk mempratinjau situs di Bagian 1.

Chapter yang paling sering dirujuk: Membangun Image dengan Dockerfile dan docker build untuk anatomi resep serta output BuildKit, .dockerignore untuk penyaringan context, Port Publishing untuk pemetaan 8080:80, Pengantar Docker Compose serta Menjalankan dan Mengelola Stack untuk sisi deklaratifnya, Restart Policy untuk nuansa unless-stopped, dan Docker Logs untuk membaca jejak akses.

Peta File Proyek #

Struktur lengkap proyek yang kita bangun bertahap:

container-web-statis/
├── Dockerfile
├── nginx.conf
├── .dockerignore
├── compose.yaml
├── site/
│   └── index.html
└── README.md

Peran setiap berkas dan bagian tempat ia lahir:

Tahapan #

Proyek dikerjakan dalam empat bagian berurutan. Setiap bagian berdiri di atas berkas bagian sebelumnya:

1. Bagian 1: Menyiapkan File Website — struktur folder dan index.html utuh, plus bedah kenapa situs ini lahir sebagai satu berkas.
2. Bagian 2: Membuat Dockerfile — tiga berkas sekaligus: Dockerfile, nginx.conf, dan .dockerignore, lengkap dengan benang merah internal redirect.
3. Bagian 3: Membangun dan Menjalankan Image — docker build, docker run manual, lalu perpindahan ke docker compose up.
4. Bagian 4: Menguji Container Web — header, gzip, log akses, siklus hidup, dan teardown yang bersih.

Mulailah dari Bagian 1 dan pertahankan urutannya: konfigurasi nginx di Bagian 2 hanya masuk akal bila kita tahu isi site/, dan angka-angka di Bagian 4 hanya bermakna bila output build di Bagian 3 sudah kita pahami.

Referensi #

• nginx di Docker Hub — halaman image resmi yang menjadi basis proyek, beserta daftar tag dan varian alpine.
• Docker Compose — filosofi deklaratif Compose yang kita pakai pada Bagian 3.
• Dokumentasi nginx — rujukan directive yang dipakai di nginx.conf.

name: container-web-statis

services:
  web:
    build: .
    image: container-web-statis:1.0
    container_name: web-statis
    ports:
      - "8080:80"
    restart: unless-stopped

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Katalog produk Kopi Nusantara: Torabika, Gayo, dan Kintamani.">
  <title>Katalog Produk — Kopi Nusantara</title>
  <style>
    /* Palet warna terpusat sebagai custom properties. */
    :root {
      --latar: #f7f4ef;
      --teks: #2b2723;
      --aksen: #6f4e37;
      --kartu: #ffffff;
    }
    body {
      font-family: Georgia, serif;
      background: var(--latar);
      color: var(--teks);
      margin: 0;
      line-height: 1.6;
    }
    header, footer { background: var(--aksen); color: #fff; text-align: center; padding: 1rem; }
    h1 { margin: 0; font-size: 1.6rem; }
    main { max-width: 680px; margin: 2rem auto; padding: 0 1rem; }
    h2 { color: var(--aksen); margin: 0 0 1rem; }
    .pengantar { margin: 0 0 1.5rem; }
    section.produk { display: grid; gap: 1rem; }
    .kartu {
      background: var(--kartu);
      border: 1px solid #e6dfd3;
      border-radius: 8px;
      padding: 1rem;
    }
    .kartu h3 { margin: 0 0 0.25rem; }
    .harga { color: var(--aksen); font-weight: bold; margin: 0 0 0.25rem; }
    .kartu p { margin: 0; }
  </style>
</head>
<body>
  <header>
    <h1>Kopi Nusantara</h1>
    <p>Kopi pilihan Indonesia</p>
  </header>
  <main>
    <h2>Daftar Produk</h2>
    <p class="pengantar">Tiga kopi favorit kami, disangrai segar setiap pekan.</p>
    <section class="produk">
      <article class="kartu">
        <h3>Kopi Torabika</h3>
        <p class="harga">Rp 28.000</p>
        <p>Robusta dengan aroma kuat, favorit pelanggan.</p>
      </article>
      <article class="kartu">
        <h3>Kopi Gayo</h3>
        <p class="harga">Rp 45.000</p>
        <p>Arabika dataran tinggi Aceh dengan aroma rempah.</p>
      </article>
      <article class="kartu">
        <h3>Kopi Kintamani</h3>
        <p class="harga">Rp 42.000</p>
        <p>Arabika Bali dengan sentuhan rasa sitrus.</p>
      </article>
    </section>
  </main>
  <footer>
    <p>&copy; 2026 Kopi Nusantara — disajikan oleh nginx</p>
  </footer>
</body>
</html>