Cara Membuat CDN Image Blogger Dengan Domain Sendiri

Cara Membuat CDN Image Blogger Dengan Domain Sendiri - CDN (content delivery network) merupakan kumpulan server global yang bertujuan untuk dapat mendistribusikan konten statis seperti gambar, video, dll yang di cache oleh server yang terletak di dekat lokasi geografis user sehingga meminimalisir latency yang terjadi. Ide artikel kali ini berasal dari salah satu komentar yang ada pada artikel "Cara Membuat Blog Blogger Support PWA", ia menanyakan tentang "caranya mengganti domain gambar blogger dengan domain sendiri". Karena fitur PWA (Progressive Web Apps) sepertinya tidak dapat mengakses asset yang berada luar doamian terdaftar pada service worker (sw.js) sehingga asset gambar icon harus dapat langsung diakses melalaui domain tersebut. Pertanyaan ini saya rasa cukup menarik, jadi saya buatkan sebuah artikel agar dapat dibaca dan di praktikkan oleh pembaca yang lainnya. Di tutorial ini akan meggunakan bantuan layanan cloudflare yang terpasang di domain kalian sebagai CDN serta route url, silahkan kalian baca cara Mengintegrasikan Custom Domain Blogger Dengan Cloudflare

Periapan Membuat CDN Image Blogger

• blogger dengan custom domain yang sudah terintegrasi cloudflare.
• icon blog ukuran 512x512 px

Cara mengganti domain gambar blogger dengan domain sendiri

• Setelah custom domain kalian selesai terintegrasi dengan cloudflare
• selanjutnya kalian masuk ke akun cloudflare kalian, kemudian klik menu Workers
• jika kalian baru pertama kali menggunakan worker, kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
• Dibagian kedua kalian diminta untuk memilih Plan, pilih yang Free saja :d Continue with Free
• Selanjutnya klik Create a Worker
• lalu kalian hapus semua isi pada kolom script dan copykan script di bawah ini

const ORIGINS = {
  "images.kamto.workers.dev": "1.bp.blogspot.com",
  "www.marwanto606.com": "1.bp.blogspot.com",
}

async function handleRequest(request) {
  let url = new URL(request.url)
  // Check if incoming hostname is a key in the ORIGINS object
 if (url.hostname in ORIGINS) {
    const target = ORIGINS[url.hostname]
    url.hostname = target
    // If it is, proxy request to that third party origin
    return await fetch(url.toString().replace('/image', ''), request)
  }

}

addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

• ganti images.kamto.workers.dev dengan subdomain worker kalian, dapat kalian temukan pada kolom sent http request sebelah kanan
• ganti www.marwanto606.com dengan domain kalian, yang akan mengakses gambarnya
• lalu klik Save and Deploy
• Sekarang tinggal membuat route untuk worker nya, klik pada menu Workers > klik add route.
• Masukkan route https://*.marwanto606.com/image/* sesuaikan dengan domain kalian ya
• Selanjutnya kalian upload imege icon 512x512 yang sudah kalian siapkan ke blogger bisa melalui buat posting atau halaman dan ambil url gambarnya .

contoh url source gambar akan seperti ini:

https://1.bp.blogspot.com/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0/marwanto606.png

ubah menggunakan domain yang sudah kalian buat ex:

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0/marwanto606.png

untuk merubah ukuran gambar silahkan gunakan prefix s0 (ukuran asli) dan rubah sesuai ukuran gambar yang ingin kalian buat ex :

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s300/marwanto606.png

dan untuk mengakses gambar menjadi format webp tambahkan prefix -rw setelah s0 menjadi ex :

https://www.marwanto606.com/image/-tTna-hOkp2E/YHKtF-20eTI/AAAAAAAAD30/h0onq7YowC8hwnVrH3Amo3n7HqT8r40PgCLcBGAsYHQ/s0-rw/marwanto606.png

Catatan kaki

• worker cloudflare versi free dibatasi sebanyak 100,000 request harian.
• system di blogger mendeteksi url gambar pertama yang akan digunakan sebagai thumbnail, jadi jika gambar pertama pada posting kalian custom ada kemungkinan thumbnail post tersebut akan blank (kosong)