Cara Membuat CDN Image Blogger Dengan Domain Sendiri

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:
  • blogger dengan custom domain yang sudah terintegrasi cloudflare.
  • icon blog ukuran 512x512 px

caranya 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
menu Workers Cloudflare
  • jika kalian baru pertama kali menggunakan worker, kalian diminta untuk memasukan sub domain yang akan kalian gunakan, (terserah kalian tapi harus yang masih tersedia)
workers cloudflare setup
  • 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.
workers cloudflare 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 :

worker cloudflare versi free dibatasi sebanyak 100,000 request harian.

15 Comment "Cara Membuat CDN Image Blogger Dengan Domain Sendiri"

  1. saya sudah berhasil mas https://www.digitalvy.com/image/-WHFVwutRpto/XrTT6jCv1sI/AAAAAAAAAFo/fLlqY_Y-7NMDLnFCVOh5eZEL4mU0FlcxQCLcBGAsYHQ/s1600/post-thumb-md-a.jpg

    Terima kasih banyak mas

    BalasHapus
  2. jadi harus manual ya mas untuk merubah url dari 1.bp.blogspot.com ke https://www.digitalvy.com/image

    lalu kalau untuk url gambar yang lain 2.bp.blogspot.com, 3.bp.blogspot.com, 4.bp.blogspot.com. apa tinggal dimasukkan saja pada workernya?

    BalasHapus
    Balasan
    1. iya manual gan rubah url nya. semua gambar yang sudah di upload ke blogger dapat diakses lewat 1.bp.blogspot.com kok gan, jadi tidak perlu di tambahkan.

      Hapus
  3. kalau dengan cara ini apa bisa mas mengubah domainnya otomatis menggunakan javascript?

    https://bytes.com/topic/javascript/answers/652740-change-domain-keep-path-javascript

    BalasHapus
    Balasan
    1. kalo mau rubah gambar otomatis mungkin sorce codenya lebih seperti ini gan, https://www.kompiajaib.com/2018/10/cara-mudah-menggunakan-cdn-staticaly.html

      Hapus
  4. atau dengan adanya fitur baru dari cloudflare transform rules juga bisa ya mas?

    BalasHapus
    Balasan
    1. sepertinya transform rules itu cuma berlaku di domain yang dipasang cloudflare gan, sedangkan url gambar memang otomatis digenerate dari cdn ex: 1.bp.blogspot.com, jadi cara yang paling simple adalah dengan manual.

      Hapus
    2. apa transform rules bisa mereplace /search/label/ pada url blogger juga mas?

      Hapus
    3. mereplace menjadi /category/ atau sejenisnya

      Hapus
    4. saya baru test transform rules, dan gagal gan. tidak bisa mereplace url nya.

      Hapus
  5. mas mungkin dengan cara ini bisa mengatasi masalah dari gambar yang di host blogger yang di blokir ISP.

    BalasHapus
    Balasan
    1. sepertinya bisa gan. kalo yang block dari isp lokal dan cloudflare masih dapat mengakses ke file image tersebut.

      Hapus
  6. saya malah error ada keluar tulisan gini Uncaught SyntaxError: Invalid or unexpected token at line 3 (Code: 10021) padahal semua bener

    BalasHapus
    Balasan
    1. coba cek ulang codenya gan, itu keterangan syntax error kemungkinan typo pada line 3 saat merubah url ORIGINS

      Hapus

Pembaca yang baik selalu meninggalkan jejaknya.
Dilarang berkomentar menggunakan LINK AKTIF.