Membuat Tunnel ke Server Localhost dengan ngrok

“Membuat Tunnel ke Server Localhost dengan ngrok?” “Apa 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 kunci lainnya yang disebutkan adalah:

  • Simplify mobile device testing
  • Build webhook integrations with ease
  • Run personal cloud services from your own private network

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:

  1. Pastikan server localhost sedang berjalan.

  2. Jalankan ngrok melalui command-line:
    2.1. Arahkan command-line ke direktori tempat ngrok.exe berada.
    2.2. Jalankan ngrok dengan command berikut:

    ngrok http 80

    Maksud command tersebut yaitu untuk menjalankan tunnel HTTP pada port 80.

  3. Tada! Server localhost sudah dapat diakses secara online melalui URL yang ditunjukkan di command-line seperti pada Gambar 1.

Gambar 1. Keterangan akun ngrok beserta URL localhost yang telah di-online-kan
Gambar 1. Keterangan akun ngrok beserta URL localhost yang telah di-online-kan (pada gambar ini, URL-nya adalah e4c9946e.ngrok.io)

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-mu 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 otentikasi 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.

Gambar 2. Website membutuhkan otentikasi berupa username dan password.
Gambar 2. Website membutuhkan otentikasi berupa username dan password.

Bonus: Mengatur virtual host Apache XAMPP untuk membuat tunnel hanya ke subdirektori spesifik

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:

  1. 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

  2. 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>
  3. Restart service Apache, kemudian jalankan ngrok dengan command:

    ngrok http -host-header=rewrite my-web-app.local:80

  4. 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.