Setup Web E-Book Otomatis via Docker & Nginx Proxy Manager

Selamat! Dokumentasi ini adalah rekapan komplit dari sesi pemecahan masalah dan pembuatan arsitektur web e-book dinamis yang berhasil kita setup. File ini dirancang khusus agar langsung siap diletakkan di dalam folder volume tutorial/ pada container e-book kamu.

Status Terakhir: SUKSES COUPLING
Web server Apache PHP berhasil berjalan di port host 8086, dan Nginx Proxy Manager (NPM) sukses melakukan reverse proxy menggunakan metode Custom Locations (Loopback Proxy) untuk meneruskan domain ebook.petroflexx.id dengan aman menggunakan SSL.

1. Arsitektur & Logika Kerja Sistem

Web e-book ini dibangun dengan pendekatan Server-Side Auto-Scanning. Dibandingkan menggunakan HTML statis tradisional yang mengharuskan kita mengedit file indeks setiap ada materi baru, sistem ini memanfaatkan skrip PHP ringan untuk mendeteksi penambahan file secara real-time.

2. Langkah Pengaturan di Level OS Host

Direktori penyimpanan diisolasi secara persisten pada level OS agar file tutorial aman meskipun container di-restart atau di-build ulang.

# Membuat struktur folder ebook di server
sudo mkdir -p /opt/data/docker/my-ebook/tutorial

# Mengatur hak akses agar container dapat membaca file html dengan aman
sudo chmod -R 755 /opt/data/docker/my-ebook

3. Deployment Stack via Docker Compose

Berikut adalah konfigurasi file docker-compose.yml yang digunakan untuk menjalankan backend e-book. File ini menggunakan base image php:8.2-apache dengan optimasi global server name untuk menekan warning sistem.

version: '3.8'

services:
  ebook-reader:
    image: php:8.2-apache
    container_name: my-ebook-reader
    ports:
      - "8086:80"
    volumes:
      - /opt/data/docker/my-ebook:/var/www/html
    command: >
      bash -c "echo 'ServerName localhost' >> /etc/apache2/apache2.conf && apache2-foreground"
    restart: always
    environment:
      - TZ=Asia/Jakarta

4. Skrip Engine Utama (index.php)

File ini diletakkan langsung di dalam root folder volume /opt/data/docker/my-ebook/index.php. Tugasnya memindai folder dan menyajikan antarmuka membaca.

<?php
/* Skrip Otomatis Pembaca Folder Tutorial */
$dir = "tutorial/";
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>E-Book Rekapan Tutorial</title>
    <style>
        body { display: flex; margin: 0; font-family: 'Segoe UI', sans-serif; background: #f9f9f9; }
        #sidebar { width: 300px; background: #2c3e50; color: white; padding: 20px; height: 100vh; box-sizing: border-box; overflow-y: auto; }
        #sidebar h3 { border-bottom: 2px solid #34495e; padding-bottom: 10px; margin-top: 0; }
        #sidebar ul { list-style: none; padding: 0; margin: 0; }
        #sidebar li { margin-bottom: 8px; }
        #sidebar a { color: #ecf0f1; text-decoration: none; display: block; padding: 10px; border-radius: 4px; }
        #sidebar a:hover { background: #34495e; color: #3498db; }
        #content-frame { flex: 1; border: none; height: 100vh; background: white; }
    </style>
</head>
<body>
    <div id="sidebar">
        <h3>Daftar Tutorial</h3>
        <ul>
            <?php
            if (is_dir($dir)) {
                $files = scandir($dir);
                foreach ($files as $file) {
                    if (pathinfo($file, PATHINFO_EXTENSION) == 'html') {
                        $nama_tampilan = str_replace(['-', '_', '.html'], [' ', ' ', ''], $file);
                        $nama_tampilan = ucwords($nama_tampilan);
                        echo "<li><a href='{$dir}{$file}' target='reader'>{$nama_tampilan}</a></li>";
                    }
                }
            }
            ?>
        </ul>
    </div>
    <iframe name="reader" id="content-frame" src="data:text/html,<html><body style='font-family:sans-serif; display:flex; justify-content:center; align-items:center; height:90vh; color:#95a5a6;'><div style='text-align:center;'><h2>📖 E-Book Reader Ready</h2><p>Silahkan pilih materi tutorial di sebelah kiri.</p></div></body></html>"></iframe>
</body>
</html>

5. Troubleshooting Nginx Proxy Manager (NPM)

Pelajaran Penting (Kasus Monitor Domain Zombie):
Saat melakukan setup awal, NPM sempat mengalami Internal Error konstan saat proses penyimpanan data proxy baru. Setelah dilakukan pengecekan via perintah debug log container: docker logs -f [container-npm], ditemukan crash global akibat konfigurasi lama yang menggantung (zombie upstream) pada domain monitor.petroflexx.id yang mengarah ke container petro-monitor-app yang sudah dihapus secara fisik di level OS. Nginx menolak melakukan reload sebelum konfigurasi rusak tersebut dibersihkan.

Konfigurasi Akhir GUI NPM (Pola Loopback Proxy):

Untuk menyamakan arsitektur networking dengan cluster aplikasi web kamu yang lain, konfigurasi diatur menggunakan metode pemisahan port via Custom Locations:

Tab Details:

Tab Custom Locations:

Tips Penggunaan Mendatang:
Mulai saat ini, setiap kali kita menyelesaikan materi baru, kamu tinggal meminta saya: "Buatkan rekapan HTML untuk materi X". Kamu tinggal menyalin hasilnya, menyimpannya di folder /opt/data/docker/my-ebook/tutorial/0X-nama-file.html, dan web otomatis ter-update tanpa perlu menyentuh kodingan lagi.