ngrok: Expose Localhost ke Internet dalam 5 Menit

Gue lagi setup Google OAuth buat project yang jalan di remote Ubuntu server. Semuanya kelihatan oke sampai di bagian redirect URI. Google minta domain yang beneran, bukan IP address. Dev server lokal gue ada di sesuatu kayak http://192.168.1.x:3000 dan Google langsung nolak.

Instinct pertama gue ya pake fitur port forwarding bawaan VS Code. Pernah gue pakai sebelumnya di local machine dan works bagus. Tapi kali ini gue konek lewat Remote SSH, dan ternyata fitur itu sama sekali nggak muncul. Tab port forwarding-nya ilang.

Nah, di situlah gue nemuin ngrok.

Apa Itu ngrok

ngrok itu tunneling tool. Lo jalanin local server di port berapa pun, terus jalanin ngrok yang nge-point ke port itu, dan ngrok kasih lo URL HTTPS yang bisa diakses publik. Siapapun yang punya URL itu bisa reach local server lo, seolah-olah udah di-deploy ke internet beneran.

TLS certificate, subdomain, sama routing-nya ditangani semua sama ngrok. Lo bakal dapet sesuatu kayak https://abc123.ngrok-free.app yang langsung ngarah ke localhost:3000 lo.

Buat testing OAuth, webhook, payment callback, atau apapun yang butuh domain beneran, ngrok ini jawaban yang pas.

Tiga Masalah yang Terselesaikan

Masalah 1: Google OAuth Minta Domain

OAuth flow-nya Google nggak mau terima localhost atau raw IP address sebagai redirect URI. Dia minta sesuatu kayak https://yourdomain.com/auth/callback.

Dengan ngrok, gue dapet URL HTTPS beneran dalam hitungan detik. URL itu gue tambahin ke Google Cloud Console sebagai authorized redirect URI, dan OAuth flow-nya langsung works di percobaan pertama.

Masalah 2: VS Code Remote SSH Sembunyiin Fitur Port Forwarding

Kalau lo pakai ekstensi Remote SSH di VS Code buat konek ke server, lo kehilangan akses ke fitur port forwarding bawaan. Fitur itu cuma works waktu project lo jalan langsung di local machine lo sendiri.

ngrok jalan langsung di remote server, jadi nggak bergantung sama VS Code sama sekali. Lo SSH ke server, start dev server, jalanin satu command ngrok, dan lo udah punya URL publik. Nggak perlu IDE apapun.

Masalah 3: Install Per-Project Itu Buang-Buang Waktu

Ada yang nyaranin install ngrok sebagai project dependency via npm atau yarn. Bisa sih, tapi lo harus install lagi di setiap project baru. Selain itu lo juga bikin node_modules lo tambah gemuk sama CLI tool yang sebenernya nggak ada hubungannya sama kode aplikasi lo.

Install ngrok secara global di sistem artinya lo install sekali dan langsung tersedia di mana aja, buat project apapun, selamanya. Itu pendekatan yang bener buat system utility kayak gini.

Install ngrok Global di Ubuntu 24

ngrok nyediain snap package resmi yang install system-wide. Caranya di Ubuntu 24 gini nih.

Pertama, install ngrok via snap:

sudo snap install ngrok

Selanjutnya, bikin akun gratis di ngrok.com. Setelah daftar, buka dashboard lo dan copy authtoken-nya. Terus connect instalasi ngrok lo ke akun lo:

ngrok config add-authtoken YOUR_AUTHTOKEN_HERE

Itu aja instalasi-nya. Nggak perlu npm, nggak perlu config di level project, nggak perlu urusin version.

Verifikasi works atau nggak:

ngrok version

Pake ngrok buat Local Development

Start dev server lo kayak biasa. Buat project Node mungkin kayak gini:

bun dev
# atau
npm run dev
# Server running on http://localhost:3000

Di terminal kedua, jalanin ngrok yang nge-point ke port itu:

ngrok http 3000

ngrok bakal output sesuatu kayak gini:

Session Status     online
Account            your@email.com (Plan: Free)
Version            3.x.x
Region             Asia Pacific (ap)
Latency            12ms
Web Interface      http://127.0.0.1:4040
Forwarding         https://abc123.ngrok-free.app -> http://localhost:3000

Copy URL Forwarding-nya dan pake di mana aja yang butuh domain beneran.

Setup Google OAuth dengan ngrok

Ini flow persis yang gue pake buat bikin Google OAuth works waktu local development.

Pertama, start dev server lo dan dapetin URL ngrok kayak yang udah dijelasin di atas.

Buka Google Cloud Console, buka project lo, navigasi ke Credentials, klik OAuth 2.0 Client ID lo. Di bawah Authorized redirect URIs, tambahin URL ngrok lo plus callback path yang diexpect sama app lo:

https://abc123.ngrok-free.app/auth/callback

Save. Perlu diingat, Google kadang butuh satu dua menit buat apply perubahannya.

Sekarang update environment variable aplikasi lo supaya pake URL ngrok:

# .env atau .env.local
NEXTAUTH_URL=https://abc123.ngrok-free.app
GOOGLE_REDIRECT_URI=https://abc123.ngrok-free.app/auth/callback

Restart dev server lo dan test OAuth flow-nya. Bakal works persis kayak di domain yang beneran sudah di-deploy.

Satu hal yang perlu lo tahu: free tier ngrok generate URL random baru setiap kali lo restart. Kalau ngrok lo restart, lo harus update lagi redirect URI di Google Cloud Console. Buat paid plan, lo bisa reserve static domain buat ngindarin ini.

Also Read: Setup OpenClaw di Server Remote: SSH Tunnel dan PM2

Web Inspector Bawaan ngrok

Waktu ngrok jalan, dia buka local web inspector di http://127.0.0.1:4040. Ini salah satu fitur yang paling useful buat development.

Setiap HTTP request yang masuk lewat tunnel lo ke-log di sini. Lo bisa liat full request dan response-nya, termasuk header dan body-nya. Kalau lo lagi debug webhook, lo bisa replay request apapun tanpa harus trigger event aslinya lagi. Ini kayak punya network inspector yang duduk di antara internet sama local server lo.

Jalanin ngrok di Background

Kalau lo nggak mau keep terminal window buat ngrok, lo bisa jalanin sebagai background process:

ngrok http 3000 &

Atau pake tool kayak screen atau tmux buat keep-nya di detached session:

screen -S ngrok
ngrok http 3000
# Tekan Ctrl+A terus D buat detach

Di remote server, pendekatan screen sering paling clean karena lo bisa balik ke sana kapanpun dengan screen -r ngrok.

Batasan Free Plan

ngrok beneran gratis buat kebanyakan use case development. Free plan-nya include:

Satu tunnel aktif dalam satu waktu
HTTPS tunnel (tanpa custom domain)
Random subdomain yang di-generate setiap sesi baru
40 koneksi per menit

Buat personal project dan local testing, batas-batas itu lebih dari cukup. Kalau lo butuh static domain atau beberapa tunnel sekaligus, paid plan-nya mulai sekitar $10 per bulan.

Also Read: Integrasi MCP MySQL: Build AI-Powered Database Apps yang Keren

Alternatif: Custom Domain dengan Static Config File

Kalau lo mau skip repotnya random subdomain, lo bisa bikin static ngrok config dan point ke reserved free static domain. ngrok sekarang kasih satu free static domain per akun.

Pertama, reserve free domain dari dashboard ngrok lo di Cloud Edge > Domains.

Terus buat atau edit config file ngrok lo:

# ~/.config/ngrok/ngrok.yml
version: "3"
agent:
    authtoken: YOUR_AUTHTOKEN_HERE

tunnels:
    myapp:
        proto: http
        addr: 3000
        domain: your-reserved-domain.ngrok-free.app

Start named tunnel-nya:

ngrok start myapp

Sekarang URL lo nggak bakal berubah antar sesi, jadi lo cukup config Google Cloud Console sekali aja.

Kesimpulan

ngrok nge-solve masalah spesifik dengan bersih. Google OAuth butuh domain, VS Code Remote SSH nggak expose port forwarding, dan install CLI tool per-project itu buang-buang effort. Install ngrok sekali secara global di Ubuntu 24 dengan snap butuh kurang dari dua menit dan sekarang works buat semua project yang gue jalanin di server itu.

Kalau lo lagi berurusan sama OAuth flow, webhook testing, atau apapun yang butuh local server lo keliatan kayak website beneran, ngrok worth buat dicoba deh. Free plan-nya udah cukup buat kerja nyata.