Halo, selamat datang di Ruang Developer Blog. Kali ini kita akan belajar bagaimana cara mengakses aplikasi localhost melalui internet ya.
Sebenarnya ada beberapa cara untuk mengakses aplikasi di localhost melalui internet, salah satunya adalah dengan metode tunneling. Tunneling adalah membuat koneksi antara komputer lokal dengan koneksi jarak jauh. Koneksi ini bertujuan untuk melakukan proxy trafik dari alamat IP dan URL yang dapat diakses secara publik menuju komputer lokal kamu.
Ngrok
Ada sebuah layanan tunneling yang lumayan banyak digunakan yaitu Ngrok. Pada kesempatan ini kita akan menggunakan Ngrok untuk melakukan tunneling pada aplikasi localhost kita agar dapat diakses melalui internet. Ngrok adalah layanan tunneling yang akan mengekspos port pada komputer lokal ke internet.
Install Ngrok (Windows)
Sebelum menginstall Ngrok, kita perlu mendaftar akun ke websitenya terlebih dahulu di ngrok.com. Pendaftarannya sangat mudah, kamu tinggal ikuti saja langkahnya kemudian login menggunakan akun kamu, masuk ke halaman seperti ini.
Silahkan download dengan klik tombol yang disediakan. Setelah selesai, ekstrak file arsip yang berisi file ngrok.exe hasil download kemudian buat sebuah folder kosong di dalam direktori C dengan nama terserah kamu (saya menggunakan nama ngrok). Letakkan file ngrok.exe hasil ekstrak sebelumnya ke dalam folder yang kamu buat, kemudian tambahkkan path folder yang kamu buat ke environment variabel windows agar perintah ngrok dapat dieksekusi di folder manapun dalam terminal.
Setelah ditambahkan ke environment variabel, buka terminal atau cmd kamu, lalu ketik perintah ngrok. Jika berhasil maka akan tampil kurang lebih seperti ini:
Sebelum kita bisa menggunakan ngrok, kita harus menghubungkan akun ngrok kita ke terminal. Caranya adalah dengan menjalankan perintah seperti berikut:
ngrok config add-authtoken <token>
Untuk tokennya sendiri kamu bisa dapatkan pada halaman dashboard akun ngrok kamu di websitenya.
Menggunakan Ngrok
Setelah installasi selesasi, saatnya kita coba untuk menggunakan ngrok untuk mengakses aplikasi kita yang ada di localhost.
Sebagai bahan percobaan, saya menggunakan starter project next js yang jalan pada port 3000. Kamu juga bisa menggunakan project lain misalnya aplikasi php kamu yang jalan di localhost dengan port 80.
Tunneling untuk port 3000
ngrok http 3000
Untuk kamu yang menggunakan port 80
ngrok http 80
Ketika perintah di atas dijalankan kita akan diberi sebuah url random oleh ngrok. Url inilah yang akan kita gunakan untuk mengakses aplikasi kita.
Pastikan aplikasi kamu di localhost sedang aktif. Gunakan url Forwarding yang diberikan ngrok untuk mengakses aplikasi.
Terkadang kamu akan mendapatkan peringatan keamanan seperti ini di chrome
Kamu bisa abaikan dengan cara klik details kemudian pilih “visit this unsafe site”.
Taraaa..!! aplikasi next js di localhost sudah bisa diakses melalui internet menggunakan url.
Aplikasi kamu akan tetap bisa diakses hingga kamu mematikan tunneling ngrok di terminal tadi.
Kamu juga bisa memantau request yang terjadi dengan cara mengunjungi url yang berlabel “Web interface” yaitu http://127.0.0.1:4040.
Bagaimana? Apakah kamu berhasil mengakses aplikasi kamu? Jika mengalami kesulitan jangan sungkan untuk berdiskusi di kolom komentar postingan ini ya…