Setelah lu berhasil install dan jalanin Nginx UI (kayak yang kita bahas di artikel sebelumnya), sekarang waktunya bikin site baru biar Nginx bisa nge-handle domain apilaravel.test. Proses ini penting dipahami karena bakal jadi dasar buat setup domain-domain lain nantinya.
Langkah 1 Masuk ke Dashboard Nginx UI
Pertama, buka browser dan akses:
http://localhost:8080
(kalau di VPS, ganti localhost jadi IP server lu ya)
Begitu masuk, lu bakal liat tampilan dashboard-nya yang kece parah, bro. Dashboard ini bakal jadi tempat kamu ngatur semua site yang jalan di server, jadi gak ada salahnya luangin waktu bentar buat explore menu-menunya sebelum lanjut ke langkah berikutnya, biar makin familiar sama layout-nya.
Langkah 2 Bikin Server Baru
Di bagian kiri, cari menu “Hosts” atau “Sites” (tergantung versi Nginx UI-nya).
Terus klik tombol “Add” atau “+”.
Nah, nanti muncul form buat bikin konfigurasi server baru. Sebelum lanjut isi form, penting buat paham bedanya opsi Root dan Proxy: Root dipakai kalau kamu mau Nginx langsung nyajiin file statis dari folder tertentu (misal buat website HTML biasa), sedangkan Proxy dipakai kalau kamu mau Nginx nge-forward request ke aplikasi lain yang jalan di port/container berbeda, kayak API Laravel yang jalan di container terpisah. Karena kita mau nge-proxy ke aplikasi, jadi pilihan Proxy adalah yang benar buat kasus ini.
Isi kayak gini bro:
| Field | Isi |
|---|---|
| Server Name | apilaravel.test |
| Listen Port | 80 |
| Root / Proxy | pilih Proxy (karena kita mau nge-forward ke container lain) |
| Proxy Pass | http://ZeeiAPI:8000 |
| Description (optional) | Proxy ke API Laravel bro |
Langkah 3 Tambah Konfigurasi Manual (Opsional)
Kalau lu pengen lebih “advance”, lu bisa klik tab “Advanced config” atau “Edit Config” terus masukin manual config-nya kayak gini:
server {
listen 80;
listen [::]:80;
server_name apilaravel.test;
location / {
proxy_pass http://ZeeiAPI:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Kalau udah, tinggal Save / Apply bro.
Tiga baris proxy_set_header di config manual itu penting banget, jangan sampai dilewatin. Tanpa header-header itu, aplikasi Laravel di belakang proxy bisa salah baca informasi request asli, misalnya IP pengunjung yang kebaca malah IP internal Docker (bukan IP pengunjung beneran), atau redirect URL yang salah karena Laravel gak tau protokol asli (HTTP/HTTPS) yang dipakai user.
Langkah 4 Reload Nginx
Abis lu save, biasanya Nginx UI langsung nge-reload otomatis.
Tapi kalo gak, gampang aja di dashboard ada tombol Restart Nginx atau Reload. Klik aja itu bro.
Langkah 5 Tes Akses
Sekarang tinggal pastiin domain apilaravel.test udah diarahin ke IP server lu (di local bisa tambahin di /etc/hosts):
sudo nano /etc/hosts
Terus tambahin baris ini di paling bawah:
127.0.0.1 apilaravel.test
Save, keluar, terus buka browser:
http://apilaravel.test
Kalau semua bener, harusnya langsung nge-redirect ke container ZeeiAPI:8000 dan nampilin API Laravel lu.
Catatan buat production: entry /etc/hosts ini cuma buat testing lokal aja. Kalau situs kamu udah mau live buat publik, kamu perlu daftarin domain beneran (bukan .test) dan arahin DNS-nya (A record) ke IP VPS kamu, bukan cuma edit file /etc/hosts di komputer sendiri. Domain .test itu memang sengaja direservasi khusus buat development lokal dan gak akan bisa diakses dari luar jaringan kamu.
Kendala yang Sering Muncul
- 502 Bad Gateway setelah setup
Biasanya karena container tujuan (misalZeeiAPI:8000) belum jalan atau namanya salah ketik. Pastikan container tujuan statusnya running dan satu network Docker sama Nginx UI. - Domain gak kebuka sama sekali
Cek lagi apakah baris di/etc/hostssudah benar dan tersimpan, dan pastikan gak ada typo diserver_nameconfig. - Config udah di-save tapi gak ke-apply
Coba klik manual tombol Reload/Restart Nginx di dashboard, kadang auto-reload gagal kalau ada syntax error kecil di config. - Port 80 udah dipakai service lain
Kalau ada Apache atau web server lain yang masih jalan di port 80, matiin dulu atau ganti port listen-nya di config site baru ini.
Penutup
Gampang banget kan bro?
Dengan Nginx UI, nambah site baru tinggal klik-klik doang.
Gak perlu lagi buka file .conf, gak perlu reload manual dari terminal.
Jadi kalo lu punya banyak project (kayak apilaravel.test, frontend.test, dll), tinggal tambah aja satu-satu dari dashboard.
Praktis, cepet, dan gak bikin stress. Kombinasi Nginx UI buat reverse proxy management dan Docker buat container isolation ini emang cocok banget buat setup development environment yang rapi, apalagi kalau kamu sering gonta-ganti project atau kerja bareng tim yang butuh environment konsisten di banyak mesin.
