{"id":11238,"date":"2020-12-26T00:00:00","date_gmt":"2020-12-26T00:00:00","guid":{"rendered":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/26\/membuat-aplikasi-localhost-dapat-di-akses-oleh-public-dengan-ngrok\/"},"modified":"2024-09-24T02:20:16","modified_gmt":"2024-09-24T02:20:16","slug":"membuat-aplikasi-localhost-dapat-di-akses-oleh-public-dengan-ngrok","status":"publish","type":"post","link":"https:\/\/binus.ac.id\/binus-digital\/2020\/12\/26\/membuat-aplikasi-localhost-dapat-di-akses-oleh-public-dengan-ngrok\/","title":{"rendered":"Membuat Aplikasi Localhost dapat di akses oleh Public dengan Ngrok"},"content":{"rendered":"<p>Selama ini, agar aplikasi atau website yang sudah kita buat dari Localhost dapat dilihat oleh client atau user public (internet) harus diupload dahulu ke server atau hosting. Sekarang sudah ada solusi agar URL Localhost kita dapat diakses oleh publik yaitu menggunakan <a href=\"https:\/\/ngrok.com\/\">Ngrok<\/a>.<\/p>\n<p><strong>Apa itu Ngrok?<\/strong> Dari website Ngrok, Ngrok mengekspos server lokal di belakang NAT dan firewall ke internet publik melalui terowongan (tunnels) yang aman. Tunnels tersebut yang digunakan sebagai jalur untuk mengakses URL Localhost kita.<\/p>\n<p>Ngrok baik digunakan untuk:<\/p>\n<ul>\n<li>Menjalankan layanan Personal Cloud Services dari rumah.<\/li>\n<li>Membuat website demo tanpa deploy.<\/li>\n<li>Membangun webhook konsumen di mesin Development Anda.<\/li>\n<li>Melakukan test Mobile App yang terkoneksi ke local backend yang sedang berjalan (Localhost).<\/li>\n<li>Alamat yang stabil untuk device Anda yang telah terhubung.<\/li>\n<\/ul>\n<p><strong>Bagaimana cara menggunakan Ngrok?<\/strong><\/p>\n<p><strong>01.<\/strong> <strong>Daftar Akun<\/strong> Pertama, kita perlu menginstall terlebih dahulu aplikasi Ngrok nya. Buka website <a href=\"https:\/\/ngrok.com\/\">Ngrok<\/a> atau ketik <a href=\"https:\/\/ngrok.com\/\">https:\/\/ngrok.com\/<\/a> di address bar browser Anda. Setelah itu pilih menu Login atau Signup. Saya pilih Login karena saya akan login menggunakan akun <a href=\"https:\/\/github.com\/\">Github<\/a>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone wp-image-8227 size-full\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-5.35.45-AM.png\" alt=\"\" width=\"696\" height=\"667\" \/><\/p>\n<p><strong data-rich-text-format-boundary=\"true\">02.<\/strong> <strong>Download Software<\/strong><br data-rich-text-line-break=\"true\" \/>Setelah Signup dan Login, kita akan masuk ke halaman Dashboard Ngrok seperti tampilan berikut:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-8228\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-6.50.32-AM-768x315.png\" alt=\"\" width=\"768\" height=\"315\" \/><\/p>\n<p>Klik button &#8220;Download for Mac OS&#8221; untuk mendownload software Ngrok. Setelah selesai di download, unzip file yang telah didownload tersebut. Lalu letakan file tersebut di folder Application.<\/p>\n<p>Kalau sudah, buka Terminal lalu ketik perintah berikut:<\/p>\n<pre># cd into your local bin directory\r\n$ cd \/usr\/local\/bin\r\n\r\n# create symlink\r\n$ ln -s \/Applications\/ngrok ngrok<\/pre>\n<p>Untuk mengetahui bahwa Ngrok sudah terinstall, bisa Anda test dengan ketik perintah &#8220;ngrok -v&#8221; untuk melihat versi Ngrok yang terinstall.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-8230\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-6.14.33-AM-523x342.png\" alt=\"\" width=\"523\" height=\"342\" \/><\/p>\n<p>Jika keluar informasi versi Ngrok seperti gambar diatas, kita sudah berhasil install Ngrok di komputer kita.<\/p>\n<p><strong>03.<\/strong>\u00a0<strong>Daftarkan Token<\/strong><br \/>Langkah selanjutnya adalah mendaftarkan akun kita pada service Ngrok dengan menginput token yang ada di Dashboard Ngrok kita.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-8233\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-6.51.13-AM-768x168.png\" alt=\"\" width=\"768\" height=\"168\" \/><\/p>\n<p>Cara nya dengan ketik perintah berikut di Terminal.<\/p>\n<pre>$ ngrok authtoken YOUR_ACCESS_TOKEN<\/pre>\n<p>Ganti \u201cYOUR_ACCESS_TOKEN\u201d dengan token Anda ya. Setelah itu tekan tombol Enter, nanti akan tampil pesan di Terminal seperti berikut:<\/p>\n<pre class=\"wp-block-preformatted\">Authtoken saved to configuration file: \/Users\/adminkmi\/.ngrok2\/ngrok.yml<\/pre>\n<p><strong>04. Jalankan Ngrok!!<\/strong><br \/>Langkah terakhir adalah jalankan Ngrok. Tentukan port URL Localhost Anda yang ingin diakses oleh publik, secara default akan diarahkan ke port 80. Ketik perintah berikut agar URL Localhost Anda dapat diakses oleh user publik.<\/p>\n<pre class=\"wp-block-preformatted\">$ ngrok http 80<\/pre>\n<p>80 Adalah port dari URL Localhost Anda, silahkan diganti dengan port yang sesuai dengan aplikasi atau website Anda yang ada di Localhost. Setelah menjalankan perintah tersebut, akan tampil informasi seperti berikut.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-8235\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-6.28.26-AM-585x342.png\" alt=\"\" width=\"585\" height=\"342\" \/><\/p>\n<p>Pada informasi tersebut terdapat link\u00a0<a href=\"http:\/\/cdb09db8a1bc.ngrok.io\/\">http:\/\/cdb09db8a1bc.ngrok.io<\/a>\u00a0yang akan digunakan untuk mengakses URL http:\/\/localhost:80 di komputer saya. Hasilnya akan seperti ini:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-medium wp-image-8237\" src=\"http:\/\/binus.ac.id\/knowledge\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-20-at-6.33.53-AM-641x342.png\" alt=\"\" width=\"641\" height=\"342\" \/><\/p>\n<p>Jika sudah bisa diakses seperti gambar diatas, Anda telah berhasil meng-online-kan aplikasi atau website dari Localhost Anda tanpa perlu upload dahulu ke hosting dan sebagainya.<\/p>\n<p>Sekian artikel kali ini, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Selama ini, agar aplikasi atau website yang sudah kita buat dari Localhost dapat dilihat oleh client atau user public (internet) harus diupload dahulu ke server atau hosting. Sekarang sudah ada solusi agar URL Localhost kita dapat diakses oleh publik yaitu menggunakan Ngrok. Apa itu Ngrok? Dari website Ngrok, Ngrok mengekspos server lokal di belakang NAT [&hellip;]<\/p>\n","protected":false},"author":20,"featured_media":11239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[77],"tags":[],"class_list":["post-11238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles"],"_links":{"self":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/comments?post=11238"}],"version-history":[{"count":1,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11238\/revisions"}],"predecessor-version":[{"id":11809,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/posts\/11238\/revisions\/11809"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media\/11239"}],"wp:attachment":[{"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/media?parent=11238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/categories?post=11238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/binus.ac.id\/binus-digital\/wp-json\/wp\/v2\/tags?post=11238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}