Menyederhanakan alamat web app dengan domain `.localhost`

• Berbagi pengalaman menyiapkan web app yang sedang dikembangkan agar bisa diakses dengan alamat sederhana seperti appname.localhost, tanpa harus mengingat port seperti localhost:4333
• Dengan sistem ini, akses ke web app lokal menjadi jauh lebih intuitif dan rapi
• Setiap app berjalan pada port unik sebagai daemon launchd
• Mengalihkan appname.localhost ke 127.0.0.1 di file /etc/hosts
  • Contoh: 127.0.0.1 inclouds.localhost
• Menggunakan Caddy untuk mem-proxy domain tersebut ke port yang sesuai

Contoh konfigurasi Caddy

  inclouds.localhost {  
    reverse_proxy localhost:5050  
    tls internal  
    encode gzip zstd  
  }  

• Untuk setiap domain .localhost, tulis konfigurasi proxy di Caddyfile ke port terkait
• Dukungan sertifikat TLS internal dan kompresi juga disertakan

Ide pengembangan selanjutnya

• Saat ini masih perlu mengedit tiga file secara manual (/etc/hosts, Caddyfile, launchd plist)
• Ke depannya, targetnya adalah membuat alat otomasi untuk memasang/menghapus app ke domain .localhost dengan satu perintah

Pembaruan

• Cristóbal mengusulkan pendekatan berbasis dnsmasq yang membuat proses ini lebih sederhana
• Ide intinya adalah sebagai berikut:
  1. Mengalihkan semua *.localhost ke 127.0.0.1
  2. Menyiapkan server yang melakukan reverse proxy dari 127.0.0.1 ke port tertentu

Menyiapkan pengalihan dengan dnsmasq

• Menggunakan dnsmasq untuk merutekan semua domain *.localhost ke 127.0.0.1
• Konfigurasi setelah instalasi:

  echo 'port=5353' | sudo tee -a /etc/dnsmasq.conf  
  echo 'address=/localhost/127.0.0.1' | sudo tee -a /etc/dnsmasq.conf  
  sudo systemctl restart dnsmasq  
  

• Port dnsmasq diatur ke 5353 untuk menghindari konflik dengan systemd-resolved
• Tambahkan berikut ini di bagian paling atas /etc/resolv.conf untuk menjadikan dnsmasq sebagai resolver DNS default:

  nameserver 127.0.0.1  
  

Menyiapkan reverse proxy dengan Caddy dan skrip localhost

• Sekarang server caddy bisa digunakan untuk menghubungkan setiap subdomain ke port tertentu
• Anda bisa mengedit Caddyfile secara manual, tetapi juga bisa mengotomatiskannya dengan membuat skrip bash (localhost)
• Tambahkan skrip bash (localhost) ini ke PATH (misalnya lewat file .zshrc):

  export PATH="$PATH:$HOME/dev/localhost"  
  

• Bisa digunakan seperti berikut:

  localhost add hello 8000  
  localhost remove hello  
  

Uji cara kerjanya secara langsung

• Contoh menjalankan server lokal:

  echo 'hello.localhost!' > index.html  
  python3 -m http.server 1234  
  

• Menyiapkan koneksi domain:

  localhost add hello 1234  
  

• Sekarang, jika membuka hello.localhost di browser, isi dari server di atas akan ditampilkan

[dudlf016]

Kalau bukan lingkungan yang tidak bisa diakses dari jaringan luar, saya sih akan pakai Wildcard DNS seperti NIP.IO.

[GN⁺]

Opini Hacker News

• Browser menyediakan konteks keamanan untuk domain .localhost

  • Tidak memerlukan sertifikat self-signed untuk HTTPS
  • Berguna saat API backend dan SPA frontend berjalan bersamaan
  • Bisa menggunakan domain .internal yang baru-baru ini disetujui

• Snippet konfigurasi pengembangan lokal nginx sederhana

  • Terhubung ke server pengembangan lokal melalui Unix domain socket
  • Perlu menambahkan resolusi nama host, tetapi tidak perlu mengedit file konfigurasi secara terprogram atau me-restart proxy

• Chrome dan Firefox secara default me-resolve semua domain <name>.localhost ke localhost

  • Bisa menyiapkan proxy Docker untuk menangani semua request secara otomatis

• Proyek Localias berguna untuk pengembangan web lokal

  • Dibangun berbasis Caddy, dengan CLI dan format file konfigurasi yang nyaman
  • Memungkinkan alias domain .local digunakan dari perangkat lain di jaringan
  • Tidak perlu mengedit file /etc/hosts secara manual

• Subdomain dari .localhost bekerja secara default di Linux, OpenBSD, dan lainnya

  • Di macOS, subdomain harus ditambahkan secara eksplisit ke /etc/hosts

• Jika menggunakan Caddy, sebaiknya memakai domain yang dibeli dan DNS-01 challenge

  • Tidak perlu menambahkan sertifikat self-signed ke trust store
  • Caddy memperbarui sertifikat secara otomatis

• Ada juga yang menggunakan vanity domain di jaringan pribadi

  • Menggunakan Smallstep CA, CoreDNS, dan Traefik untuk menerbitkan sertifikat SSL secara otomatis
  • Disarankan menggunakan zona internal. untuk konfigurasi jaringan internal

• Setiap aplikasi yang di-host secara lokal bisa diberi alamat IP terpisah

  • Bisa menggunakan alamat IP dalam rentang 127.0.0/24
  • Ini juga bekerja di macOS, tetapi mungkin perlu ditambahkan secara eksplisit ke loopback interface

• Di sistem Linux, ini bekerja secara default melalui systemd-resolved

  • Ada keuntungan karena CSRF bisa diblokir dengan reverse proxy