Project weather logger part 7 : Ngrok http tunneling

Posted: 29 Juli 2017 in Otomasi dan Robotika
Tag:

Ngrok skema : sumber gambar ngrok.com

Ngrok skema : sumber gambar ngrok.com

Assalamu’alaikum Wr. Wb.
Oke saya lanjutkan. remind lagi ini adalah seri berantai dari posting berikut ya

  1. https://tarecha.wordpress.com/2015/10/26/project-raspberry-pi/
  2. https://tarecha.wordpress.com/2017/06/05/project-weather-logger-part-1/
  3. https://tarecha.wordpress.com/2017/06/26/project-weather-logger-part-2-tambahan-sensor-tekanan-udara/
  4. https://tarecha.wordpress.com/2017/07/01/project-weather-logger-part-3-komunikasi-udp/
  5. https://tarecha.wordpress.com/2017/07/15/project-weather-logger-part-4-simpan-di-server-mysql/
  6. https://tarecha.wordpress.com/2017/07/24/project-weather-logger-part-5-view-data-dan-export/
  7. https://tarecha.wordpress.com/2017/07/25/project-weather-logger-part-6-plot-graphic/

 

web servernya bisa langsung diakses di sini ya http://weatherlogger.ap.ngrok.io/

oke kita lanjutkan part 7 yaitu http tunelling.  ingat gambar berikut ? ada garis yang akses langsung ke raspberry nya. ada gmbar tunelling ke raspberry pi akses port 80 melalui browser. tentu ini kalau raspinya ada internetnya. karena dirumah gk ada internet kabel. saya pakai thetering hp. jadi tunneling ini akan bekerja kalau saya aktifkan theteringnya. kalau mau aktif terus ya langganan internet. tapi mahal he he. karena itu next chapter akan melakukan sync data dari raspberry pi ke web hosting yang datanya otomatis tersyncronize saat raspi tersambung internet. user bisa lihat 24jam/7hari ke slave server itu.

 

Big Picture System

Big Picture System

1. Ngrok.com http tunneling

Tujuannya adalah seperti gambar diatas. karena raspi menggunakan IP LOCAL sehingga gk bisa diakses melalui internet maka diperlukan http tunelling agar bisa diakses langsung ke raspi secara real time. kita buat http tunelling pakai ngrok.com. intinya kita menembus firewall .dan mempublis port 80 kita ke public

Ngrok skema : sumber gambar ngrok.com

Ngrok skema : sumber gambar ngrok.com

buka https://ngrok.com/ buat akun dan silahkan login.

Download sesuai sistem yang digunakan. saya menggunakan raspberry pi jadi download yang linux ARM ya. ekstrak dan taruh di desktop raspberry pi

rubah permissionnya jadi 777 dengan klik kanan dan permission any one

rubah properties ngrok

rubah properties ngrok

2. buat file di desktop ngrokstart.sh

dan pastikan 777 juga

permission ngrokstart.sh

permission ngrokstart.sh

isinya sbb

ngrok start

ngrok start

argumennya yang lengkap bisa di baca di dokumentasinya. http 80 berart yang di exspose port 80 -subdomain saya pakai weatherlogger sebagai nama -region ap (asia pasific / mengarah ke server singapore yang dekat) -auttoken kode token diperoleh dari sini

auth token

auth token

lalu klik 2x ngrokstart.sh akan jalan seperti ini

tunnel yang jalan

tunnel yang jalan

dan web saya bisa diakses langsung deh di http://weatherlogger.ap.ngrok.io

hasil expose

hasil expose

dan bisa dilihat bahwa alamatnya udah jadi weatherlogger.ap.ngrok.io , kecepatannya tergantung kecepatan koneksi hp nya. dan hanya nyala kalau theteringnya nyala

 

3. edit base_url

ada yang perlu diedit sedikit agar link nya mengarah ke nama server yang benar ketika diakses localhost , same LAN, ataupun expose http tunelling. kalau tidak nanti link nya mengarah ke localhost pc client

edit config ci

edit config ci

edit sebagai berikut


$root = "http://".$_SERVER['HTTP_HOST'];
$root .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$config['base_url'] = "$root";

sehingga ketika diakses base url nya bisa ganti otomatis

akses localhost raspi

akses localhost raspi linknya jadi localhost

 

akses same LAN pakai laptop

akses same LAN pakai laptop linknya jadi alamat IP 192.168.3.199

 

hasil expose linknya

hasil expose link jadi weahterlogger.ap.ngrok.io

hasil expose link jadi weahterlogger.ap.ngrok.io

 

sekian dulu.

next chapter

8. sync data

 

Wassalamu’alaikum Wr. Wb.

Iklan

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s