“Membuat tunnel ke server localhost dengan ngrok? …apa sih maksudnya?”
Mungkin itulah yang muncul di dalam benakmu ketika membaca judul postingan ini karena maknanya sulit untuk dicerna. Jadi begini, secara sederhana, artinya adalah mengkoneksikan localhost ke internet. Ya, itulah makna tersirat dari judul tersebut.
Bagi kamu yang sedang coding entah itu dalam bentuk programming maupun website development di server localhost dan ingin meng-online-kannya untuk memamerkan hasil karyamu secara langsung ataupun ketika ingin menanyakan suatu error yang ada pada program, maka ngrok adalah jawabannya.
Membuat tunnel ke server localhost dengan ngrok
Apa sih ngrok itu? Kegunaannya untuk apa?
ngrok allows you to expose a web server running on your local machine to the internet. Just tell ngrok what port your web server is listening on.
Pada halaman resminya, dapat ditemukan bahwa salah satu key feature-nya adalah untuk mendemokan aplikasi yang berada di localhost tanpa harus repot men-deploy ataupun mengunggah aplikasi ke hosting.
Don’t constantly redeploy your in-progress work to get feedback from clients. ngrok creates a secure public URL (https://yourapp.ngrok.io) to a local webserver on your machine. Iterate quickly with immediate feedback without interrupting flow.
Beberapa fitur utama lainnya yang disebutkan adalah:
- Menyederhanakan testing web di perangkat mobile
- Memudahkan integrasi webhook
- Menjalankan layanan personal cloud dari private network milik sendiri
Persiapan dan langkah-langkah
Sebelum memulai semuanya, siapkan aplikasi ngrok yang dapat diunduh di sini. Setelah diunduh, ekstrak file zip nya ke direktori yang kamu inginkan.
Dan berikut ini adalah langkah-langkah yang telah saya persiapkan agar kamu bisa memulai meng-online-kan website-mu yang berada di server localhost:
- Pastikan server localhost sedang berjalan.
- Jalankan ngrok melalui command-line:
- Arahkan command-line ke direktori tempat ngrok.exe berada.
- Jalankan tunnel HTTP ngrok pada port 80 dengan command berikut:
ngrok http 80
- Tada! Server localhost sudah dapat diakses secara online melalui URL yang ditunjukkan di command-line seperti pada Gambar 1.
Catatan: Pada Gambar 1 terdapat nama saya (Rizki Pratama) karena saya telah mengaitkan aplikasi ngrok dengan akun yang telah saya daftarkan di sana. Kamu bisa register akun ngrok secara gratis di sini. Untuk mengaitkan akun ngrok dengan aplikasi, baca di sini. Dengan memiliki akun tersebut, kamu akan mendapatkan fitur lebih lanjut seperti mengecek status tunnel, menambahkan tim ke akun kamu, dan kamu juga bisa menggunakan domain name milikmu sendiri (fitur berbayar).
Menggunakan authentication untuk proteksi dari pihak yang tidak diinginkan
Pada langkah-langkah yang telah saya jelaskan, ngrok hanya mengekspos localhost ke internet begitu saja tanpa keamanan apapun. Bagaimana jika seseorang mengetahui URL-mu sehingga dapat mengaksesnya dan mencuri hasil development-mu?
Tenang saja, ngrok memiliki fitur autentikasi dengan mengatur credential berupa username dan password untuk melindungi akses terhadap konten localhost sehingga hanya orang yang kamu bagikan credential-nya saja yang dapat mengaksesnya.
Bila sebelumnya command untuk menjalankan ngrok hanya ngrok http 80, sekarang command nya adalah:
ngrok http -auth "user:password" 80
Ganti user dan password masing-masing dengan username dan password yang kamu inginkan.
Ketika orang mengakses URL-mu, maka mereka akan diminta untuk memasukkan username dan password dalam bentuk form seperti pada Gambar 2.
Bonus: Mengatur virtual host Apache XAMPP untuk membuat tunnel hanya ke subdirektori tertentu
Jika kamu tidak ingin mengekspos semua web app yang ada di dalam direktori htdocs dan hanya ingin meng-online-kan satu web app saja, kamu bisa kok melakukannya. Ikuti langkah-langkah berikut:
- Edit host file Windows (C:\Windows\System32\drivers\etc\hosts), tambahkan mapping IP local (127.0.0.1) dengan host name yang kamu inginkan. Pada contoh ini, saya menggunakan host name
my-web-app.local. Maka baris yang perlu kamu tambahkan di sana adalah:
127.0.0.1 my-web-app.local
- Edit file konfigurasi virtual host Apache (direktori XAMPP\apache\conf\extra\httpd-vhosts.conf), tambahkan script berikut:
<VirtualHost *:80>
#ServerName diisi dengan host name yang telah kamu buat di langkah sebelumnya
ServerName my-web-app.local
#DocumentRoot diisi dengan string direktori tempat aplikasi kamu berada
DocumentRoot "D:/XAMPP/htdocs/my-web-app"
SetEnv APPLICATION_ENV "development"
#Directory, sama halnya dengan DocumentRoot
<Directory "D:/XAMPP/htdocs/my-web-app">
DirectoryIndex index.php
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>
- Restart service Apache, kemudian jalankan ngrok dengan command:
ngrok http -host-header=rewrite my-web-app.local:80
- Selesai! URL ngrok akan mengarah ke host name my-web-app.local, yang tentunya mengarah ke direktori D:\XAMPP\htdocs\my-web-app.
Sekian tulisan mengenai cara membuat tunnel ke server localhost dengan ngrok. Jika kamu mengalami masalah ataupun kesulitan, jangan segan untuk bertanya via kolom komentar.
