Blog AWS Indonesia

Membangun Situs WordPress Dengan Ketersediaan Tinggi dengan Amazon Lightsail, Bagian 3: Meningkatkan Keamanan dan Kinerja Menggunakan Amazon CloudFront

Tulisan sebelumnya dalam seri ini (Implementasi Lightsail Basis Data Untuk WordPress dan Menggunakan Amazon S3 dengan WordPress Untuk Mengantarkan Berkas Media Secara Aman), menunjukkan bagaimana cara membangun situs WordPress dan mengkonfigurasinya untuk menggunakan Amazon S3 untuk melayani aset media Anda. Langkah selanjutnya adalah menggunakan distribusi Amazon CloudFront untuk meningkatkan kinerja dan menambahkan tingkat keamanan lainnya.

CloudFront adalah jaringan pengiriman konten (Content Delivery Network atau CDN). CloudFront pada dasarnya menyimpan sementara (cache) konten dari server situs Anda di banyak lokasi akhir (endpoints) di seluruh dunia. Saat seseorang mengunjungi situs Anda, mereka akan dilayani oleh salah satu endpoint CloudFront terlebih dahulu. CloudFront menentukan apakah konten yang diminta tersedia di dalam tembolok (cache). Jika tersedia, CloudFront merespon klien dengan informasi yang diminta. Jika konten tidak tersedia di dalam cache pada endpoints, konten akan diambil dari server situs aslinya dan kemudian disimpan sementara di dalam cache CloudFront sehingga permintaan berikutnya dapat disajikan dari endpoint.

Proses ini mempercepat waktu respon, karena endpoint biasanya lebih dekat ke klien daripada server situs yang sebenarnya, dan juga mengurangi beban pada server, karena setiap permintaan yang dapat ditangani oleh CloudFront sama artinya dengan berkurangnya satu permintaan yang harus dilayani oleh server situs Anda.

Dalam konfigurasi yang akan dibahas dalam tulisan ini, CloudFront hanya menyimpan berkas media yang berada dalam S3 bucket Anda, tetapi sebenarnya CloudFront dapat menyimpan lebih banyak macam hal dalam cache-nya. Untuk informasi lebih lanjut, silakan lihat Cara Mempercepat Situs WordPress Anda dengan Amazon CloudFront.

Manfaat lain dari CloudFront adalah bahwa CloudFront merespon permintaan melalui HTTPS. Karena beberapa permintaan dilayani baik oleh server situs WordPress dan juga oleh CloudFront, penting untuk mengamankan kedua koneksi tersebut dengan menggunakan HTTPS. Jika tidak, peramban web (web browser) pelanggan akan menunjukkan peringatan bahwa situs tersebut tidak aman. Tulisan berikutnya dalam seri ini akan menunjukkan cara mengkonfigurasi HTTPS untuk peladen situs WordPress Anda.

Ikhtisar Solusi

Untuk mengkonfigurasi CloudFront untuk bekerja dengan situs Lightsail WordPress Anda, selesaikan langkah-langkah berikut:

  1. Meminta sertifikat dari AWS Certificate Manager.
  2. Buat sebuah distribusi CloudFront.
  3. Lakukan konfigurasi plugin WP Offload Media Lite untuk menggunakan distribusi CloudFront.

Diagram berikut menunjukkan arsitektur solusi ini.

Gambar yang menampilkan arsitektur WordPress dengan Lightsail, CloudFront, S3, dan basis data Lightsail.

Prasyarat

Tulisan ini mengasumsikan bahwa Anda membangun situs WordPress Anda dengan mengikuti tulisan sebelumnya dalam seri ini.

Proses konfigurasi SSL mengharuskan Anda memiliki nama domain terdaftar dan izin yang memadai untuk membuat data tambahan di DNS untuk domain tersebut.

Anda tidak memerlukan AWS atau Lightsail untuk mengelola domain, tetapi contoh dalam tulisan ini menggunakan manajemen DNS Lightsail. Untuk informasi lebih lanjut, lihat tulisan Membuat Zona DNS Untuk Mengelola Data DNS Domain Anda di Amazon Lightsail.

Membuat Sertifikat SSL

Tulisan ini menggunakan dua subdomain yang berbeda untuk situs WordPress Anda. Satu subdomain akan merujuk ke situs utama Anda, dan yang lainnya akan merujuk ke S3 Anda. Misalnya, pelanggan mengunjungi https://www.example.com untuk mengakses situs Anda. Ketika mereka mengklik pada posting yang berisi berkas media, keseluruhan isi halaman akan diambil dari https://www.example.com, tetapi berkas medianya akan diambil dari https://media.example.com, seperti yang digambarkan pada diagram sebelumnya.

Ikuti langkah-langkah berikut ini untuk membuat sertifikat SSL untuk CloudFront untuk digunakan dengan S3 bucket. Tulisan berikutnya dalam seri ini menunjukkan cara membuat sertifikat SSL untuk server WordPress Anda.

  1. Buka konsol ACM.
  2. Dalam Provision certificates, pilih Get started.
  3. Pilih Request a public certificate.
  4. Pilih Request a certificate.
  5. Untuk Domain name*, masukkan nama domain untuk melayani berkas media Anda. Tulisan ini menggunakan media.mikegcoleman.com.
  6. Pilih Next. Tangkapan layar berikut menunjukkan contoh nama domain.
  7. Pilih Leave DNS validation.
  8. Pilih Review.
  9. Pilih Confirm and request.
    ACM membutuhkan Anda untuk memvalidasi bahwa Anda memiliki hak yang diperlukan untuk meminta sertifikat untuk domain tertentu dengan membuat sebuah data khusus di dalam DNS.
    Pilih panah di samping nama domain untuk menampilkan nilai rekaman yang perlu Anda buat. Lihat tangkapan layar berikut.

    Sekarang Anda harus menggunakan manajemen DNS Lightsail untuk membuat data CNAME untuk memvalidasi sertifikat Anda.
  10. Dalam tab baru, buka konsol Lightsail.
  11. Pilih Networking.
  12. Pilih nama domain yang sesuai.
  13. Di bawah DNS records, pilih Add record.
  14. Dari menu tarik-turun, pilih CNAME record.
    Tangkapan layar berikut menunjukkan pilihan menu.
  15. Arahkan kembali ke ACM.
    Di bawah Name, nilai diformat sebagai randomcharacters.subdomain.domain.com.
  16. Salin karakter acak dan subdomain.
    Sebagai contoh, jika nilai adalah _f836d9f10c45c6a6fbe6ba89a884d9c4.media.mikegcoleman.com, Anda akan menyalin _f836d9f10c45c6a6fbe6ba89a884d9c4.media.
  17. Kembali ke konsol DNS Lightsail.
  18. Dalam Subdomain, masukkan nilai yang telah disalin.
  19. Kembali ke konsol ACM.
  20. Untuk Value, salin seluruh teksnya.
  21. Kembali ke konsol DNS Lightsail.
  22. Untuk Maps to, masukkan nilai yang telah disalin.
  23. Pilih tanda centang hijau.

Tangkapan layar berikut menunjukkan rincian catanan (record) yang sudah selesai di konsol Lightsail DNS.

ACM secara berkala memeriksa DNS untuk melihat apakah catatan ini ada, dan memvalidasi sertifikat Anda ketika telah menemukan catatan. Proses validasi biasanya memakan waktu sekitar 15 menit; namun bisa memakan waktu hingga 48 jam.

Untuk melacak validasi, kembali ke konsol ACM. Anda dapat secara berkala memuat ulang halaman ini sampai Anda melihat bidang Status berubah menjadi Issued. Lihat tangkapan layar berikut.

Membangun Distribusi CloudFront

Setelah memiliki sertifikat, sekarang Anda siap membuat distribusi CloudFront. Selesaikan langkah-langkah berikut:

  1. Buka konsol CloudFront.
  2. Pilih Create distribution.
  3. Di bawah Web, pilih Get Started.
  4. Untuk Origin Domain Name, pilih S3 bucket yang telah Anda buat untuk menyimpan berkas media WordPress Anda.
    Tangkapan layar berikut menunjukkan pilihan yang tersedia di menu tarik-turun Origin Domain Name. Tulisan ini memilih mike-wp-bucket-s3-amazonaws.com.

    Tanpa konfigurasi tambahan, WordPress tidak mengirimkan informasi yang menunjukkan kapan harus menghapus data dari dalam cache; menentukan cara mengkonfigurasi fungsi tersebut di luar lingkup tulisan ini.
    Karena WordPress tidak mengirimkan informasi tersebut, Anda perlu mengatur waktu default untuk hidup (TTL) di CloudFront.
    Sebagai titik permulaan, tetapkan nilai ke 900 detik (15 menit). Artinya bahwa jika Anda memuat sebuah tulisan, dan tulisan tersebut menyertakan media, CloudFront memeriksa cache untuk media tersebut. Jika media berada dalam cache, namun sudah ada lebih dari 15 menit, CloudFront akan meminta media dari server WordPress Anda dan memperbarui cache.
    Meskipun 15 menit adalah nilai yang wajar untuk permulaan, nilai optimal untuk TTL tergantung pada bagaimana Anda ingin menyeimbangkan pengiriman konten terbaru kepada klien Anda dan dengan kinerja dan biaya.
  5. Untuk Object Caching, pilih Customize.
  6. Untuk Default TTL, masukkan 900.
    Tangkapan layar berikut menunjukkan pilihan TTL.

    CloudFront memiliki titik akhir (endpoints) di seluruh dunia, dan harga yang Anda bayar bergantung pada jumlah endpoints yang telah Anda konfigurasikan. Jika lalu lintas data pengunjung situs Anda berada di wilayah geografis tertentu saja, Anda mungkin ingin membatasi endpoints mana saja yang perlu digunakan.
  7. Di bawah Distribution Settings, untuk Price Class, pilih pengaturan yang sesuai. Tulisan ini memilih Use All Edge Locations. Lihat tangkapan layar berikut. Anda harus memilih pengaturan yang masuk akal untuk situs Anda. Memilih hanya subset kelas harga akan mengurangi biaya.
  8. Untuk Alternate Domain Names (CNAMEs), masukkan nama subdomain untuk S3 bucket Anda.
    Nama ini sama dengan subdomain yang sudah Anda siapkan sertifikatnya pada langkah sebelumnya. Tulisan ini menggunakan media.mikegcoleman.com.
    Tetapkan sertifikat yang Anda buat sebelumnya.
  9. Pilih Custom SSL Certificate.
    Saat mengisi atribut teks, sertifikat yang Anda buat sebelumnya akan ditampilkan di menu tarik-turun.
  10. Pilih sertifikat Anda.
    Tangkapan layar berikut menunjukkan menu tarik-turun dengan sertifikat SSL kustom.
  11. Pilih Create Distribution.
    Butuh waktu sekitar 15-30 menit untuk mengkonfigurasi distribusi. Langkah selanjutnya adalah membuat data DNS yang mengarahkan subdomain media Anda ke distribusi CloudFront.
  12. Kembali ke konsol CloudFront, pilih ID distribusi.
    Tangkapan berikut menunjukkan ID distribusi yang tersedia.

    Halaman tersebut menampilkan rincian ID distribusi.
  13. Salin Domain Name.
    Tangkapan berikut berikut menunjukkan rincian ID distribusi.
  14. Kembali ke konsol DNS Lightsail.
  15. Pilih Add record.
  16. Pilih CNAME record.
  17. Untuk Subdomain, masukkan subdomain yang Anda gunakan untuk S3 bucket.
    Tulisan ini menggunakan domain media.mikegcoleman.com, jadi nilainya adalah media.
  18. Untuk Maps to, masukkan nama domain distribusi CloudFront yang sebelumnya telah Anda salin.
    Tangkapan layar berikut menunjukkan rincian catatan CNAME.
  19. Pilih kotak centang hijau.
  20. Kembali ke konsol CloudFront.

Diperlukan waktu sekitar 15-30 menit agar status distribusi berubah menjadi Deployed. Lihat contoh tangkapan layar berikut.

Mengkonfigurasi plugin

Langkah terakhir adalah mengkonfigurasi plugin WP Offload Media Lite untuk menggunakan distribusi CloudFront yang baru dibuat. Selesaikan langkah-langkah berikut:

  1. Masuk ke dasbor admin untuk situs WordPress Anda.
  2. Di bawah Plugins, pilih WP Offload Media Lite.
  3. Pilih Settings.
  4. Untuk Custom Domain (CNAME), pilih On.
  5. Masukkan nama domain untuk S3 bucket Anda.
    Tulisan ini menggunakan media.mikegcoleman.com sebagai contoh.
  6. Untuk Force HTTPS, pilih On.
    Hal ini memastikan bahwa semua media disajikan melalui HTTPS.
  7. Pilih Save Changes.
    Tangkapan layar berikut menunjukkan detail URL REWRITING dan ADVANCED OPTIONS.

    Anda dapat memuat gambar dari pustaka media Anda untuk mengkonfirmasi bahwa semuanya bekerja dengan benar.
  8. Di bawah Media, pilih Library.
  9. Pilih gambar di pustaka media Anda.

Jika Anda tidak memiliki gambar di pustaka, tambahkan gambar baru sekarang.

URL yang tercantum harus dimulai dengan domain yang Anda konfigurasikan untuk bucket S3 Anda. Untuk posting ini, URL adalah media.mikegcoleman.com.

Tangkapan layar berikut menunjukkan rincian gambar.

Untuk mengonfirmasi bahwa gambar dimuat dengan benar, dan tidak ada kesalahan atau peringatan SSL, salin nilai URL dan tempelkan ke peramban web Anda.

Kesimpulan

Anda kini memiliki konten media yang disajikan dengan aman dari CloudFront. Tulisan terakhir dalam seri ini menunjukkan cara membuat beberapa instans server WordPress Anda dan menempatkan mereka di belakang penyeimbang beban (load balancer) Lightsail untuk meningkatkan kinerja dan meningkatkan ketersediaan.

Jika Anda belum punya akun AWS, silakan lanjutkan membuat akun AWS gratis, dan mulai membangun situs WordPress Anda sendiri – atau apa pun yang mungkin Anda pikirkan!

Tulisan ini berasal dari artikel Deploying a Highly available WordPress site on Amazon Lightsail, Part 3: Increasing security and performance using Amazon CloudFront yang ditulis oleh Mike Coleman dan diterjemahkan oleh Tedy Tirtawidjaja.

Petra Barus

Petra Barus

Petra Novandi Barus is Developer Advocate at Amazon Web Services based in Jakarta. He is passionate in helping startups and developers in Indonesia to reinvent on behalf their customers. Prior to AWS, Petra co-founded UrbanIndo.com as CTO. The startup became the largest real-estate portal in Indonesia and then was acquired by 99.co. During that time Petra had been a happy AWS customer for 8 years. Petra is also very active in local tech communities