Deploy Website Statis menggunakan AWS

Overview

Project ini merupakan project pertama dari Cloud DevOps Engineer Nanodegree Program.

Cloud dapat digunakan untuk menghosting situs web statis dengan HTML,CSS dan JavaScript yang tidak memerlukan pemrosesan pada sisi server.

Pada project kali ini kita akan mendeploy sebuah website statis pada AWS, dengan langkah-langkah:

1. Membuat S3 bucket secara publik

2. Konfigurasi bucket dan mengamankannya menggunakan IAM policies

3. Mempercepat pengiriman konten menggunakan jaringan distribusi konten AWS (CloudFront)

4. Akses website menggunakan endpoint CloudFront

Prasyarat:

• Akun AWS
• Code HTML, CSS dan Javascript.
  

Buat S3 Bucket 

1. Pertama kita akan membuat bucket dengan cara buka dashboard AWS kemudian arahkan ke pencarian, ketik s3 kemudian pilih s3

2. Klik create bucket

 

3. Pada General Configuration, isi nama bucket dan AWS region. nama bucket harus unik.

4. pada bagian Block Public Access settings for this bucket hilangkan centang Block all public access, kemudian centang Turning off block all public access might result in this bucket and the objects within becoming public, selanjutnya biarkan default kemudian klik create bucket

5. Selanjutnya biarkan default kemudian klik create bucket, jika berhasil maka akan tampil seperti gambar dibawah ini

Upload file ke S3 Bucket

1. klik upload untuk mengupload file dan folder.

2. klik add file dan add folder, untuk mengupload file index.html dan klik add folder untuk mengupload folder css, img dan 

 Setelah mengupload file dan folder maka hasilnya akan terlihat seperti ini.

Mengamankan Bucket menggunakan IAM

1. klik pada permissions tab

2. Pada bagian bucket policy, klik edit kemudian tambahkan policy dibawah ini 

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

Pada bagian "Resource" di line 9 sesuaikan dengan Bucket ARN, kemudian klik save changes.

Konfigurasi S3 Bucket

1. Pada menu properties, klik edit, pada bagian static website hosting  

2. pada bagian static website hosting pilih Enable, isi index.html pada index document dan error document kemudian klik save

3. Pada bagian properties akan terlihat url endpoint, seperti dibawah ini, pada bagian Bucket website endpoint

Distibusi Website melalui CloudFront

1. Pada tab search ketik CloudFront 

2. Kemudian klik Create a CloudFront distribution 

3. Pada bagian Origin domain isi endpoint bucket yang sebelumnya dibuat pada S3, selain itu biarkan default

4. kemudian klik Create distribution, biarkan proses deploy selesai, kemudian catat domain name.

Jika sudah berhasil maka domain name akan terlihat seperti berikut:

Akses Website pada Browser

Akses domain name CloudFront yang sudah dibuat sebelumnya, seperti berikut:

Referensi:

https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/