Hai!

Setelah di jurnal sebelumnya kita belajar bagaimana membuat bucket di AWS S3 (Baca di AWS: How to Create an AWS S3 Bucket), kali ini kita akan membahas fitur AWS S3 yang lain yaitu Hosting a Static Website.

Website statik ini bisa diartikan bahwa tidak ada lalu lintas data yang terhubung ke database, tidak ada proses servier-side scripting (misal website pakai bahasa PHP, Java, dll), dan juga biasanya file html nya tidak berubah secara terus-menerus. Nah, di AWS S3 mempunyai fitur website static tersebut agar file-file html yang tersimpan di dalam bucket dapat diakses dari internet. Baca selengkapnya disini.

Kita akan coba labkan. Pertama, masuk ke AWS Console, lalu klik Services.

Di sesi Storage, klik S3.

Berikut tampilan dashboard dari AWS S3. Bisa menggunakan bucket yang sudah ada, atau buat baru dengan klik Create bucket.

Saya coba buat bucket baru dengan nama misskecupbung-web-001 di region us-east-1. Atur parameter lainnya dengan default, lalu klik Create bucket.

Pastikan bucket berhasil dibuat ya.

Masuk ke bucket dan klik Upload untuk mengunggah file html nya.

Saya upload file index.html dan error.html. Lalu klik Upload.

Pastikan kedua file berhasil diunggah ya. Seperti di bawah ini.

Masuk ke menu Permissions dan pada sesi Block public access, klik Edit.

Hilangkan semua centang dan klik Save changes. Pengaturan ini diset agar semua user tidak diblok, sehingga dapat mengakses file dalam bucket tanpa menggunakan autentikasi dan otorisasi.

Ketik confirm dan confirm.

Pastikan berhasil ya!

Kita coba file index.html nya agar bisa diakses dari browser. Caranya, balik ke tab Objects, centang file index.html, klik Actions dan klik Make public.

Konfirmasi dengan klik Make public.

Pastikan berhasil ya!

Klik file index.html dan klik URL nya ya.

Maka akan tampil seperti di bawah ini. Pastikan muncul, sebagai file berhasil diakses dari publik.

Bagaimana dengan error.html ? atau, bagaimana dengan file-file html yang lain (dalam kasus misal kita punya file html yang banyak). Daripada setting file satu-per-satu seperti di atas, kita bisa menerapkan policy agar allow public bisa langsung diterapkan untuk seluruh file dalam bucket secara otomatis.

Balik ke pengaturan bucket, gulir ke bawah sampai menemukan pengaturan Bucket policy. Klik Edit.

Tempel policy nya di editor:

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

Lalu klik save.

Catatan: perhatikan Effect nya allow, dan principal nya * yang menandakan keseluruhan file dalam bucket.

Hasilnya akan seperti di bawah ini.

Jika dilihat di dashboard AWS S3, maka akan terlihat akses Public.

Dan ya. FIle error.html dapat dibuka.

Bagaimana agar kedua file saling terhubung selayaknya website? jadi kita akses tanpa ada tambahan path /index.html ataupun /error.html.

Masuk ke bucket, klik Properties, dan gulir ke bawah sampai menemukan sesi Static Website Hosting. Secara default statusnya masih Disabled. Klik Edit.

Pilih Enable dan definisikan Index document dan Error document nya ya!

Klik Save.

Pastikan berhasil! Klik Endpoint URL untuk mengakses static website nya.

Tampilannya seperti berikut ini.

Tanpa ada tambahan path /index.html ataupun /error.html dan selamat! kita telah berhasil membuat static website menggunakan AWS S3.

Sekian!