Pindah ke static website

Blog ini sebelumnya dihosting di AWS EC2 dan AWS RDP sebagai databasenya. Spec yang digunakan standard free tier tanpa auto scaling dan load balancer. Server juga digunakan untuk host nextcloud. sebenarnya trafficnya tidak terlalu besar tetapi entah kenapa penggunaan openlitespeed seperti memakan space yang besar di folder tmp sehingga menyebabkan beberapa kali website down sampai harus direstart servernya.

Karena saya malas dan belum ada waktu melakukan optimalisasi jadi saya putuskan untuk menonaktifkan dulu ghost dan wordpress. Sehingga otomatis hanya nextcloud saja yang aktif dan sejauhnya ini masih tanpa kendala.

Saya memutuskan untuk menggunakan static website saja untuk blog ini. Static website ini tidak cocok untuk semua use case atau scenario semua website. Tentunya karena tidak ada CMS dan database sehingga website yang sifatnya dinamis dan membutuhkan perubahan terlebih yang ada interaksi dengan pengguna maka tidak bisa menggunakan static website. Penggunaan static website akan lebih cocok untuk website yang contentnya tidak sering berubah seperti company profile, portofolio dan blog yang updatenya tidak sering dan tidak ada interaksi dengan pembaca blognya.

Konsepnya cukup simple yaitu saya membuat localhost di laptop saya lalu download sebagai static file kemudian saya publish ke AWS S3. Jadi di sini saya sama sekali tidak membutuhkan web server dan database untuk blog ini, hanya static file saja. AWS s3 selain sebagai bucket storage juga mempunyai fungsi sebagai static web hosting yang tentunya sangat reliable dengan uptime 99.99%.

Persiapan yang dibutuhkan

1. website atau blog yang berjalan di localhost. disini saya menggunakan platform ghost
2. Domain website yang digunakan dipindahkan ke AWS Route 53. Penggunaan AWS Route 53 ini untuk mempermudah pointing domain ke AWS S3+AWS Cloudfront
3. AWS S3 Bucket
4. AWS Cloudfront
5. AWS Certificate Manager

Localhost website

Di sini saya akan mencontohkan menggunakan platform ghost blog. Pertama kita harus install node.js dulu di laptop. Package node.js bisa di download pada link berikut https://nodejs.org/en/ disarankan menggunakan versi latest atau stable. Setelah nodejs terinstall langkat berikutnya adalah installasi ghost.

1. Buat 1 folder kosong yang akan digunakan sebagai folder website ghost
2. Buka command prompt atau terminal ketik perintah berikut

npm install ghost-cli@latest -g

3. Setelah itu ketik perintah

ghost install local

4. Setelah sukses installasi kita bisa akses ghost di url http://localhost:2368 dan untuk admin panel di http://localhost:2368/ghost

5. Silahkan lakukan setting pada ghost yang sudah dibuat dan menambahkan blog atau page sesuai yang diinginkan. jika akan migrasi dari wordpress tersedia plugin wordpress untuk download page dan post menjadi format ghost yang kemudian bisa di import ke ghost yang sudah dibuat tadi

6. Setelah kita selesai setting dan ghost sudah sesuai yang kita inginkan selanjutnya lakukan download content ghost. Kita buat 1 folder kosong untuk menampung file static webnya. di contoh ini saya menggunakan folder docs di dalam folder website ghost. lakukan download dengan perintah

wget -r -nH -P docs -E -T 2 -np -k http://localhost:2368/

Konfigurasi AWS Route 53

untuk menggunakan AWS Route 53 kita perlu akses ke domain registrant. Nanti pada domain registrant kita perlu update name server domain menggunakan name server AWS Route 53. Berikut langkah-langkahnya

1. Register domain di AWS Route 53 pada menu hosted zone. Klik create hosted zone

2. kembali ke menu hosted zone lalu pilih domain yang tadi kita buat. Masukan domain record atau bisa juga menggunakan import file agar lebih cepat.

3. Setelah semua record kita input langkah selanjutnya adalah merubah domain manager ke AWS Route 53. Buka hosted detail zone di bagian atas, di situ ada informasi DNS manager yang digunakan. input DNS Manager tersebut ke domain control panel. Setelah proses ini selesai kita perlu menunggu prosesp propagasi selesai. Kita bisa melakukan cek dengan menggunakan tools mxtoolbox.com.

Pengecekan dengan mxtoolbox.com

ok sekarang domain kita sudah menggunakan AWS Route 53 sebagai Domain Managernya

AWS S3 Bucket

Selanjutnya kita membuat AWS S3 Bucket sebagai tempat untuk menampung static file yang sudah kita download tadi. Masuk ke AWS S3

1. Buat bucket dengan nama sesuai domain kamu dalam contoh ini saya membuat menggunakan nama benidiktus.web.id
2. Pada permission access rubah menjadi public tujuannya agar file dapat diakses secara public. Default AWS S3 adalah private access jadi kita perlu menonaktifkan block public accessnya

4. tambahkan bucket policy berikut

5. Masuk ke tab properties dibagian paling bawah menu static web hosting klik edit. Aktifkan static webhosting, hosting static website dan isikan index.html

6. Lanjutkan dengan upload file static website ke bucket yang sudah dibuat. Pada bagian permission pilih grant public-read access

7. test static web dengan masuk ke URL AWS S3. URL bisa ditemukan pada tab properties -> static web hosting –> Bucket website endpoint

8. Jika website sudah bisa diload dengan url tersebut artinya kita sudah selesai hosting ke AWS S3

AWS Cloudfront dan AWS Certificate Manager

Sampai sini website kita sudah jadi tapi tentunya kita perlu menghubungkan AWS S3 dengan domain kita. Di sini kita akan menggunakan AWS Cloudfront sebagai CDN dan AWS Certificate Manager untuk issue SSL certificate sehingga website kita bisa diakses dengan HTTPS.

1. Pertama masuk ke menu AWS Cloudfront
2. Klik craete distribution
3. Original domain pilih AWS Bucket yang kita buat tadi

4. Pada bagian Default Cache Behaviour pilih redirect http to https. Opsi ini akan membuat website selalu diakses dalam mode HTTPS

5. Pada bagian alternate domain isikan domain kita. saya isi dengan benidiktus.web.id dan www.benidiktus.web.id

6. Akan muncul pop-up untuk pembuatan certificate. ikut langkahnya sampai recordnya tergenerate di AWS Route 53

7. Default root diisi dengan index.html

8. sampai sini kita sudah selesai membuat distribusi content dengan AWS Cloudfront. Silahkan tunggu sampai statusnya Enable

Pointing domain dengan AWS Cloudfront

Langkah selanjutnya masuk kembali ke AWS Route 53.

1. Pilih hosted zone sesuai domain yang kita buat tadi
2. kemudian create record. tambahkan blank dan www, lalu klik Alias record. Setelah itu pilih AWS Cloudfront dan pilih distribution yang kita sudah buat di langkah sebelumnya

3. lakukan untuk Record type AAAA (ipv6).

Sekarang test dengan membuka domain. Jika sudah benar maka website sudah bisa diload seperti biasa. Dengan cara ini kita sudah bisa mendapatkan website dengan koneksi HTTPS dan kecepatan loading yang sangat cepat.

Setiap kali ada perubahan maka perlu dilakukan proses download ulang dan upload ke AWS S3. Next saya akan membahas mengenai proses deployment yang lebih baik. Di sini proses deployment masih sangat manual