3 Cara Membuat Online Localhost dengan Layanan Tunneling

Rizky
14 Nov, 2025
Localhost Online

Sebagai developer, kita sering diminta untuk mendemokan project yang masih berjalan di localhost, misalnya untuk: testing dari HP, demo ke klien, atau integrasi dengan webhook yang mengharuskan penggunaan HTTPS (misalnya Telegram bot, Midtrans, Xendit dll). Masalahnya, localhost hanya bisa diakses dari komputer kita sendiri.

Solusinya yaitu menggunakan tunneling service seperti ngrok, Cloudflare Tunnel, ataupun loca.lt. Tools ini akan membuat tunnel aman dari internet ke port lokal di komputer kita, sehingga localhost bisa diakses lewat URL publik (HTTPS).

Apa Itu Tunneling Localhost?

Secara sederhana, tunneling localhost adalah proses membuka “terowongan” antara komputer lokal dan internet. Layanan tunneling akan:

  • Membuat URL publik (biasanya HTTPS).
  • Meneruskan semua request yang masuk ke URL tersebut ke port di komputer lokal (misalnya http://127.0.0.1:8000).
  • Bekerja tanpa perlu konfigurasi rumit di router, port forwarding, atau IP publik.

Ini sangat berguna untuk:

  • Demo aplikasi ke klien secara cepat.
  • Testing payment gateway dan webhook.
  • Testing progres dari HP / device lain di jaringan berbeda.
  • Bekerja remote tanpa upload project ke hosting/VPS dulu.

Persiapan Dasar

Sebelum menggunakan layanan tunneling, pastikan:

  1. Project lokal sudah berjalan, misalnya:
    • Laravel: php artisan serve --host=127.0.0.1 --port=8000
    • Vite/React: npm run dev (biasanya port 5173)
    • Apache/Nginx lokal: biasanya di localhost:80 atau localhost:8080
  2. Catat port yang dipakai (misal: 8000, 80, atau 5173).
  3. Pastikan koneksi internet stabil.

1. ngrok

1.1. Apa itu ngrok?

ngrok adalah salah satu layanan tunneling paling populer. Kelebihannya:

  • Mudah digunakan (satu command).
  • Mendukung HTTPS.
  • Ada dashboard untuk lihat log request.

1.2. Instalasi Singkat ngrok

  1. Register di website ngrok (gratis).
  2. Download binary ngrok sesuai OS (Windows, Linux, macOS).
  3. Ekstrak dan letakkan file ngrok di folder yang ada di PATH (atau satu folder dengan project).
  4. Hubungkan akun: 
    ngrok config add-authtoken <TOKEN_DARI_NGROK>

1.3. Menjalankan Tunnel dengan ngrok

Contoh: project Laravel berjalan di http://127.0.0.1:8000.

ngrok http 8000

Setelah command di atas jalan, ngrok akan menampilkan beberapa URL, misalnya:

  • https://something.ngrok.io → URL publik

Berikan URL tersebut ke klien atau gunakan untuk webhook. Semua request ke URL ngrok akan diteruskan ke http://127.0.0.1:8000.

1.4. Tips Menggunakan ngrok

  • Untuk subdomain yang konsisten, gunakan plan berbayar atau fitur reserved domain.
  • Gunakan parameter region jika butuh latency lebih kecil.
  • Jangan share URL ngrok sembarangan kalau project berisi data sensitif.

2. Cloudflare Tunnel

2.1. Apa itu Cloudflare Tunnel?

Cloudflare Tunnel (dulu dikenal sebagai Argo Tunnel) adalah layanan dari Cloudflare untuk membuat koneksi aman dari jaringan internal ke Cloudflare edge. Kelebihannya:

  • Gratis untuk banyak use case.
  • Bisa pakai domain sendiri (misalnya dev.domainkamu.com).
  • Terintegrasi dengan fitur Cloudflare lain (DNS, Firewall, Access).

2.2. Instalasi cloudflared

Agen yang dipakai bernama cloudflared.

  1. Install cloudflared:
    • Linux (contoh Debian/Ubuntu): sudo apt install cloudflared (atau pakai repo resmi).
    • macOS: via Homebrew: brew install cloudflared.
    • Windows: gunakan installer resmi Cloudflare.
  2. Login ke Cloudflare: 
    cloudflared tunnel login
    Ini akan membuka browser dan meminta kamu memilih akun + domain.

2.3. Membuat Tunnel

  1. Buat tunnel baru: 
    cloudflared tunnel create dev-localhost
  2. Konfigurasi routing ke localhost, misalnya port 8000. Buat file config.yml: 
    tunnel: dev-localhost
credentials-file: /path/ke/credentials.json

ingress:
  - hostname: dev.domainkamu.com
    service: http://localhost:8000
  - service: http_status:404
  3. Tambahkan DNS record otomatis: 
    cloudflared tunnel route dns dev-localhost dev.domainkamu.com
  4. Jalankan tunnel: 
    cloudflared tunnel run dev-localhost

Sekarang https://dev.domainkamu.com akan mengarah ke localhost kamu. Ini cocok banget untuk:

  • Staging server di lokal.
  • Demo ke klien dengan domain yang terlihat profesional.
  • Integrasi dengan Cloudflare Access (proteksi login sebelum masuk ke app).

3. loca.lt (LocalTunnel)

3.1. Apa itu loca.lt?

loca.lt biasanya digunakan bersama localtunnel sebagai host. Kelebihannya:

  • Command simpel (via Node.js / npm).
  • Gratis dan cepat dipakai untuk testing singkat.

3.2. Instalasi LocalTunnel

Pastikan Node.js & npm sudah terinstall.

npm install -g localtunnel

3.3. Menjalankan Tunnel dengan LocalTunnel

Contoh: app jalan di port 8000.

lt --port 8000

Command di atas akan menghasilkan URL publik, misalnya:

  • https://random-subdomain.loca.lt

Jika ingin subdomain custom (kadang butuh akun / konfigurasi tertentu), bisa gunakan: 

lt --port 8000 --subdomain nama-app-kamu

Kelebihan utama localtunnel/loca.lt adalah:

  • Setup cepat, cocok untuk testing singkat.
  • Berbasis Node.js, mudah diintegrasikan ke script npm.

4. Perbandingan Singkat ngrok vs Cloudflare Tunnel vs loca.lt

Layanan Kelebihan Kekurangan Kapan Dipakai?
ngrok Mudah, cepat, ada dashboard, dukung banyak protokol. Subdomain random di versi gratis, limit tertentu. Demo cepat, webhook, testing harian.
Cloudflare Tunnel Bisa pakai domain sendiri, integrasi Cloudflare, stabil. Setup sedikit lebih kompleks untuk pemula. Staging yang serius, akses jangka panjang, domain custom.
loca.lt / localtunnel Instalasi cepat via npm, simple banget. Kurang fitur lanjutan, kadang kurang stabil untuk beban berat. Testing singkat, share cepat ke teman/tim.

5. Keamanan Saat Meng-Online-kan Localhost

Ingat, saat localhost di-online-kan, aplikasi kamu benar-benar bisa diakses publik. Perhatikan beberapa hal berikut:

  • Jangan meng-online-kan aplikasi yang berisi data sensitif tanpa proteksi.
  • Matikan tunnel jika sudah selesai testing.
  • Gunakan password / login untuk bagian admin.
  • Jika menggunakan Cloudflare Tunnel, bisa tambahkan proteksi Cloudflare Access (login sebelum masuk app).

6. Penutup

Meng-Online-kan localhost sekarang jauh lebih mudah berkat layanan seperti ngrok, Cloudflare Tunnel, dan loca.lt. Setiap layanan punya kelebihan dan kekurangan:

  • ngrok → paling cepat dan praktis untuk demo & webhook.
  • Cloudflare Tunnel → terbaik untuk jangka panjang dengan domain sendiri.
  • loca.lt → ringan dan simple, cocok buat testing cepat.

Silakan pilih sesuai kebutuhan workflow kamu. Kalau kamu sering main Laravel, Node.js, atau butuh integrasi payment gateway, punya skill “tunneling localhost” ini akan sangat membantu produktivitas.

Next Post Previous Post
No Comment
Add Comment
comment url

Related Posts