Membuat websocket di aaPanel dengan SSL dari cloudflare

Sebelumnya kita sudah belajar cara membuat websocket menggunakan web server apache, php 7.3, yang di install pada aaPanel sebagai manajemen server nya. Sebelum lanjut ke tahap ini, perhatikan terlebih dahulu, kalau program berbasis websocket merupakan program yang di jalankan dengan PHP CLI.

Berbeda dengan program standar seperti yang di jalankan oleh web server, web server mengandalkan PHP-FPM sebegai pengelolah proses nya. Setiap kali ada permintaan, php-fpm akan melemparkan tugas tersebut pada proses proses yang sedang berjalan ataupun akan membuat proses baru untuk mengeksekusi tugas.

Sementara itu Websocket hanya dapat di buat dengan PHP CLI, di sini kita menggunakan daemon proses. Apa itu daemon? Daemon proses adalah suatu program aplikasi yang berjalan di latar belakang tanpa interaksi secara langsung oleh pengguna, program ini terus menerus berjalan di latar belakang.

Pada panduan kemarin, kita memanfaatkan fungsi exec dalam PHP untuk melakukanya. Prinsip ini dilakukan untuk mengakses shell langsung dari program PHP, lalu apakah bahaya mengaktifkan exec pada PHP? Bahaya atau tidaknya tergantung, bagi kalian yang suka install program sembarangan, atau install wordpress keamanan server emang jadi rentan dan tidak di sarankan mengaktifkan exec.

Beberapa hal yang wajib di pahami sebelum melanjutkan adalah terkait SSL. Karena sistem dari websocket akan memproxy lalu lintas dan mengarahkanya ke program lain di server kita, pada apache server terdapat virtualhost. Bedakan virtualhost 80 dan virtualhost 443.

Semua permintaan yang di lakukan lewat HTTP ( non SSL ) akan melalui jalur virtualhost 80. Sedangkan permintaan yang dilakukan melalui HTTPS ( SSL ), jalurnya akan berada di virtualhost 443. Port tersebut merupakan port umum yang digunakan dalam sebagian besar layanan server dan jaringan, jadi fokus pada port tersebut.

Dalam penerapanya di perlukan sertifikat SSL, bisa pakai lets encrypt atau bisa juga menggunakan SSL yang di sediakan oleh cloudflare. Cara pasang SSL di aaPanel bagaimana? panduan akan di bagi menjadi dua tahap, tahap pertama memasang ssl di aaPanel tingkat domain menggunakan SSL gratis dari CloudFlare, tahap kedua menyiapkan websocket server dan semua konfigurasinya.

Cara pasang sertifikat SSL cloudflare pada sebuah Domain aaPanel

Pastikan situs sudah terhubung ke coudflare, penambahan situs ke cloudflare sangat mudah. Tinggal tambahkna situs di menu cloudflare, lalu lakukan pointing name server ke NS yang di sediakan oleh cloudflare. Biasanya penyambungan situs baru ke cloudflare hanya memiliki sedikit sekali propagasi domain, kecual jika ns pernah di ubah-ubah beberapa kali.

Setelah menambahkan situs ke cloudflare, masuk ke akun yang digunakan, pilih domain mana yang akan di gunakan. Berikut ini adalah contoh gambar tampilan ketika hendak memilih domain mana yang akan digunakan.

Langkah selanjutnya lihat pada Menu sidebar, terdapat pilihan origin server. Navigasi ke halaman tersebut, akan terlihat halaman baru. Pada halaman baru terdapat tombol create certificate. Silakan buat sertifikat baru, CSR pilih RSA ( biarkan default ) masa aktif 15 tahun biarkan sedault, domain dan sub domain biarkan ada wilcard dan domain utama.

Selanjutnya akan muncul sebuah sertifikat baru, isnya berupa orgin certificate ( PEM ) dan key. Salin kode ini, dan simpan di clip board atau di notes. Kode nya akan kurang lebih tampil seperti ini.

Masuk ke aaPanel, pilih menu website, di menu website pada situs mana yang akan di tambahkan ssl klik conf ( Configuration ). Menu ini akan memunculkan sebuah popup baru, dimana terdapat menu-menu lagi. Pada popup tersebut pilih SSL, dan akan muncul beberapa tab. Pilih tab yang Other certificate, lalu pastekan antara key dan juga certificate pem nnya, lalu klik save..

Setelah di tambahkan klik saja ok pada cloudflare, jangan lupa mengubah pengaturan SSL. Navigasikan ke menu Overview pada sub menu SSL, di sana akan ada beberapa pilihan metode koneksi ke server, pilih saja Full/Strick

Penambahan SSL sudah berhasil sepenuhnya, server dan juga DNS cloudflare sudah berjalan di atas HTTPS dan TLS 443. Sekarang web server sudah dapat melakukan proxy pada koneksi TLS tanpa mengalami konflik pada jaringan https server. Biasanya, ketika kita menggunakan HTTP di server namun HTTPS di cloudflare ( Flexible ), itu akan menyebabkan data tidak di terima oleh server alias mixed.

Cara mengkonfigurasi apache server untuk dapat memproxy lalu lintas websocket

Memproxy artinya mengalihkan semua permintaan dari pelanggan ke aplikasi websocket yang berjalan pada server, pada server apache ada cara khusus untuk melakuknaya. Pengguna harus terlebih dahulu mengaktifkan modul mod_proxy_wstunnel.

Pada aaPanel, pilih menu App Store untuk bernavigasi melihat sotware apache yang berjalan pada server. Untuk memudahkan mencari App Sort pilih by installed, akan muncul semua aplikasi yang di install pada server, cari saja Apache. Pada apache klik setting, itu akan memunculkan jendela popup baru yang berisi beberapa pilihan.

Cari teks #LoadModule proxy_wstunnel_module modules/mod_proxy_wstunnel.so, hapus tanda pagar pada teks tersebut. Untuk mempermudah mencari, bisa tekan CTRL + F atau bisa gunakan mekanisme cari di halaman jika anda mengggunakan browser mobile. Metode ini untuk menemukan teks di dalam sebuah halaman tanpa perlu menscroll lebih lama, jangan lupa klik save setelah mengubah..

Pastikan modul ini di aktifkan, jika menggunakan apache server yang bukan berasal dari aapanel letak file configurasi ada di jalur installasi, nama file spesfik seperti alur /apache/conf dengan nama httpd.conf, ini merupakan file konfigurasi apache edit saja file tersebut dengan notepad cari teks seperti di atas.

Menambahkan lokasi path websocket ke VirtualHost

Virtualhost adalah sebuah jalur virtual yang bertindak sebagai penerima lalu lintas, pada jalur ini berisi konfigurasi khusus terkait server dan bagaimana perilaku terhadap permintaan tersebut. Ada beberapa virtualhost pada apache, secara umum virtualhost dengan port 80 dan 443, karena di sini menggunakan SSL, pilih virtualhost pada port TLS 443.

Di dashboard aaPanel pilih menu website, pada website yang di inginkan ada conf klik conf akan memunculkan popup baru. Pada menu popup tersebut, klik pada bagian config, akan ada tulisan virtualhost. Jangan edit semua temukan virtualhost dengan port 443, lalu tambahkan kode.

Tambahkan teks berikut ini pada apache server. Salin dan tempel, jika kesulitan menyalin di ketik saja, sori kalau selalu ke redirect ke shopee melulu soalnya gue juga butuh duit buat biayain servvr.

# Off artinya cegah jadi proxy ke internet
# On artinya pertahankan header
ProxyRequests off 
ProxyPreserveHost On
ProxyPass /websocket ws://103.xxx.xxx:8183
ProxyPassReverse /websocket ws://103.xxx.xxx.xxx:8183   

Kode di atas akan melakukan reverse proxy ke path url /websocket yang dapat di akses lewat gtduit.com/websocket, nanti permintaan yang mengarah ke url ini akan di teruskan ke server atas dengan protokol ws. Kenapa pakai protokol ws bukan wss? Yang kita pasangi sertifikat itu adalah Apache nya, sementara untuk server websocketnya di bangun dengan kerangka PHP secara lokal tanpa perlu SSL tambahan.

Di sana juga saya menambahkan alamat IP server, kalau menggunakan alamat IP server internet access sebaiknya di buka dulu port yang akan digunakan. Pada menu firewall aapanel tambahkan port 8183 bebas mau port berapa saja, pada layanan penyedia VPS buat sebuah grup keamanan baru dan tambahkan port 8183 ke dalam whitelist izin akses agar dapat di akses lewat publik network.

Jika anda menggunakan alamat IP lokal VPS tidak perlu membuka port, port hanya perlu dibuka apabila akses koneksi melalui jaringan publik. Pastikan menggunakan port yang tidak bentrok/tidak digunakan oleh aplikasi lain, kalau bentrok nanti websocket tidak mau berjalan. Dan ingat juga, untuk reverse proxy belum support IPV6, bagi yang menggunakan ShockHosting bisa gunakan ip network seperti saya.

Tambahan, ProxyRequest off adalah untuuk mencegah path tersebut di jadikan VPN Oleh orang lain, kalau tidak itu menjadi jalur terbuka yang memudahkan orang untuk konek ke server kita dan memanfaatkan sumber daya kuota untuk mengakses internet lewat jaringan ip kita. Sedangkan ProxyPreverseHost adalah untuk meneruskan semua permintanan header tanpa di cut oleh apache.

Ngoding websocket menggunakan Rachet dan fancywebsocket.js

Sekarang bebas, bisa gunakan pustaka apapun untuk membangun server websocket menggunakan kerangka kerja PHP. Bagian terpenting dari hal ini adalah menjalankan sebuah server websocket PHP dengan daemon proses. Pastikan server berjalan di latar belakang dengan menghasilkan kode PID tertentu, kode process id didapatkan ketika menggunakan perintah shell untuk membuat proses baru.

Dalam kesempatan ini saya akan menggunakan kode-kode versi lama, yang masih dapat berfungsi meskipun cara pembuatanya menggunakan SSL. Silakan salin code ini jika berminat atau cari code lain di github atau sumber lainya.

index.html

run.php

server.php

fancywebsocket.js

Cara menjalankan Websocket di PHP

Untuk menjalankan websocket, jalankan terlebih dahulu server websocket menggunakan perintah terminal. Menggunakan PHP CLI, pastikan PHP CLI aaPanel yang anda gunakan mempunyai konfigurasi yang sama seperti PHP FPM, perbedaan konfigurasi akan menyebabkan perbedaan signifikan pada aplikasi PHP yang di proses karena mereka beda runtime.

php server.php >> simpan-error.txt 2>&1 & echo $!

Gunakan kode tersebut untuk menjalankan websocket, wajib di perhatikan. di aaPanel script tersimpan pada /www/wwwroot/site-url.com/server.php, sebelum menjalankan pastikan folder PHP CLI sudah sama seperti pada jalur path global tempat dimana PHP di pasang pada server.

Cara tersebut adalah cara yang cukup mudah di lakukan menggunakan terminal, cara kedua akan sedikit lebih mudah. Gunakan exec untuk menjalankan perintah shell secara langsung melalui PHP. Berikut ini adalah contoh fungsi dari exec. Simpan kode PID program untuk melaukan kill proces sewaktu-waktu guna menghentikan program berjalan.

$command = "php server.php >> error.txt 2>&1 & echo $!";
exec($command, $output, $returnVar);
if ($returnVar === 0) {
// Simpan PID ke dalam file
file_put_contents("pid-running.txt", (int)$output[0] );
} else {
echo "Ada masalah saat melakukan eksekusi silakan cek error.txt";
}

Untuk memastikan apakah websocket sudah berjalan atau belum bisa membuka URL https://domain=kamu.com/websocket, apabila muncul notif error kurang lebih seperti ini. Itu artinya wbesocket sudah mulai running. Error 426 atau invalid protocol Schme adalah suatu error yang terjadi ketika kita membuka URL TCP 443 dengan protokol HTTPS.

Cara memantau proses yang sedang berjalan menggunakan PID id yang sudah di dapatkan juga bisa menggunakan perintah bash shell lewat exec.

if (posix_getpgid(file_get_contents("pid-running.txt") !== false) {
echo "program sedang berjalan";
} else {
echo "program tidak berjalan";
}

Pemahaman lebih lanjut mengenai websocket

Kode sampel websocket dan cara menjalankan websocket menggunakan SSL cloudflare di atas merupakan kode tingkat dasar, seharusnya mudah di pahami. Apabila masih kesulitan memahami, ada baiknya mempelajari bahasa pemrograman PHP tingkat dasar terlebih dahulu, mulailah dengan mempelajari perilaku bahasa PHP CLI dan PHP FPM.

Menjalankan PHP dengan interpreter bawaanya sama sekali berbeda pada saat menggunakan PHP FPM untuk menjalankan proses PHP. Menggunakan PHP CLI kita dapat mengeksekusi dan menjalankan banyak program PHP dalam satu waktu yang bersamaan, setiap satu kali membuat proses baru akan mendapatkan PID yang unik.

Untuk Apache memang caranya lebih spesfik, sedangkan untuk web server lain Nginx, LiteSpeed tidak di butuhkan modul mod_proxy_wstunnel. TInggal dilaukan saja penambahan routing reverse pengalihan langsung di virtualhost. Bisa cari panduan di google cara menambahkan routing virtualhost pada Nginx atau LiteSpeed.

Saat server websocket berhasil di bangun pada PHP ia akan menjadi program mandiri, yang mempunyai jalur komunikasi sendiri. Jalurnya yaitu alamat ip address lokal : port yang digunakan, port adalah tempat keluar masuknya lalu lintas data dalam satu jaringan lokal. Tiap program membutuhkan port yang unik dan tidak boleh saling bentrok port.

Terimakasih sudah membaca, bila membutuhkan bantuan gunakan jasa saya untuk setup websocket server hanya dengan harga Rp 50.000 saja. Saya bantu setupkan websocket menggunakan teknik di atas, dan dengan code yang sama juga. Dan kamu bisa belajar kembali dari setiingan yang saya buat. Hubungi saya di telegram, @ryanx

Tagged : #websocket #aapanel #php #apache , pada Rabu, 06 Maret 2024 21:28 WIB