banner large

Cara Meng-host Situs Web Tanpa Server dengan AWS CloudFront dan S3

Comment
X
Share

Logo AWS

Jika Anda ingin menjalankan situs web di AWS, Anda mungkin tidak memerlukan server! CloudFront CDN AWS ​​dapat menyajikan konten web statis langsung dari bucket S3, sehingga Anda hanya perlu membayar untuk permintaan dan data yang ditransfer (yang bahkan mungkin gratis).

Bagaimana Cara Kerja Hosting Tanpa Server?

“Tanpa Server” adalah konsep menjalankan aplikasi tanpa mengelola server Linux khusus sendiri, biasanya dengan solusi Platform-as-a-Service seperti AWS’s App Runner atau Lambda Functions. Meskipun Anda dapat menjalankan aplikasi normal seperti NGINX pada mesin virtual EC2, Anda biasanya dapat menyajikan jenis aplikasi yang sama tanpa menjalankan server.

Solusi tanpa server khusus ini menggunakan Layanan Penyimpanan Sederhana (S3) AWS untuk menghosting konten statis untuk situs web, daripada harus menyajikannya sendiri dari server NGINX. “Statis” hanya berarti Anda menyajikan file dan tidak membuat halaman, yang mencakup situs web HTML + CSS sederhana, serta aplikasi web JavaScript sisi klien lengkap. Khususnya, ini tidak termasuk kerangka kerja hosting sisi server seperti WordPress (PHP), Ruby on Rails, dan ASP.NET, tetapi banyak situs web hanya akan berisi konten statis.

Manfaat dari solusi ini adalah tidak bergantung pada server Anda sendiri—S3 akan selalu menanggapi permintaan, sehingga Anda dapat meminta orang sebanyak yang Anda inginkan untuk mengakses situs Anda. Di depan S3, Anda dapat menggunakan CloudFront, solusi Jaringan Pengiriman Konten (CDN) AWS. CloudFront menjalankan ratusan cache tepi, yang diminta semua cache ke S3 untuk Anda, meningkatkan latensi & throughput, dan menurunkan biaya.

Dalam pengaturan jaringan ini, semua yang menangani permintaan pengguna sepenuhnya tanpa server. Server CloudFront dijalankan oleh AWS dan secara otomatis akan meng-cache konten dan mengarahkan pengguna ke titik akhir, yang hanya merupakan bucket S3.

Jika Anda perlu menjalankan semacam backend atau API agar aplikasi web Anda dapat terhubung, Anda mungkin dapat menggunakan alat tanpa server lain seperti Fungsi Lambda untuk mencapainya. Penyiapan ini bahkan lebih baik, karena permintaan ke S3 dan API akan diskalakan secara terpisah.

Jika Anda ingin mempelajari lebih lanjut tentang menggunakan API Gateway sebagai antarmuka untuk Fungsi Lambda, Anda dapat membaca panduan kami tentang pengaturannya.

Terlepas dari betapa sederhananya, ini sebenarnya adalah pengaturan tingkat perusahaan yang bagus untuk menghosting konten statis di AWS. Ini akan dapat diandalkan, skala sempurna, dan bahkan dapat digunakan dengan penerapan otomatis CodePipeline untuk memperbarui situs Anda dari file sumbernya.

TERKAIT: Cara Menggunakan Gateway API AWS sebagai Frontend untuk Fungsi Lambda

TERKAIT: Cara Mengatur Pipeline Penerapan Otomatis untuk Situs Web S3

Berapa harga barang ini?

Karena hosting tanpa server menskalakan persis dengan penggunaan, Anda hanya membayar untuk apa yang Anda gunakan. Ini dapat menghemat banyak uang untuk server yang biasanya tidak digunakan. Umumnya, Anda akan membayar sedikit lebih banyak per jam CPU daripada melakukannya sendiri, tetapi ini biasanya diimbangi oleh fakta bahwa Anda dikenakan biaya yang wajar untuk penggunaan yang tepat.

Namun, ada kemungkinan bagus ini hanya akan terjadi Gratis. “Tingkat selalu gratis” AWS mencakup bandwidth 100 GB, dan seluruh terabyte bandwidth CloudFront. Sebagai perbandingan, sebagian besar tingkatan gratis lainnya dari layanan hosting situs statis (seperti Github Pages dan Firebase) akan memberi Anda sekitar 10 GB.

Bandwidth gratis 1 TB tentu sangat bagus, karena itu berarti sebagian besar situs web yang tidak menyajikan banyak konten akan memiliki buffer yang besar sebelum dikenakan biaya dalam jumlah yang signifikan.

Anda masih akan dikenakan biaya untuk permintaan S3, yang akan bertambah, dan jika situs Anda menyimpan ratusan GB konten, Anda mungkin juga melihat biaya tinggi untuk itu. Namun, memanfaatkan caching CloudFront secara efektif jika memungkinkan dapat mengurangi jumlah permintaan yang diperlukan ke asal (S3), dan sebagian besar situs akan cukup kecil.

Menyiapkan Situs Web Statis Bucket S3

Untuk memulai, buka S3 Management Console dan buat bucket baru. Anda harus menonaktifkan “Blokir Akses Publik” agar dapat terlihat. AWS memperingatkan bahwa ini adalah ide yang buruk kecuali untuk kasus penggunaan seperti hosting situs web statis. Karena itulah tepatnya yang kami lakukan, Anda dapat mengabaikan ini, tetapi Anda pasti tidak ingin mengunggah rahasia ke keranjang—semuanya akan dapat dibaca.

Ini hanya menghilangkan blok di atasnya; Anda juga harus secara eksplisit mengizinkan pembacaan publik dengan kebijakan keranjang, di bawah “Izin.” Pastikan untuk mengganti nama sumber daya di sini dengan keranjang yang benar.

{
  "Version":"2012-10-17",
  "Statement":[
    {
    	"Sid":"PublicReadGetObject",
        "Effect":"Allow",
    	"Principal": "*",
        "Action":["s3:GetObject"],
        "Resource":["arn:aws:s3:::example-bucket/*"]
    }
  ]
}

Selanjutnya, Anda harus mengunggah konten Anda. Anda dapat menarik dan melepas, tetapi jika Anda ingin mentransfer seluruh folder secara manual, Anda dapat menggunakan AWS CLI untuk menyinkronkan bucket S3 dengan direktori lokal. Anda juga dapat mengatur bucket ini sebagai output untuk penerapan CodePipeline, yang dapat membangun artefak Anda dari repositori sumber.

TERKAIT: Cara Memasang dan Mengonfigurasi AWS CLI

Kami akan menggunakan S3 API dan mengupload basic create-react-app templat. Setelah disinkronkan, Anda akan melihat index.html dalam ember S3.

aws s3 sync . s3://bucket-name

Sebelum siap, Anda harus pergi ke Properties ember, gulir ke bawah untuk menemukan “Web Hosting Statis”, dan nyalakan. Anda harus mengonfigurasi indeks dan dokumen kesalahan, dan Anda juga dapat menulis aturan pengalihan di sini.

Setelah selesai, Anda akan melihat titik akhir untuk situs web di bawah properti.

Menghubungkan CDN CloudFront

CloudFront memiliki banyak opsi, tetapi pengaturan default akan berfungsi dengan baik untuk situs web S3 sederhana, jadi konfigurasinya cukup mudah. Buka konsol CloudFront dan buat distribusi baru.

Anda dapat mengonfigurasi pengaturan untuk cache, tetapi perilaku default akan baik-baik saja bagi kebanyakan orang.

Anda harus menghubungkan domain kustom Anda, dan ini melibatkan pembuatan sertifikat SSL yang dikelola melalui AWS Certificate Manager (ACM). Anda dapat mengklik tombol ini untuk meminta sertifikat, yang mungkin memerlukan beberapa saat untuk memverifikasi DNS jika Anda tidak menggunakan DNS Route 53 AWS.

Anda tentu juga perlu mengonfigurasi DNS Anda dengan catatan CNAME yang mengarah ke titik akhir CloudFront.

Setelah sertifikat dan DNS Anda dikonfigurasi, buat distribusinya, dan tunggu sekitar 15 menit hingga CloudFront menerapkannya. Setelah selesai, Anda akan dapat mengunjungi titik akhir CloudFront atau domain kustom Anda, dan melihat situs Anda ditayangkan dari bucket S3.

tes situs web s3

Leave a Reply

Your email address will not be published. Required fields are marked *