Saat membuat website untuk customer, tidak semua perubahan perlu langsung masuk ke staging atau production. Kadang kita hanya ingin memperlihatkan progres homepage, form kontak, halaman checkout, atau dashboard yang masih berjalan di komputer development. Di situ ngrok bisa menjadi alat yang sangat praktis.
ngrok adalah agent command-line yang membuat endpoint publik dan meneruskan traffic dari internet ke aplikasi lokal kita. Dengan kata lain, website yang sedang berjalan di localhost bisa dibuka customer melalui URL HTTPS sementara. Ini berguna untuk demo cepat, testing webhook, review mobile, atau validasi fitur sebelum deploy.
Apa itu ngrok?
ngrok menyediakan agent ringan yang berjalan di komputer kita. Menurut dokumentasi resminya, agent ini meneruskan traffic dari endpoint yang dibuat di cloud service ngrok ke service aplikasi kita. Agent ngrok tersedia sebagai executable native, berjalan di sistem operasi besar, dan dipakai lewat CLI.
Contoh paling umum:
ngrok http 8080Jika aplikasi lokal berjalan di http://localhost:8080, command tersebut akan membuat URL publik. Customer bisa membuka URL itu dari browser, sementara request-nya diteruskan ke aplikasi lokal kita.
Kenapa ini berguna untuk customer review?
Dalam proyek website, feedback paling berguna biasanya muncul saat customer benar-benar mencoba halaman, bukan hanya melihat screenshot. Dengan ngrok, customer bisa klik menu, mengisi form, mencoba tampilan mobile, atau mengecek copywriting langsung dari browser mereka.
Beberapa skenario yang cocok:
- memperlihatkan website lokal sebelum deploy;
- mengetes webhook dari payment gateway, CRM, email service, atau platform eksternal;
- demo fitur form, checkout, booking, dashboard, atau area member;
- meminta customer review tampilan mobile dari perangkat mereka sendiri;
- mengecek bug yang hanya terlihat dari koneksi publik;
- melakukan review cepat sebelum perubahan dipindahkan ke staging.
Cara install dan setup awal
Berbeda dengan TryCloudflare yang bisa terasa lebih zero-config, ngrok biasanya perlu akun dan authtoken. Di quickstart resminya, ngrok menjelaskan kebutuhan dasarnya: akun ngrok, auth token dari dashboard, lalu install ngrok Agent CLI.
Setelah install, cek dari terminal:
ngrok helpLalu hubungkan agent ke akun ngrok:
ngrok config add-authtoken YOUR_TOKENGanti YOUR_TOKEN dengan authtoken dari dashboard ngrok. Jangan taruh token ini di artikel publik, screenshot publik, atau repo yang bisa diakses orang lain.
Jalankan di PowerShell, WSL, macOS, atau Linux?
Prinsipnya sama seperti tunnel tool lain: jalankan ngrok dari environment yang bisa mengakses aplikasi lokal.
Jika website berjalan dari Laragon, XAMPP, LocalWP, atau Node.js di Windows, jalankan ngrok dari PowerShell atau terminal Windows. Jika website berjalan di WSL, jalankan ngrok dari WSL agar alamat localhost tidak membingungkan.
Di macOS atau Linux, jalankan dari terminal yang sama atau environment yang bisa membuka URL aplikasi development.
Contoh:
| Website berjalan di | Terminal yang disarankan | Contoh command |
|---|---|---|
| Laragon/XAMPP/LocalWP di Windows | PowerShell | ngrok http 8080 |
| Node.js/Next.js di Windows | PowerShell | ngrok http 3000 |
| WordPress atau Laravel di WSL | WSL terminal | ngrok http 8000 |
| macOS/Linux lokal | Terminal biasa | ngrok http 8080 |
Contoh untuk WordPress lokal
Misalnya WordPress lokal berjalan di:
http://localhost:8000Maka command-nya:
ngrok http 8000Terminal ngrok akan menampilkan forwarding URL. URL itulah yang bisa dikirim ke customer untuk review sementara.
Untuk Next.js, biasanya:
ngrok http 3000Untuk Vite:
ngrok http 5173Untuk Laravel yang berjalan di port 8000:
ngrok http 8000Web interface dan request inspection
Salah satu fitur ngrok yang berguna untuk developer adalah web interface lokal. Saat agent berjalan, ngrok biasanya menyediakan interface lokal di http://127.0.0.1:4040. Dari sana kita bisa melihat request yang masuk, response, header, dan detail lain yang berguna untuk debugging.
Fitur seperti ini sangat membantu saat mengetes webhook. Misalnya payment gateway mengirim callback ke endpoint lokal, kita bisa melihat request yang masuk tanpa menebak-nebak dari log aplikasi saja.
ngrok vs TryCloudflare vs staging server
ngrok, TryCloudflare, dan staging server bisa dipakai untuk tujuan yang mirip, tetapi konteks terbaiknya berbeda.
| Aspek | ngrok | TryCloudflare | Staging server |
|---|---|---|---|
| Setup awal | Perlu install agent dan authtoken | Install cloudflared lalu jalankan quick tunnel | Perlu server, domain/subdomain, dan deploy workflow |
| URL | URL publik dari ngrok, bisa lebih stabil tergantung setup/plan | URL acak trycloudflare.com | Domain/subdomain stabil |
| Kekuatan utama | Developer tunnel, inspector, webhook testing, kontrol akses | Preview cepat tanpa banyak konfigurasi | Review formal dan environment yang mendekati production |
| Cocok untuk customer review | Cocok untuk review cepat dan debugging | Cocok untuk demo singkat | Cocok untuk review berulang dan approval final |
| Production | Bukan pengganti production biasa | Development/testing saja | Bisa menjadi bagian workflow production sebelum go-live |
Hal keamanan yang perlu diperhatikan
Saat memakai ngrok, aplikasi lokal kita bisa diakses dari internet melalui URL publik. Ini praktis, tetapi juga berarti kita harus disiplin.
Beberapa praktik yang sebaiknya dilakukan:
- gunakan data dummy saat demo;
- jangan expose halaman admin tanpa proteksi;
- jangan tampilkan credential, token, atau data customer asli;
- matikan tunnel setelah review selesai;
- gunakan autentikasi atau traffic policy jika akses perlu dibatasi;
- jangan kirim URL ke grup besar kalau tidak perlu;
- gunakan staging server untuk review yang panjang atau sensitif.
Dokumentasi ngrok juga menunjukkan bahwa akses bisa diamankan dengan Traffic Policy, misalnya memakai OAuth atau basic auth. Untuk proyek customer yang sensitif, fitur keamanan seperti ini lebih baik dipikirkan sejak awal, bukan setelah link terlanjur tersebar.
Kapan sebaiknya pakai ngrok?
Gunakan ngrok saat butuh akses publik cepat ke aplikasi lokal, terutama untuk testing webhook, debugging request eksternal, atau demo fitur yang belum perlu deploy. ngrok juga cocok saat kita ingin melihat bagaimana aplikasi lokal bereaksi saat diakses dari internet, bukan hanya dari browser di komputer sendiri.
Namun, untuk review yang melibatkan banyak stakeholder, berlangsung lama, atau butuh URL yang stabil, staging server tetap lebih tepat. Staging memberi kontrol lebih baik terhadap data, deployment, backup, permission, dan proses approval.
Kesimpulan
ngrok adalah alat yang sangat berguna untuk developer website. Dengan satu command seperti ngrok http 8080, aplikasi lokal bisa dibuka dari internet melalui URL HTTPS. Ini membuat proses preview ke customer, testing webhook, dan debugging integrasi menjadi jauh lebih cepat.
Tetap gunakan sesuai konteks. ngrok cocok untuk demo, testing, dan debugging. Untuk review formal atau pekerjaan jangka panjang, gunakan staging server yang lebih stabil dan terkontrol.
Referensi
- ngrok Agent CLI Quickstart, https://ngrok.com/docs/getting-started
- ngrok Agent documentation, https://ngrok.com/docs/agent
- ngrok Share Localhost use case, https://ngrok.com/use-cases/share-localhost
