Integrasi WordPress, CloudFront dan W3 Total Cache untuk CDN

Integrasi WordPress, CloudFront dan W3 Total Cache untuk CDN

Tidak lengkap rasanya kalau tidak membuat tutorial tentang yang satu ini, walau sudah banyak tutorialnya yang beredar, ya memang tujuannya agar tidak lupa maka dibuatlah tulisannya sendiri.

Jadi intinya kita membuat CDN (Content Delivery Network) sendiri di wordpress dengan memanfaatkan Amazon CloudFront untuk distribusi file-file konten statis di website kita dengan tujuan untuk mengurangi load akses time. Dengan load time yang rendah tentunya website kita akan menjadi ringan dan lebih cepat untuk diakses.

Berikut langkah-langkahnya

Buat distribusi di CloudFront

1. Login di AWS Management Console, pada service pilih layanan Amazon CloudFront, akan muncul jendela baru pilih “Create Distribution”

2. Pilih metode content delivery, kita pilih yang web klik Get Started,

3. Kemudian akan muncul tampilan konfigurasi distribusi CloudFront, pada origin setting, ada 2 buah kolom yang wajib kita isi dengan nama domain kita, yaitu Origin Domain Name dan Origin ID, isi misal dengan namadomain.tld,

2015-08-18_231357.jpg

4. Untuk bagian berikutnya Default cache dan Distibution setting, sesuaikan dengan kebutuhan anda, atau kalo tidak mau repot samakan saja dengan pengaturan dibawah ini

2015-08-18_231505.jpg

2015-08-18_231545.jpg

5. Setelah itu jangan lupa klik tombol “Create Distribution”, maka pembuatan distribusi akan diproses, biasanya cukup lama, bisa mencapai 15 menit dari status onprogress sampai deployed.

6. Cek distribusi yang barusan kita buat, dengan klik menu “Distribution” sebelah kiri dan klik daftar distribusi yang ingin dilihat.

7. Pastikan pada detail distribusi statusnya sudah “Deployed”, dan jangan lupa catat alamat pada Domain Name yang otomatis dibuatkan oleh cloudfront untuk cdn kita

2015-08-18_233235.jpg

Konfigurasi di Plugin W3 Total Cache

Setelah berhasil membuat distribusi di Cloudfront, saatnya buka wordpress kita, cari plugin W3 Total Cache dan aktifkan, masuk ke pengturan setting pluginnya

Pilih dan klik pada Menu CDN

2015-08-18_203142.jpg

Pada bagian CDN, aktifkan centang CDN, dan pilih typenya, disini kita pilih Amazon CloudFront, dan klik Save All Setting untuk menyimpan perubahan.

2015-08-18_203249.jpg

Pilih menu di sebelah kiri, yaitu menu “CDN”, kemudian pilih tab Configuration, disini kita harus mengisi Acsess key ID dan Screet Key, bagaimana membuatnya? kita bisa membuat access id key untuk per user untuk lebih amannya, tapi untuk cara cepatnya ikuti saja pada artikel saya sebelumnya yaitu Membuat Access Key ID dan Secret Access Key di Amazon AWS.

Setelah menddapat Acsess key ID dan Screet Key kemudian isikan, dan pada bagian Replace site’s hostname with, isikan dengan nama sub domain nama cdn yang terdapat pada pada step no 7 sebelumnya.

2015-08-18_233348.jpg

Save semua, dan untuk mengetesnya tinggal klik tombol Test CloudFront distribution, pastikan hasilnya adalah “Test pased”, yang menandakan sukses seperti gambar diatas.

Langkah terakhir pastikan anda mengklik tombol “empty all caches” pada halaman dashboar pada plugin W3 Total Cache.

Verifikasi dan test CDN

Untuk mengetes sudah berjalan apa belum, buka halaman homepage situs kita, klik kanan dan pilih View Source, disitu kita bisa melihat setiap url domain untuk file-file statis kita akan berubah menjadi url cdn domain name dari cloudfront.net, ini artinya website kita sudah berhasil dilayani oleh content delivery network dari Cloudfront.

2015-08-18_233505.jpg

2015-08-18_233549.jpg

 

6

No Responses

Kirim Komentar