DevOps Expert | Haproxy – High Performance Load Balancer Server

haproxy load balancer server

Kapan Anda harus menggunakan Haproxy?

Ketika ribuan pengguna mengakses situs atau aplikasi web ataupun sejenisnya pada waktu bersamaan, sehingga trafic yang tinggi yang membuat server anda overload (down) karena tidak dapat menampung request yang diterima, maka haproxy dapat menjadi solusi bagi anda.

Bayangkan kalo anda cuma punya 1 server yang dipakai untuk menangani semua request yg sudah terlanjut buanyaaak bgt… disisi lain spec server sudah mentok g bisa di upgrade lagi. sudah tidak memungkinkan untuk vertical scaling. maka sudah saat nya untuk melakukan horisontal scaling. yap… dengan Haproxy kita dapat membuat horisontal scaling untuk menghajar mengatasi trafic yang tinggi.

Teknik ini dikenal dengan load balancing. Jadi load balancing adalah teknik untuk melakukan distribusi beban trafik pada dua atau lebih jalur koneksi secara seimbang sehingga setiap jalur koneksi akan menerima beban trafik yang sama. yap begitulah cara kerja load balancing.

Apa itu Haproxy?

HAProxy adalah project open source dibawah GPLv2 license. Haproxy atau kepanjangan dari High Availability Proxy adalah loadbalancer TCP/IP dan proxy server yang dapat membagi beban request yang datang kepada multi node server. sehingga beban server akan dibagi kepada node server yang ada.

Pembagian beban nya pun bermacam-macam cara ada yang sama rata, ada yang berdasarkan beban trafic dan lain nya. akan kita pelajari algoritma pembagian beban request  ini selanjutnya. Jadi haproxy ini adalah perantara antara client/user dengan server (web/database/dll) sehingga disebut juga dengan haproxy reverse proxy.

Haproxy tidak hanya bisa untuk web load balancing namun juga yang lain seperti smtp load balancing atau mysql load balancing.

Bagaimana cara kerja Haproxy?

Load balance pada web server dapat dilakukan dengan 2 macam yaitu pada Layer 4 (transport layer) dan Layer 7 (application layer). Layer 4 lebih sederhana karena pembagian hanya berdasarkan range IP dan port. Pada layer 7 pembagian lebih kompleks sampai pembagian trafic berdasarkan url tertentu, dsb.

User akan mengirimkan request kepada load balancer (haproxy) kemudian diteruskan (forward) ke node (web server) lain. Teknik load balancing yang sering digunakan adalah roundrobin dan least connection. RoundRobin adalah cara yang menganggap bahwa semua beban server sama, jadi setiap server yang ada di akses secara bergantian dan berurutan, sedangkan Least Connection hanya mengalihkan beban ke server yang dianggap kosong atau trafficnya rendah.

di dalam haproxy terdapat 2 bagian (side) yakni frontend dan backend. koneksi yang datang dari user akan di terima oleh bagian frontend untuk di olah/filter sesuai rule frontend, jika lolos maka paket di lanjutkan ke backend untuk di oleh/filter sesuai rule backend selanjutnya akan di putuskan untuk kirim ke node tertentu sesuai strategi yang di pakai backend. Jadi frontend hanya mengurusi client/users dan backend mengurusi node server.
haproxy ada 2 mode dalam operasinya yakni HTTP close mode dan HTTP keep-alive mode.

Mengapa harus Haproxy?

Sebenarnya untuk melakukan load balancing trafic pada server ada beberapa alternative lain seperti Nginx, LVS / IPVS, varnish, dll. Namun haproxy memang khusus dibuat untuk keperluan ini, mature, reliable dan high performance. Disamping dia mempunyai fitur-fitur pendukung lain tentunya.

Haproxy hanya menggunakan 15% dari processing time penggunaan CPU dengan HTTP close mode dan sekitar 30% jika menggunakan HTTP keep-alive mode. Itu artinya secara global haproxy mempunyai impact yang besar dalam performa namun kecil dalam penggunaan resource.

Dengan load balancing maka yang akan menerima request tidak hanya 1 server, sehingga mempercepat waktu response sebuah web. 1 web server dapat menerima banyak request, sedangkan 1 server biasanya kita memiliki 1 web server, bayangkan saja jika kita mempunyai 3 dan masing – masing server mempunyai 1 web server maka waktu response sebuah web akan meningkat 3 kali lipat. Kesimpulan nya dengan haproxy dapat mempercepat waktu reponse sebuah web (fast response).

Karena adanya server yang lebih dari 1, hal ini memungkinkan ketika salah 1 server mati request tetap dapat di layani dengan server lain. jadi lebih reliable.

Ada beberapa variasi dalam penggunaannya haproxy diantaranya ada yang berfokus pada bandwidth, atau berdasarkan request rate, atau koneksi yang konkuren, atau pada kinerja SSL. Fitur-fitur yang ada disediakan untuk membantu tugas haproxy dalam mengendalikan trafic. Contohnya nanti akan kita bahas dalam haproxy configuration.

Fitur Basic

Proxying : menjembatani koneksi dari client dan server.
SSL : haproxy ssl support secure sockets layer (https)
Monitoring : termonitor secara terus menerus dan tercatat
High availibility : walaupun 1 atau beberapa web server mati masih tetap terkoneksi
Load balancing : beban trafik yang terbagi sama rata atau sama rasa
Stickiness : aliran data/paket yang melekat pada aturan/rule yang di setting
Sampling and converting information : pengelompokan dan rekap data dari paket yang lewat
Map : membuat simple rule untuk setting frontend dan backend
ACLs dan Conditions : haproxy acl mengatur trafic dengan rule dan condition
Stick-tables
Formatted strings
HTTP rewriting and redirection
Server protection
Logging : terdapat haproxy log file untuk maintenance
Statistics : data statistic untuk monitoring trafic

Fitur Advance

Management
System-specific capabilities
Scripting : HAProxy support Lua embedded language

Persiapan Installasi dan Konfigurasi

Kali ini kita akan gunakan 3 server  VPS dengan OS terinstall ubuntu 18.04
1 server sebagai load balancer dengan haproxy
2 server sebagai web server dengan nginx

server haproxy kita beri nama haproxy.qodrbee.com
web server kita beri nama web1.qodrbee.com dan web2.qodrbee.com
berikut konfigurasinya :

haproxy.qodrbee.com

ip public : 10.20.30.40 open port 80 # terhubung ke internet/user
ip private : 192.168.1.1/24 #terhubung dengan private web server

web1.qodrbee.com

ip private : 192.168.1.2/24 #terhubung dengan haproxy.qodrbee.com

web2.qodrbee.com

ip private : 192.168.1.3/24 #terhubung dengan haproxy.qodrbee.com

persiapan haproxy load balancer server

okey itu tadi adalah persiapan kita (persiapan mental dan kesabaran :v) sebelum memulai instalasi dan konfigurasi haproxy.
Selanjutnya kita coffe break dulu agar kembali fresh dan fokus. 10menit…
10.. 9.. 8.. 7.. 6.. 5.. 4.. 3.. 2.. 1..
oke break habis kita lanjutkan tahap instalasi dan konfigurasi.

kalau sudah sampai sini anda wajib share tulisan ini.
agar (banyak pengunjung di web saya) manfaatnya lebih tersebar ke yang lain.

tanpa basa bali klik disini untuk menuju babak baru dalam haproxy.
HAProxy installation and configuration
jeng jeng jeng…..

Referensi :

How to Native Image Lazy Loading for Web

Native Lazy Loading Image for Web

native lazyload image for web

yess… native lazy load image for web. coba lihat script di atas… ada attribut loading pada tag img. Selama ini kita kalo mau melakukan lazy loading kita pake plugin kan? jQuery kan? … nah ini nih ada cara native loh…
dan ini berlaku untuk tag img dan iframe.

loading attribute ini akan bekerja ketika halaman di scroll ke img atau frame yang memakai loading ini. loading support 3 value :

  1. lazy: ini untuk lazy loading.
  2. eager: load langsung.
  3. auto: browser yang akan menentukan lazy load atau tidak.

jika tidak ada attribute loading maka dianggap auto. Berikut adalah contoh script nya..

<!-- Lazy-load an offscreen image when the user scrolls near it -->
<img src="unicorn.jpg" loading="lazy" alt=".."/>

<!-- Load an image right away instead of lazy-loading -->
<img src="unicorn.jpg" loading="eager" alt=".."/>

<!-- Browser decides whether or not to lazy-load the image -->
<img src="unicorn.jpg" loading="auto" alt=".."/>

<!-- Lazy-load images in <picture>. <img> is the one driving image 
loading so <picture> and srcset fall off of that -->
<picture>
  <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
  <source srcset="small.jpg 1x, small-hd.jpg 2x">
  <img src="fallback.jpg" loading="lazy">
</picture>

<!-- Lazy-load an image that has srcset specified -->
<img src="small.jpg"
     srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w"
     sizes="(min-width: 36em) 33.3vw, 100vw"
     alt="A rad wolf" loading="lazy">

<!-- Lazy-load an offscreen iframe when the user scrolls near it -->
<iframe src="video-player.html" loading="lazy"></iframe>

dan tahukan saudara-saudara bahwa fitur ini direncanakan akan support di chrome 75. itu kata bang Addy Osmani sebagai Engineering Manager at Google working on Chrome. Jadi sabar saja ya… tunggu tanggal main nya di qodrbee ya. cheers… ;p

referensi  https://addyosmani.com/blog/lazy-loading/

[Penjurusan] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

[Hipster] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

Pengenalan tombol – tombol log woowa Bagian 9 ( Get IP & Generate Key)

Untuk bisa mengirimkan message/notification dengan woowa harus ada IP & Key di setiap license/nomor WA yang dipakai. Maka dari itu cek selalu IP dan Key ketika ada customer yang complain mengapa nomor nya tidak bisa mengirimkan message/notification.
Sebab-sebab tidak ada nya IP/Key biasanya ketika perpanjang/membeli license baru, selain itu key terkadang berubah karena redeploy/pindah server, maka dari itu selalu ingatkan customer untuk cek key apabila baru perpanjang atau nomor yang dipakai dipindah ke server lain, fungsi-fungsi dari tombol diatas yaitu:

  1. Get IP : untuk menggenerate IP
  2. Generate Key : memunculkan/menggenerate key

Pengenalan tombol – tombol log woowa Bagian 7 ( Clear Session, Redeploy & Pindah server )

Kali ini kita akan langsung membahas 3 tombol, kenapa 3 tombol karena tombol” ini sangat berkaitan. Ketika ada customer yang mengalami kendala connection atau gagal untuk scan QR. Dengan woowa tombol” berikut berfungsi untuk menghubungkan kembali koneksi yang mengalami masaalh.

  1. Clear session, untuk menghapus session yang ada di hp customer biasanya customer menggunakan web whatsapp dan gagal untuk menghubungkan kembali
  2. Redeploy, ini adalah cara kedua apabila cara pertama tidak bisa cara selain itu tombol ini juga digunakan apabila ketika di cek scan QR dari license pelanggan error/tidak muncul
  3. Pindah server, cara ini adalah cara terakhir apabila kedua cara diatas tidak bisa mengatasi.
    Tombol ini juga yang digunakan apabila nomor customer di banned oleh wa padahl message yang digunakan tidak terlalu banyak

Note : sebelum menggunakan cara 2 dan 3 pastikan customer sudah memiliki profil di WA nya

[Hustler] Silabus School of Startup

  • Penjurusan 1bulan
    • Pengenalan diri
    • Deteksi Minat & bakat
  • Hustler9bulan
    • Leadership
    • Visioner
    • Ide Kreatif
    • Pitching
    • Networking
    • Manajemen & Keuangan
    • Marketing
  • Hipster 9bulan
    • Intro UI/UX Design
    • UX Design 3bulan
      • Dasar-Dasar UX Design
      • Design Sprint
      • Persona atau Customer Segmentation
      • Prototyping
      • User Research
      • UX Parameter
      • Simplicity
      • Addictive App
      • Behavioral Economics
      • Ideation
    • UI Design 3bulan
      • Research
      • Sketch & Wireframe
      • Design & Prototyping
      • Usability Testing
      • Evaluate
      • Implementation
    • StartUp Case 3bulan
  • Hacker 9bulan
    • Frontend Dev 2bulan
      • HTML
      • CSS
      • JS
      • ReactJS
    • Backend Dev 2bulan
      • Algoritma & Pemrograman
      • PHP & OOP
      • Database
      • PHP Framework
    • Mobile Dev 2bulan
      • React Native
    • StartUp Case 3bulan

sukses
-keputusan
-keyakinan
-berubah
–perubahan konstan
—1.upgrade standar
—2.yakin bisa membuhi standar
—3.ubah strategi atau cari mentor
–setiap kejadian selalu memilih berpikir positif
–membuka diri untuk belajar dia bisa berubah
-cari cara untuk solusi bukan alasan
-ganti kaya tapi dengan kata dan
-masalah besar/kecil itu tergantung masalah itu bertemu dengan siapa?

keahlian itu harus spesialis
pengetahuan itu generalis

step from zero to hero
1.inocent – manusia biasa
2.the call – manusia menemukan panggilan
3.ujian – pasti diuji
4.partner – menemukan sekutu
5.celebration

error
sifat impian dan syarat perubahan sama

Pengenalan tombol – tombol log woowa Bagian 6 ( Direct & Restore Dashboard )

Selanjut nya adalah tombol Direct dashboard dan restore dashoard. Kedua tombol ini berfungsi untuk mengambil alih akun member area milik customer ketika waktu” yang sperti nya diperlukan. Untuk melakukan pengecekan dan error yang di hasilkan. Untuk menggunakannya:

  1. Masukkan email dari akun yang akan diambil alih
  2. Lalu klik direct dashboard, maka akan muncul pass lama dan pass baru dengan default 123456
  3. Untuk mengembalikannya lagi silahkan klik tombol restore dashboard, namun untuk berjaga-jaga sebelum klik restore copy terlebih dahulu pass lama dari akun tersebut

[tutorial] BAB 1 Persiapan CRUD pada Framework Laravel dan VueJS

crud laravel vuejs

Persiapan

Setelah kita mulai mempelajari suatu bahasa pemrograman tentang konsep, fundamental dan basic nya maka saatnya kita praktek lebih dalam praktek teknis pembuatan aplikasi yang sederhana. Suatu aplikasi hampir dipastikan ada aksi-aksi seperti

  • Create – menambah data
  • Read – membaca dan menampilkan data
  • Update – meng-edit dan update data
  • Delete – menghapus data

Aksi-aksi tersebut sering dan sudah biasa disebut dengan CRUD. Namun kali ini kita akan belajar praktek dari 0 (from scratch) membuat CRUD plus dengan Search, Pagination dan Report (laporan).

Teknologi yang akan kita pelajari dan praktekan diantaranya adalah

  • Xampp – Bundling Web server (apache2), DB server (Mysql) di local komputer kita
  • Composer – package manager
  • Framework Laravel – easily and quickly PHP framework based on MVC design pattern
  • Blade Template Engine – default bawaan laravel
  • Mysql Database – database sejuta umat
  • Framework VueJS – framework JS
  • Vue Router – agar vueJS lebih mudah
  • Axios – untuk menghadle http request
  • Ajax Request – agar http request lebih nyaman dan cepat
  • Html Form, table dll – view html

Kita asumsikan OS yang dipakai adalah windows. Pada tahap persiapan ini yang perlu kita lakukan diantaranya adalah

  1. Instalasi Xampp
  2. Instalasi Composer
  3. Instalasi Laravel
  4. Integrasi VueJS
  5. Menyusun relasi database

karena kita mau menggunakan laravel maka kita perlu ketahui dulu requirement dari versi laravel yang akan kita install. Kita akan menggunakan laravel versi 5.7.
Update fitur laravel versi 5.7 diantaranya

  • Securing Laravel APIs with Auth0
  • Laravel Dump Server Integration
  • Laravel Nova
  • Guest User Gates / Policies
  • Email Verification
  • Optional Email Verification
  • URL Generator & Callable Syntax
  • Paginator
  • Improved Error Messages
  • Testing Artisan Commands

kemudian requirement untuk laravel 5.7 adalah

  • PHP >= 7.1.3
  • OpenSSL PHP Extension
  • PDO PHP Extension
  • Mbstring PHP Extension
  • Tokenizer PHP Extension
  • XML PHP Extension
  • Ctype PHP Extension
  • JSON PHP Extension
  • BCMath PHP Extension

1. Instalasi XAMPP

Setelah kita mengetahui requirement Laravel maka kita perlu memilih versi Xampp yang mendukung requirement tersebut. Kita pilih xampp versi 7.2.17.
untuk detail tahap ini kita lanjutkan di sub bab berikutnya yakni installasi xampp di link ini