Cara Menggunakan Amazon CloudFront Sebagai Salah Satu CDN Terbaik

JudisWeb – Cara Menggunakan Amazon CloudFront Sebagai Salah Satu CDN Terbaik – Mendistribusikan konten sebuah website yang bisa diakses ke seluruh dunia, dengan latensi yang sangat rendah dan kecepatan transfer yang sangat tinggi, menjadikan salah satu pilihan yang terbaik bagi pembuat blog/website/e-commerce sehingga konten tersebut terkirim dan diakses dengan sangat cepat.

Misal kita adalah sebuah produsen tas, dimana kita ingin menjual produk kita melalui website dengan target pasar wilayah ASIA, Eropa, dan Afrika. Jika server utama kita berada di Indonesia atau Singapore maka latensi rendah dan atau akses yang cepat tersebut hanya saat pengguna mengakses dari wilayah Indonesia / Singapore saja. Bagaimana jika pengguna wilayah Eropa atau Afrika mengakses website kita? Tentunya perbedaan latensi yang sangat tinggi bagi pengguna Eropa sehingga dibutuhkan waktu yang lebih lama saat membuka konten website.

amazon cloudfront
CDN

Misal pengguna Indonesia atau Singapore mengakses website kita hanya membutuhkan 0.8-1.2 detik saja dan semua konten website berupa text, gambar, video, dan lain-lain terkirim dengan sangat cepat saat diakses. Sedangkan pengguna yang berada diluar wilayah Indonesia atau Singapore membutuhkan waktu 8-15 detik untuk membuka konten website.

Dengan menggunakan CDN adalah solusi tepat dimana konten dalam server utama kita berupa file statis didistribusikan ke titik pusat data yang kita inginkan sehingga konten website tersebut dapat diakses dengan cepat dan latensi yang sangat rendah salah satunya adalah Amazon CloudFront.

Apa itu Amazon CloudFront?

Amazon CloudFront adalah layanan jaringan pengiriman konten (CDN) global yang secara aman mengirimkan data ke pengguna dengan latensi rendah dan kecepatan transfer tinggi. CloudFront mengirimkan konten Anda melalui jaringan pusat data di seluruh dunia yang disebut edge location (lokasi tepi). Saat pengguna meminta konten yang kita sajikan dengan CloudFront, pengguna akan diarahkan ke lokasi edge yang menyediakan latensi (penundaan waktu) terendah, sehingga konten dikirimkan dengan kinerja terbaik.

Cara Membuat CDN di CloudFront

Tentunya dibutuhkan akun AWS untuk dapat menggunakan layanan Amazon CloudFront, jika belum memiliki akun AWS silahkan baca disini untuk membuat akun AWS Free Tier.

Amazon CloudFront Free Tier: 2,000,000 HTTP and HTTPS Requests of Amazon CloudFront, 50 GB Data Transfer Out of Amazon CloudFront

Step 1: Login ke AWS Console

Jika sudah memiliki akun AWS, login ke AWS Management Console.

Step 2: Membuat S3 Bucket

Pada dashboard AWS Management Console, cari pada bagian Services dan pilih S3. Amazon S3 inilah yang kita gunakan untuk mendistribusikan konten website ke CloudFront. Artikel yang berhubungan dengan S3 sudah saya buat dengan judul Cara membuat AWS S3 Bucket Public/Private Access Dengan Mudah bisa dibaca dan pelajari dalam membuat S3 Bucket.

Dalam contoh pembuatan bucket ini saya menamakan bucket ini dengan “judisweb-aws-tutorial” dan tentunya dengan Public Access, dan mengupload beberapa file statis seperti HTML, CSS, JPG ke dalam bucket tersebut.

JudisWeb aws cloudfront s1
Upload Static File to S3 Bucket

Jika bucket sebelumnya sudah dibuat bisa langsung membuka CloudFront dashboard.

Step 3: Membuat distribusi Amazon CloudFront

Selanjutnya kembali ke AWS Management Console > All Services > Networking & Content Delivery > CloudFront, atau dengan menggunakan search box service cari dengan kata kunci CloudFront.

Click Create distribution, setelah itu isi pada Origin domain menggunanakan S3 Bucket yang telah kita buat sebelumnya.

JudisWeb s3bucket to cloudfront
Configure Origin

Contoh menggunakan Origin Path (opsional):

  • Origin Domain – S3 Bucket bernama judisweb-aws-tutorial
  • Origin Path – /test-website

Saat pengguna memasukkan URL cloudfront-domain/index.html di browser, CloudFront mengirimkan permintaan ke Amazon S3 untuk judisweb-aws-tutorial/test-website/index.html.

Saat pengguna memasukkan cloudfront-domain/images/logo.jog di browser, CloudFront mengirimkan permintaan ke Amazon S3 untuk judisweb-aws-tutorial/test-website/images/logo.jpg.

Lanjut ke bagian Default cache behavior, secara default konfigurasi ini sudah paling umum tanpa perlu merubah. Pada opsi Compress objects automatically pilih Yes, CloudFront dapat secara otomatis mengompresi file tertentu sebelum diterima pengguna. Dengan kata lain misalnya objek atau file HTML dengan ukuran 100KB telah dikompres CloudFront menjadi 33KB kemudian baru diterima pengguna.

JudisWeb cloudfront cache
Configure Cache

Selanjutnya pada bagian Settings, tentukan Price class dimana konten kita menggunakan edge location. Karena AWS menggunakan sistim pembayaran “pay as yo go“, maka dalam hal ini kita bisa mengkalkulasi biaya yang dikeluarkan. Jika akun AWS masih dalam status Free Tier maka kita bisa mendapatkan kuota 2 juta requests HTTP/HTTPS dan 50GB data transfer dalam 1 bulan selama 12 bulan secara gratis. Tentunya jika penggunaan diatas 50GB maka kita perlu membayar kelebihan penggunaan kuota yang telah ditentukan.

JudisWeb cloudfront dist settings
Choosing Edge Location

Jika semua pengaturan telah disiapkan maka click Create distribution untuk memulai proses deploy dari S3 Bucket ke CloudFront.

Step 4: Testing CloudFront

Setelah melakukan pembuatan distribusi dari S3 CloudFront, kita perlu menunggu beberapa saat agar semua file terdistribusi ke semua edge location.

PicsArt 10 28 08.51.58
Deploy S3 Bucket to CloudFront

Setelah proses deploy selesai, maka kita bisa mencoba dengan mengakses file yang ada pada CloudFront. Pada bagian Details kita bisa melihat nama domain distribusi CloudFront milik kita. Untuk mengakses alamat file di CloudFront sama dengan kita mengakses alamat file di S3. Misal alamat file gambar pada S3: bucket-name.s3.region.amazonaws.com/images/logo.jpg menjadi cloudfront-domain.cloudfront.net/images/logo.jpg.

JudisWeb cloudfront distributed
Amazon CloudFront Test website

Akhirnya semua file dalam S3 Bucket yang kita buat untuk distribusi ke CloudFront telah terdistribusi ke edge location dan dapat diakses secara publik baik HTML, JPG, JS, CSS atau file statis lainnya.

Semoga bermanfaat.

Tinggalkan komentar