Integrasi Github Pages dengan Cloudflare CDN

2021-01-30 669 words 4 minutes

Contents

Github Pages biasanya digunakan sebagai hosting untuk situs web dengan konten statis, maka diperlukan caching untuk mempercepat load-time. Cloudflare dapat dimanfaatkan sebagai CDN (Content Delivery Network) yang berfungsi untuk menyimpan cache apabila belum ada perubahan yang signifikan pada situs web.

CDN

CDN (Content Delivery Network) merupakan sekelompok server yang ditempatkan diberbagai lokasi untuk mendistribusikan konten situs web ke sejumlah wilayah geografis yang luas. Salah satu contohnya adalah Cloudflare, yang menyediakan beberapa layanan baik berbayar maupun bebas biaya seperti yang telah saya gunakan pada situs web ini. CDN bekerja untuk menyimpan cache dari Origin Server (misalnya server Github Pages) dan menyimpannya di berbagai CDN Server pada berbagai belahan dunia. Contohnya ketika pengguna dari benua Asia mencoba mengakses situs web yang dikenal memiliki basis server di benua Amerika, CDN Server yang terletak pada lokasi terdekat dengan penggunalah yang akan menjawab request pengguna tersebut.

/integrasi-github-pages-dengan-cloudflare-cdn/bagaimana-cdn-bekerja.webp — Bagaimana CDN Bekerja

Manfaat Cloudflare

Selain mempercepat load-time situs web, terdapat beberapa manfaat lain yang dapat kita peroleh dengan mengintegrasikan Cloudflare pada situs web. Dengan menggunakan Cloudflare kita dapat lebih menghemat bandwith, meningkatkan keamanan server dari serangan DDoS dari pihak tidak bertanggung jawab, hingga memperoleh layanan SSL HTTPS terpercaya.

Prerequisites

Sebelum melaksanakan beberapa langkah lebih lanjut, pastikan sudah memenuhi beberapa prasyarat berikut ini.

Saya sudah memiliki akun Cloudflare dengan paket layanan bebas biaya, apabila belum memilikinya maka sebaiknya lakukan registrasi akun terlebih dahulu pada dash.cloudflare.com/sign-up.
Memiliki akses registrar dari domain yang digunakan oleh situs web. Registrar akan kita gunakan untuk melakukan pointing menuju nameserver Cloudflare. Dalam artikel ini saya telah memiliki sebuah domain yang disediakan oleh DewaBiz.com.
Sebuah situs web yang menggunakan Github Pages sebagai hosting. Contohnya seperti yang telah saya tulis pada artikel Custom APEX Domain untuk Github Pages.

Nameserver Cloudflare

Tambahkan Situs Web

Login ke dalam halaman dashboard Cloudflare menggunakan akun yang sebelumnya telah dibuat. Kemudian tambahkan situs web dengan memasukkan alamat domainnya.

/integrasi-github-pages-dengan-cloudflare-cdn/tambah-situs-web.png — Tambah Situs Web

Lalu pilih paket yang akan digunakan seperti berikut ini.

/integrasi-github-pages-dengan-cloudflare-cdn/paket-layanan.png — Paket Layanan

Konfigurasi Nameserver Clouflare

Setelah menambahkan situs web, kita perlu melaukan konfigurasi DNS kemudian kita akan mendapatkan sepasang nameserver seperti berikut ini.

/integrasi-github-pages-dengan-cloudflare-cdn/konfigurasi-nameserver.png — Konfigurasi Nameserver

IP pada A records merupakan IP miliki Github yang saya dapatkan dari docs.github.com.

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

Yang perlu dicatat adalah nameserver yang telah kita dapatkan dari Cloudflare, seperti berikut.

1
2
penny.ns.cloudflare.com
sri.nds.cloudflare.com

Registrar Domain

Sekarang login ke dalam registrar domain kalian untuk merubah nameserver.

/integrasi-github-pages-dengan-cloudflare-cdn/ubah-nameserver-di-registrar.png — Ubah Nameserver di Registrar

Biasanya perubahan nameserver akan memakan waktu beberapa saat, sebaiknya tunggu terlebih dahulu sekitar 15 menit dan lakukan flush cache dns.

Konfigurasi HTTPS

Kita perlu mengaktifkannya terlebih dahulu pada menu SSL/TLS di dashboard Cloudflare.

/integrasi-github-pages-dengan-cloudflare-cdn/ssl-tls-cloudflare.png — SSL/TLS Cloudflare

Kemudian masuk ke Settings pada Github Pages dan centang Enforce HTTPS

/integrasi-github-pages-dengan-cloudflare-cdn/enforce-https.png — Enforce HTTPS

Konfigurasi Cache

Ini adalah salah satu fitur yang paling dicari di Cloudflare, kita dapat menemukannya pada menu Caching. Di sini saya hanya mengaktifkan Caching Level seperti berikut.

/integrasi-github-pages-dengan-cloudflare-cdn/caching-level.png — Caching Level

Untuk mengetahui lebih jelasnya kita dapat melihat kegunaan dari setiap properties tersebut pada dokumentasi resmi Cloudflare dari halaman support.cloudflare.com.

Page Rules

Selanjutnya buka Page Rules untuk membuat 3 rules baru bagi domain kita.

Always Use HTTPS
Forwarding URL
Cache Level

/integrasi-github-pages-dengan-cloudflare-cdn/page-rules.png — Page Rules

Untuk menerapkan semua konfigurasi yang telah dibuat, saya menghapus semua cache yang telah tersimpan di Cloudflare dengan menggunakan Purge Everything pada menu Caching di dashboard Cloudflare.

/integrasi-github-pages-dengan-cloudflare-cdn/purge-everything.png — Purge Everything

Pengujian

Untuk melakukan pengujian saya menggunakan perintah dig dan hasilnya sebagai berikut.

1
$ dig init.web.id

Jika registrar domain telah menggunakan nameserver Cloudflare maka akan muncul tampilan seperti berikut.

1
2
Name Server:penny.ns.cloudflare.com
Name Server:sri.ns.cloudflare.com

Lalu jika SSL Cloudflare telah berhasil diterapkan, maka pada overview registrar domain DewaBiz.com akan menampilkan informasi berikut.

/integrasi-github-pages-dengan-cloudflare-cdn/overview-registrar.png — Overview Registrar

Kesimpulan

Dengan menggunakan nameserver milik Cloudflare saya merasa fitur Konfigurasi DNS yang terdapat pada registrar domain kini dapat dikelola melalui dashboard Cloudflare. Perubahan kecepatan load-time situs web memang benar-benar terasa. Kita dapat melihat analisis secara mudah lewat menu Analytics, serta menguji kecepatan situs web dengan fitur Speed pada dashboard Cloudflare. Di lain kesempatan saya ingin mencoba untuk bermigrasi ke Netlify untuk mereasakan perbandingannya.