Wander Computindo, pengembang sistem website Indonesia. Jasa Pembuatan Website Perusahaan & Personal, Jasa Pembuatan Aplikasi Database Website, Jasa Pembuatan Aplikasi Custom, Jasa Perbaikan Program Aplikasi Website.

Home > Tutorial > Cara Mengakses Localhost Online Melalui Internet Dengan Ngrok

Cara Mengakses Localhost Online Melalui Internet Dengan Ngrok

Membuat Tunnel ke Server Localhost dengan layanan ngrok?

Anda memiliki project offline yang sedang dikerjakan di server localhost komputer anda? Lalu ingin mengakses localhost anda melalui internet? Mungkin untuk melakukan demo atau menunjukkan karya programmu ke publik? Bagaimana bisa? Jawabannya adalah bisa, yaitu salah satunya menggunakan Tunnel layanan ngrok.

ngrok.ciom

Apa itu layanan ngrok?

Dikutip dari halaman resminya ngrok.com,

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.

ngrok.com

artinya:
ngrok memungkinkan Anda mengekspos server web yang berjalan di mesin lokal Anda ke internet. Cukup beri tahu Anda port apa yang didengarkan server web Anda.

Pada situs 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.

ngrok.com

artinya:
Jangan terus-menerus memindahkan pekerjaan Anda yang sedang berlangsung untuk mendapatkan umpan balik dari klien. ngrok membuat URL publik yang aman (https://yourapp.ngrok.io) ke server web lokal di mesin Anda. Iterasi dengan cepat dengan umpan balik langsung tanpa mengganggu aliran.

Apa saja fitur yang diberikan oleh ngrok?

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

Persiapan dan langkah-langkah membuat Tunnel

Sebelum memulai semuanya, siapkan aplikasi ngrok yang dapat diunduh di https://ngrok.com/download. Setelah diunduh, ekstrak file zip nya ke direktori yang anda inginkan.

Dan berikut ini adalah langkah-langkah yang telah kami persiapkan agar anda bisa memulai meng-online-kan website-offline 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.

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

Command Ngrok

Catatan: Pada Gambar 1 terdapat nama kami (WANDER COM ID) karena kami telah mengaitkan aplikasi ngrok dengan akun yang telah kami daftarkan di sana. anda bisa register akun ngrok secara gratis di https://dashboard.ngrok.com/user/signup. Untuk mengaitkan akun ngrok dengan aplikasi, baca di https://dashboard.ngrok.com/get-started. Dengan memiliki akun tersebut, anda akan mendapatkan fitur lebih lanjut seperti mengecek status tunnel, menambahkan tim ke akun anda, dan anda juga bisa menggunakan domain name-mu sendiri (fitur berbayar).

Menggunakan authentication untuk proteksi dari pihak yang tidak diinginkan

Pada langkah-langkah yang telah kami 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 anda 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 anda inginkan.

Ketika orang mengakses URL tersebut, maka mereka akan diminta untuk memasukkan username dan password dalam bentuk form seperti pada Gambar berikut.

Auth Ngrok

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

Jika anda tidak ingin mengekspos semua web app yang ada di dalam direktori htdocs dan hanya ingin meng-online-kan satu web app saja, anda 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 anda inginkan. Pada contoh ini, saya menggunakan host name my-web-app.local. Maka baris yang perlu anda 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.

Itulah Cara Mengakses Localhost Online Melalui Internet Dengan Ngrok semoga bermanfaat.

Silahkan sesuaikan dengan nama directory project anda!

Star Rating:

Beri penilaian bintang untuk ini !

Average rating / 5. Vote count:

Kami senang atas respon anda...

Ikuti kami di sosial media untuk update terbaru!

Maaf atas ketidakpuasan anda!

Biarkan kami memperbaiki kesalahan!

Bagikan ke teman:

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Share!