Menggunakan Wordpress dengan S3 Bucket dan Cloudfront

Saya iseng mencoba Wordpess dengan S3 Bucket dan Cloudfront untuk belajar scaling website wordpress. Siapa tahu nanti kedepannya bakalan digunakan.

Beberapa pertimbangan yang saya pikirkan ketika menggunakan cara ini adalah

• Hemat kapasitas vps, karena yang paling boros resource adalah media file seperti gambar. Hanya ada kemungkinan untuk membengkaknya biaya berlangganan S3. Namun hal tersebut bisa diatasi dengan mencari alternatif yang lebih murah. Nanti akan saya tulis di postingan terpisah apabila sudah menemukannya.
• Data bisa disajikan dengan lebih cepat menggunakan CDN dari cloudfront yang gratis. Untuk blog dengan pengunjung tidak sampai puluhan ribu sepertinya bakalan gratis terus. Bisa baca gratisan cloudfront always free tier.
• Mendukung optimasi core web vitals yang pernah saya tulis sebelumnya. Sehingga memberikan pengalaman yang lebih baik untuk para usernya.

5GB Amazon S3 Storage gratisan sudah lebih dari cukup untuk hosting gambar blog panduaji.com ini. Sedangkan 1 TB transfer data CDN Cloudfront juga lebih cukup dari blog yang pengunjung hariannya belum sampai 1000 UV ini.

Pada tulisan kali ini, saya mau berbagi bagaimana saya menggunakan Amazon S3 untuk menyimpan media file dan Amazon Cloudfront untuk mendistribusikan gambar pada blog wordpress ini.

Persiapan

Dengan metode ini, semua gambar yang saya upload nantinya akan disimpan di S3 bucket, sedangkan gambar yang kita tempelkan di website akan berasal dari cdn cloudfront. Jadi jangan heran kalau nanti teman-teman lihat url gambar berasal dari cdn.panduaji.com

Berikut beberapa hal yang saya persiapkan sebelum melakukan migrasi ini

• Membuat akun AWS dan meminta verifikasi akses cloudfront. Verifikasi cloudfront saya butuh waktu kurang dari 24 jam.
• Gunakan DNS Cloudflare supaya cepet aja propagasi domainnya
• Membuat bucket S3
• Membuat cdn cloudfront
• Pengaturan offload media ke S3 Bucket

Konfigurasi S3 Bucket untuk Wordpress

Hal yang pertama kali akan kita lakukan adalah membuat S3 Bucket di Amazon S3. Bagaimana caranya? Login ke console AWS, kemudian buka Amazon S3. Setelah itu tekan tombol Create Bucket.

Setelah itu kamu bisa menirukan pengaturan S3 bucket yang saya lakukan di bawah ini

Memberi nama bucket. Bebas, hindari penggunaan _ (underscore) dan . (dot). Contoh nama bucket yang saya gunakan com-panduaji-bucket.

Saya menggunakan Asia Pacific (Jakarta) untuk AWS Region karena blog ini memiliki target user utama di Indonesia

Object Ownership: Pilih ACLs enabled dan pilih Object writer.

Section Block Public Access, jangan centang block all public access. Di bagian bawahnya kamu bisa centang I acknowledge that the current settings …

Kemudian tekan create bucket

Create Policy

Setelah bucket S3 selesai dibuat, langkah selanjutnya adalah membuat policy yang akan mengontrol bagaimana user account AWS dibuat untuk mengakses bucket.

Caranya bagaimana? Buka IAM > Policies > Create Policy > Pilih JSON dan copy paste policy di bawah ini

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:DeleteObjectTagging",
                "s3:ListBucketMultipartUploads",
                "s3:DeleteObjectVersion",
                "s3:ListBucket",
                "s3:DeleteObjectVersionTagging",
                "s3:GetBucketAcl",
                "s3:ListMultipartUploadParts",
                "s3:PutObject",
                "s3:GetObjectAcl",
                "s3:GetObject",
                "s3:AbortMultipartUpload",
                "s3:DeleteObject",
                "s3:GetBucketLocation",
                "s3:PutObjectAcl"
            ],
            "Resource": [
                "arn:aws:s3:::com-panduaji-bucket/*",
                "arn:aws:s3:::com-panduaji-bucket"
            ]
        }
    ]
}

Jangan lupa untuk mengubah com-panduaji-bucket menjadi nama bucket yang sudah kamu atur sebelumnya. Setelah itu tekan tombol next dan berikan nama policy yang relevan. Misalnya com-panduaji-policy dan tekan Create Policy.

Membuat IAM User

Setelah berhasil membuat policy, langkah berikutnya adalah membuat IAM User. Pilih menu user dan Add users. Buat username dan nggak perlu centang Provide user access to AWS Management Console.

Pada bagian permission, pilih Attach policies directly. Pilih policy yang sudah kita buat sebelumnya. Dalam kasus saya di atas, gunakan com-panduaji-policy. Kemudian tekan next dan create user.

Setelah itu buka properties untuk user yang baru saja dibuat dan create access key. Pilih application runing outside AWS. Karena saya menggunakan layanan VPS diluar AWS. Kemudian download .csv file untuk melihat access key dan screet access key. Simpan file ini karena akan sangat berguna. Kalau hilang kamu harus bikin lagi.

Konfigurasi CORS

CORS Policy di bucket ini sifatnya optional. Bisa kamu lakukan bisa enggak. Ini perlu kamu atur apabila kamu ingin menggunakan direct upload ke AWS S3 Bucket. Jadi nggak lewat dashboard wordpressmu.

Untuk mengatkfikan CORS, kamu bisa buka S3 Bucket > Pilih S3 bucket yang mau kamu aktifkan > Permission > CORS > Edit dan masukkan JSON di bawah ini

[
   {
       "AllowedHeaders": [
           "*"
       ],
       "AllowedMethods": [
           "GET",
           "PUT",
           "POST",
           "HEAD"
       ],
       "AllowedOrigins": [
           "*"
       ],
       "ExposeHeaders": [],
       "MaxAgeSeconds": 3000
   }
]

Jangan lupa simpan. Untuk persiapan S3 Bucket sudah selesai.

Langkah selanjutnya adalah mempersiapkan Amazon Cloudfront untuk mendistribusikan gambar melalui CDN biar makin sat set wat wet.

Konfigurasi Cloudfront untuk Worpdress

Saya menggunakan custom domain cdn.panduaji.com untuk mendistribusikan semua gambar. Untuk itu saya perlu request SSL untuk subdomain yang saya gunakan. Berikut langkah-langkah yang saya lakukan untuk mendapatkan SSL pada subdomain

Untuk bagian ini saya ndak ambil banyak screenshot. Harusnya sih sudah paham ya.

Setting SSL untuk Subdomain CDN

• Buka certificate manager di AWS > Request certificate > Request a public certificate > Next
• Fully qualified domain name, saya menggunakan cdn.panduaji.com, pada validation method saya menggunakan DNS Validation > Request
• Tunggu beberapa saat hingga muncul request certificate yang kita ajukan tadi. Kemudian klik pada ID certificatenya untuk mengatahui CNAME untuk verifikasi
• Buka cloudflare > pilih domain yang mau ditambahkan cname, dalam studi kasus saya ini menggunakan panduaji.com
• Add record CNAME dengan settingan sesuai yang muncul di AWS dan non aktifkan proxy .
• Tunggu proses propagasi domain, biasanya gak lebih dari 5 menit kalau pakai cloudflare. Bisa di refresh lagi aja, kalau statusnya sudah issued berarti sudah siap digunakan.

Setting Cloudfront

Setelah SSL untuk subdomain saya peroleh, selanjutnya adalah melakukan setting pada CloudFront. Caranya bagaimana?

Buka menu cloudfront > Create Distribution

Pada bagian origin, origin domain isi dengan nama bucket yang sudah kita buat sebelumnya. Dalam kasus ini tadi saya menggunakan nama com-panduaji-bucket. Tinggal klik, sudah muncul list origin domain yang sudah kita buat sebelumnya. Pada bagian name juga akan secara otomatis terisi. Kalau mau diubah ya monggo, kalau saya tak biarin aja

Pada section Default cache behavior > Viewer > Viewer protocol policy pilih redirect http to https.

Pada web application firewall (WAF) pilih do not enable security protections, karena kalau enable bayar ges.

Pada Settings > Alternate domain name (CNAME) > Add item nama subdomain cdn yang sudah dibuat. Saya pakai cdn.panduaji.com. Pada bagian custom SSL certificate pilih SSL yang sudah dibuat pada langkah sebelumnya kemudian tekan create distribution

Sambil menunggu proses pembuatan cloudfront, copy domain name pada cloudfront distribution. Kemudian buka cloudflare > Buat CNAME lagi > Paste di target. Sedangkan nama gunakan cdn seperti yang sudah saya pilih sebelumnya. Proxy jangan lupa dimatikan lalu tekan save.

Setting Media Cloud

Setelah pengaturan S3 Bucket dan Cloudfront berhasil, langkah selanjutnya adalah dengan melakukan setting pada wordpress. Saya menggunakan Media Cloud sebagai plugin untuk offload media.

Buka Media Cloud > Settings dan masukkan

• Access Key
• Screet Key
• Nama Bucket: com-panduaji-bucket

Kemudian pada bagian CDN Settings, isi CDN Base URL sesuai dengan yang sudah kamu atur sebelumnya. Dalam kasus saya ini saya menggunakan https://cdn.panduaji.com.

Update: saya menonaktifkan Media Cloud karena terlalu banyak memakan resource CPU pada VPS yang saya gunakan.

Sayangnya untuk versi gratisannya kita hanya bisa upload file baru ke AWS S3, sedangkan file-file lama yang sudah ada di gallery itu nggak bisa. Harus beli premium. Tapi menurut saya, daripada berlangganan media cloud, lebih baik menggunakan Leopard, beli sekali bisa selamanya dipakai.