Panduan Konfigurasi Layanan Reverse Proxy Ngrok di ServBay

Ngrok adalah alat yang kuat untuk mengekspos layanan web lokal Anda ke internet secara aman. Dengan integrasi Ngrok di ServBay, Anda dapat dengan mudah membuat tunnel publik yang aman untuk situs pengembangan lokal, sangat ideal untuk demo proyek, pengujian webhook, atau berbagi karya Anda dengan anggota tim di luar jaringan Anda. Panduan ini akan memaparkan langkah-langkah detail cara mengonfigurasi dan menggunakan layanan reverse proxy Ngrok di ServBay.

Gambaran Umum

ServBay menyediakan dukungan bawaan untuk Ngrok, sehingga proses instalasi dan konfigurasinya menjadi lebih sederhana. Anda dapat mengelola tunnel Ngrok langsung dari antarmuka grafis ServBay, memetakan situs web lokal yang dihosting di ServBay ke URL publik sementara.

Skenario Penggunaan

• Demo untuk Klien: Menunjukkan situs web yang sedang dikembangkan di komputer lokal Anda kepada klien secara langsung.
• Pengembangan Webhook: Menguji layanan pihak ketiga (seperti payment gateway atau API) yang memerlukan URL callback publik.
• Pengujian Aplikasi Mobile: Memungkinkan perangkat mobile mengakses backend API lokal Anda lewat URL publik.
• Kolaborasi Tim: Berbagi akses lingkungan pengembangan lokal secara sementara dengan anggota tim lain.

Prasyarat

1. ServBay Terinstal: Pastikan ServBay telah berhasil diinstal dan berjalan di sistem macOS Anda.
2. Akun Ngrok: Anda membutuhkan akun Ngrok. Kunjungi Situs Resmi Ngrok untuk mendaftar akun gratis maupun berbayar.
3. Situs Web Lokal: Setidaknya sudah ada satu situs web lokal yang ditambahkan dan berjalan di ServBay, misalnya servbay.demo.

Langkah-Langkah

1. Instal Paket Ngrok di ServBay

Sebelum pertama kali menggunakan Ngrok, Anda perlu menginstalnya di ServBay:

1. Buka aplikasi ServBay.
2. Di sidebar sebelah kiri, klik Packages (Paket).
3. Temukan atau cari Ngrok pada daftar paket.
4. Klik tombol instal di samping Ngrok.
5. Setelah instalasi selesai, coba klik tombol saklar di sebelah kanan Ngrok untuk menyalakan layanan. Karena Ngrok belum dikonfigurasi, layanan mungkin gagal dijalankan atau statusnya tampak tidak normal. Ini wajar, kita akan melakukan konfigurasi pada langkah berikutnya.

2. Dapatkan Ngrok Authtoken Anda

Ngrok menggunakan Authtoken untuk memverifikasi akun Anda dan memberikan hak akses ke layanannya.

1. Kunjungi Ngrok Dashboard dan login ke akun Ngrok Anda.

2. Setelah login, pada sidebar dashboard, cari Your Authtoken di bawah menu "Getting Started".

3. Salin Authtoken Anda. Ini adalah string panjang yang harus disimpan dengan aman.

   

3. Konfigurasi Ngrok di ServBay

Setelah mendapatkan Authtoken, kembali ke ServBay untuk konfigurasi:

1. Pada sidebar kiri ServBay, klik Tunnel.

2. Pada daftar layanan Tunnel, pilih ngrok.

   

3. Auth Token (Token Otorisasi):

   • Tempelkan Ngrok Authtoken yang sudah disalin dari langkah sebelumnya ke kolom Auth Token.

4. Konfigurasi Tunnel (Local Domain dan External Domain): ServBay memungkinkan Anda membuat tunnel Ngrok untuk beberapa situs web lokal.

   • Local Domain (Situs Lokal):
     • Klik dropdown dan pilih situs lokal yang ingin Anda ekspos ke publik melalui Ngrok. Daftar ini otomatis memuat semua situs Anda di ServBay, seperti servbay.test atau servbay.demo.
   • External Domain (Domain Eksternal):
     • Untuk pengguna Ngrok gratis: Biarkan field ini kosong. Ngrok akan secara otomatis menghasilkan URL publik acak dengan akhiran seperti .ngrok-free.app (atau suffix domain gratis lain yang disediakan Ngrok). Ketika tunnel berhasil berjalan, ServBay akan secara otomatis menampilkan URL yang dihasilkan di sini.
     • Untuk pengguna Ngrok berbayar: Jika Anda telah mengonfigurasi custom domain atau reserved domain di akun Ngrok Anda, isikan domain eksternal pilihan Anda di sini.

5. Tambah Tunnel Baru:

   • Ingin membuat tunnel untuk lebih dari satu situs web lokal? Klik tombol + (plus) di samping entri tunnel yang sudah ada untuk menambah konfigurasi tunnel baru. Ulangi langkah 4 untuk memilih situs lokal dan domain eksternal baru.

6. Simpan Pengaturan:

   • Setelah semua siap, klik tombol Save (Simpan) di kanan bawah.

4. Menyalakan dan Memverifikasi Layanan Ngrok

1. Setelah menyimpan konfigurasi, ServBay akan mencoba menyalakan layanan Ngrok dengan pengaturan baru Anda.
2. Perhatikan indikator status di samping entri layanan ngrok. Jika konfigurasi benar dan layanan Ngrok berhasil terhubung, indikator akan berubah menjadi hijau menandakan layanan berjalan normal.
3. Untuk setiap tunnel yang berhasil dijalankan, field External Domain (jika tadi dikosongkan) kini akan memunculkan URL publik random dari Ngrok.
4. Verifikasi Akses:
   • Klik ikon salin di samping domain eksternal untuk menyalin URL ke clipboard.
   • Atau klik ikon browser (biasanya ikon kompas atau globe) untuk membuka URL publik di browser default Anda.
   • Jika semuanya berjalan lancar, Anda dapat mengakses situs lokal melalui URL Ngrok publik tersebut.

5. Manajemen Tunnel Ngrok

Pada halaman konfigurasi Ngrok di ServBay:

• Menyalin Domain Eksternal: Klik ikon salin untuk memudahkan berbagi URL.
• Buka di Browser: Klik ikon browser untuk pengujian cepat.
• Tambah Tunnel: Klik ikon +.
• Hapus Tunnel: Klik ikon - (minus) untuk menghapus konfigurasi tunnel yang tidak diperlukan.
• Matikan Layanan: Klik saklar di samping layanan ngrok untuk mematikan layanan sepenuhnya. Klik lagi untuk menyalakan kembali.

Catatan Penting

• Batasan Ngrok Versi Gratis: Domain eksternal Ngrok pada versi gratis bersifat dinamis—bisa berubah setiap kali layanan atau tunnel di-restart. Versi gratis juga memiliki batas koneksi, bandwidth, dan durasi pemakaian. Untuk menggunakan domain tetap dan fitur lebih lanjut, pertimbangkan upgrade ke akun berbayar.
• Status Layanan Lokal: Pastikan situs lokal yang Anda pilih pada field Local Domain benar-benar aktif di ServBay (pastikan versi PHP, web server Nginx/Apache sudah aktif dan konfigurasi situs benar). Ngrok hanya meneruskan trafik; tidak dapat menyalakan atau memperbaiki layanan lokal Anda.
• Firewall: Pastikan firewall macOS atau software keamanan pihak ketiga tidak memblokir koneksi jaringan ServBay atau Ngrok.
• HTTPS: Ngrok secara default menyediakan tunnel HTTPS, sangat mendukung kebutuhan pengembangan dan pengujian web masa kini.

FAQ (Pertanyaan Umum)

• Q: Layanan Ngrok gagal dijalankan, indikator status merah atau oranye. Apa yang harus saya lakukan?
  • A: Periksa terlebih dahulu apakah Authtoken Ngrok sudah benar. Pastikan juga koneksi internet Anda stabil dan bisa mengakses situs resmi Ngrok. Lihat log Ngrok (ikon log di samping layanan) untuk pesan kesalahan yang lebih detail.
• Q: Saya pengguna gratis Ngrok, mengapa field External Domain kosong atau bertuliskan "Leave blank if you're a free user"?
  • A: Ini adalah perilaku normal. Pengguna versi gratis tidak perlu mengisi field tersebut. Begitu tunnel sukses dijalankan, ServBay akan otomatis menampilkan URL publik random dari Ngrok pada field ini.
• Q: Apakah saya bisa menggunakan Ngrok bersamaan dengan layanan tunnel lain (seperti frp, Cloudflared)?
  • A: ServBay mendukung pemasangan dan konfigurasi beberapa layanan tunnel berbeda. Anda bisa memilih mana yang ingin diaktifkan sesuai kebutuhan, tetapi menjalankan beberapa tunnel sekaligus untuk satu situs mungkin mempersulit konfigurasi atau menyebabkan konflik rute jaringan—pastikan Anda memahami alur trafiknya.

Kesimpulan

Integrasi Ngrok di ServBay membuat proses mengekspos lingkungan pengembangan web lokal di macOS ke publik menjadi jauh lebih mudah. Untuk demo, pengujian webhook, atau kolaborasi tim, fitur Ngrok di ServBay menawarkan solusi yang praktis dan efisien. Pastikan Anda mengonfigurasi domain eksternal sesuai tipe akun Ngrok (gratis atau berbayar), serta selalu memeriksa agar layanan situs lokal tetap berjalan agar dapat diakses melalui tunnel yang telah dibuat.