🍰 Cara Saya Hosting Website Statis Pertama Saya di AWS S3 – Perjalanan Pemula dengan Flavors & Bakes

Pernahkah Anda bermimpi untuk memiliki website sendiri, tempat Anda dapat menampilkan karya Anda, berbagi pemikiran Anda, atau bahkan menjual kreasi Anda? Saya juga pernah! Dan setelah banyak penelitian dan (sejujurnya) beberapa kebingungan, saya akhirnya berhasil hosting website statis pertama saya di AWS S3. Mari saya ceritakan bagaimana Flavors & Bakes, website resep kue sederhana saya, akhirnya online!

Artikel ini adalah jurnal perjalanan saya, penuh dengan tantangan, kemenangan kecil, dan pelajaran penting yang saya pelajari di sepanjang jalan. Jadi, jika Anda seorang pemula yang ingin tahu bagaimana memulai hosting website statis Anda sendiri di AWS S3, Anda berada di tempat yang tepat. Saya akan membagikan semua yang saya pelajari, langkah demi langkah, sehingga Anda dapat menghindari kesalahan yang sama yang saya lakukan dan membuat website Anda online lebih cepat dan mudah.

🤔 Mengapa Memilih AWS S3 untuk Hosting Website Statis?

Sebelum kita membahas detailnya, mari kita bicarakan mengapa saya memilih AWS S3 (Simple Storage Service) untuk hosting website statis saya. Ada banyak opsi di luar sana, tetapi S3 menawarkan beberapa keuntungan yang meyakinkan:

1. Skalabilitas: S3 dirancang untuk menangani lalu lintas yang sangat besar. Anda tidak perlu khawatir website Anda akan down jika tiba-tiba banyak orang mengunjunginya.
2. Keandalan: AWS memiliki reputasi yang sangat baik untuk uptime dan keandalan. Anda dapat yakin bahwa website Anda akan selalu tersedia.
3. Biaya Efektif: Untuk website statis dengan lalu lintas yang relatif rendah, S3 bisa sangat terjangkau. Anda hanya membayar untuk penyimpanan dan bandwidth yang Anda gunakan.
4. Kemudahan Penggunaan: Meskipun AWS memiliki banyak layanan yang kompleks, S3 relatif mudah digunakan, terutama untuk hosting website statis.
5. Integrasi dengan Layanan AWS Lainnya: S3 terintegrasi dengan baik dengan layanan AWS lainnya, seperti CloudFront (CDN) dan Route 53 (DNS), yang dapat membantu Anda meningkatkan performa dan keamanan website Anda.

🗺️ Kerangka Perjalanan: Langkah-Langkah yang Akan Kita Lalui

Berikut adalah kerangka langkah-langkah yang akan kita lalui dalam artikel ini:

1. Persiapan: Memastikan Anda memiliki akun AWS dan memahami dasar-dasar website statis.
2. Membuat Bucket S3: Membuat wadah untuk menyimpan file website Anda.
3. Mengunggah File Website: Memindahkan file HTML, CSS, JavaScript, dan gambar Anda ke bucket S3.
4. Konfigurasi Hosting Website Statis: Mengaktifkan fitur hosting website statis di bucket Anda.
5. Mengatur Izin: Membuat website Anda dapat diakses secara publik.
6. Menguji Website Anda: Memastikan website Anda berfungsi seperti yang diharapkan.
7. (Opsional) Menggunakan Domain Kustom: Menghubungkan domain Anda sendiri ke website Anda.
8. (Opsional) Menggunakan HTTPS dengan CloudFront: Mengamankan website Anda dengan sertifikat SSL/TLS.
9. Tips & Trik: Berbagi beberapa tips untuk mengoptimalkan website Anda dan menghindari kesalahan umum.

1️⃣ Persiapan: Akun AWS dan Pemahaman Dasar

Sebelum kita mulai menyelam ke detail teknis, ada beberapa hal yang perlu Anda persiapkan:

• Akun AWS: Jika Anda belum memiliki akun AWS, Anda perlu membuatnya. Kunjungi website AWS (https://aws.amazon.com) dan ikuti petunjuknya. AWS menawarkan tingkat gratis yang memungkinkan Anda menggunakan banyak layanan mereka secara gratis selama 12 bulan pertama.
• Pemahaman Dasar Website Statis: Anda perlu memahami dasar-dasar website statis. Website statis terdiri dari file HTML, CSS, JavaScript, dan gambar yang dikirimkan langsung ke browser pengguna tanpa pemrosesan server. Ini berbeda dengan website dinamis, yang menggunakan bahasa server-side seperti PHP atau Python untuk menghasilkan halaman secara dinamis.
• File Website Statis: Anda perlu memiliki file website statis yang siap diunggah. Ini termasuk file HTML utama (biasanya index.html), file CSS untuk styling, file JavaScript untuk interaktivitas, dan file gambar. Untuk Flavors & Bakes, saya memiliki folder dengan struktur berikut:
  • index.html: Halaman utama website.
  • css/: Folder yang berisi file CSS (misalnya, style.css).
  • images/: Folder yang berisi gambar-gambar resep kue.
  • js/: Folder yang berisi file JavaScript (jika ada).
• AWS CLI (Opsional tapi Sangat Disarankan): AWS Command Line Interface (CLI) adalah alat yang memungkinkan Anda berinteraksi dengan layanan AWS dari baris perintah. Ini bisa sangat berguna untuk mengotomatiskan tugas dan mengelola sumber daya AWS Anda. Anda dapat mengunduh dan menginstal AWS CLI dari website AWS (https://aws.amazon.com/cli/). Siapkan AWS CLI dengan kredensial AWS Anda setelah diinstal.

2️⃣ Membuat Bucket S3: Wadah untuk Website Anda

Langkah pertama adalah membuat bucket S3. Bucket S3 adalah wadah untuk menyimpan semua file website Anda.

Melalui Konsol AWS:

1. Masuk ke Konsol AWS: Buka konsol AWS dan masuk dengan kredensial Anda.
2. Buka Layanan S3: Cari “S3” di bilah pencarian dan pilih “S3”.
3. Buat Bucket: Klik tombol “Create bucket”.
4. Konfigurasi Bucket:
   • Bucket name: Masukkan nama bucket. Penting: Nama bucket harus unik secara global. Saya memilih flavors-and-bakes.com karena itu adalah domain yang ingin saya gunakan (Anda bisa menggunakan nama lain yang unik). Nama bucket juga akan menjadi bagian dari URL default website Anda.
   • Region: Pilih wilayah AWS yang paling dekat dengan audiens Anda. Ini dapat membantu mengurangi latensi dan meningkatkan performa website Anda. Saya memilih us-east-1 (N. Virginia).
   • Block All Public Access: Nonaktifkan opsi “Block all public access”. Ini penting agar website Anda dapat diakses secara publik. Anda akan mengkonfigurasi izin yang lebih spesifik nanti.
   • Bucket Versioning: Secara opsional, Anda dapat mengaktifkan versioning bucket. Ini memungkinkan Anda untuk menyimpan beberapa versi file Anda, yang dapat berguna jika Anda perlu mengembalikan perubahan. Saya biasanya tidak mengaktifkannya untuk website statis sederhana.
   • Default Encryption: Secara opsional, Anda dapat mengaktifkan enkripsi default untuk bucket Anda. Ini mengenkripsi semua file yang disimpan di bucket. Saya biasanya tidak mengaktifkannya untuk website statis sederhana.
   • Tags: Anda dapat menambahkan tag ke bucket Anda untuk organisasi dan pelacakan biaya. Ini opsional.
   • Klik “Create bucket”: Setelah Anda mengkonfigurasi bucket, klik tombol “Create bucket”.

Menggunakan AWS CLI:

Jika Anda lebih suka menggunakan AWS CLI, Anda dapat membuat bucket dengan perintah berikut:

aws s3 mb s3://flavors-and-bakes.com --region us-east-1

Ganti flavors-and-bakes.com dengan nama bucket yang Anda inginkan dan us-east-1 dengan wilayah AWS yang Anda pilih.

3️⃣ Mengunggah File Website: Memindahkan Flavors & Bakes ke S3

Sekarang setelah Anda memiliki bucket S3, Anda perlu mengunggah file website Anda ke dalamnya.

Melalui Konsol AWS:

1. Buka Bucket Anda: Di konsol S3, klik nama bucket yang baru Anda buat.
2. Unggah File: Klik tombol “Upload”.
3. Tambahkan File: Anda dapat mengunggah file satu per satu dengan mengklik tombol “Add files” atau mengunggah seluruh folder dengan mengklik tombol “Add folder”.
4. Konfigurasi Izin: Secara default, semua file yang Anda unggah ke bucket S3 bersifat pribadi. Anda perlu membuat file index.html Anda dapat diakses secara publik agar website Anda dapat dilihat. Setelah file diunggah, pilih file index.html, klik “Actions”, lalu “Make public”.
5. Unggah: Klik tombol “Upload”.

Menggunakan AWS CLI:

Menggunakan AWS CLI jauh lebih efisien untuk mengunggah banyak file dan folder. Gunakan perintah berikut:

aws s3 sync . s3://flavors-and-bakes.com --acl public-read

Perintah ini menyalin semua file dan folder dari direktori saat ini (.) ke bucket S3 flavors-and-bakes.com. Opsi --acl public-read membuat semua file yang diunggah dapat diakses secara publik. Pastikan Anda menjalankan perintah ini dari direktori root website Anda (yaitu, direktori yang berisi file index.html Anda).

4️⃣ Konfigurasi Hosting Website Statis: Mengaktifkan Fitur Ajaib

Setelah file Anda berada di S3, Anda perlu mengaktifkan fitur hosting website statis untuk bucket Anda.

Melalui Konsol AWS:

1. Buka Bucket Anda: Di konsol S3, klik nama bucket Anda.
2. Buka Tab “Properties”: Klik tab “Properties”.
3. Scroll ke “Static website hosting”: Gulir ke bawah ke bagian “Static website hosting” dan klik “Edit”.
4. Enable: Pilih “Enable”.
5. Index document: Masukkan nama file HTML utama Anda (biasanya index.html).
6. Error document (opsional): Anda dapat menentukan halaman kesalahan khusus (misalnya, error.html) yang akan ditampilkan jika terjadi kesalahan. Jika Anda tidak memilikinya, biarkan kosong.
7. Save changes: Klik tombol “Save changes”.

5️⃣ Mengatur Izin: Memastikan Dunia Dapat Melihat Flavors & Bakes

Meskipun Anda membuat file index.html dapat diakses secara publik saat mengunggahnya, Anda juga perlu memastikan bahwa bucket Anda memiliki kebijakan yang memungkinkan akses publik.

Melalui Konsol AWS:

1. Buka Bucket Anda: Di konsol S3, klik nama bucket Anda.
2. Buka Tab “Permissions”: Klik tab “Permissions”.
3. Edit “Bucket policy”: Di bagian “Bucket policy”, klik tombol “Edit”.
4. Masukkan Kebijakan Bucket: Masukkan kebijakan bucket berikut:

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

   Penting: Ganti flavors-and-bakes.com dengan nama bucket Anda yang sebenarnya.

5. Save changes: Klik tombol “Save changes”.

Penjelasan Kebijakan Bucket:

• “Version”: Menentukan versi bahasa kebijakan.
• “Statement”: Berisi daftar pernyataan kebijakan.
• “Sid”: Pengidentifikasi opsional untuk pernyataan tersebut.
• “Effect”: Menentukan apakah pernyataan tersebut mengizinkan atau menolak akses. Dalam hal ini, kita mengizinkan akses.
• “Principal”: Menentukan siapa yang diizinkan akses. "*" berarti semua orang (publik).
• “Action”: Menentukan tindakan S3 yang diizinkan. "s3:GetObject" berarti mengizinkan akses untuk mengambil objek (file) dari bucket.
• “Resource”: Menentukan sumber daya yang terpengaruh oleh kebijakan tersebut. "arn:aws:s3:::flavors-and-bakes.com/*" berarti semua objek di dalam bucket flavors-and-bakes.com.

6️⃣ Menguji Website Anda: Saatnya Mencicipi Hasilnya!

Sekarang saatnya untuk menguji website Anda dan memastikan semuanya berfungsi seperti yang diharapkan.

1. Dapatkan Endpoint Website: Di konsol S3, buka bucket Anda, klik tab “Properties”, dan gulir ke bawah ke bagian “Static website hosting”. Anda akan melihat endpoint website. Itu adalah URL yang dapat Anda gunakan untuk mengakses website Anda. Biasanya terlihat seperti ini: http://flavors-and-bakes.com.s3-website-us-east-1.amazonaws.com.
2. Buka URL di Browser Anda: Salin URL dan tempelkan ke browser Anda. Jika semuanya dikonfigurasi dengan benar, Anda akan melihat website Anda!
3. Uji Fungsionalitas: Klik tautan, periksa gambar, dan pastikan semua elemen website Anda berfungsi seperti yang diharapkan.
4. Perbaiki Kesalahan: Jika Anda melihat kesalahan, periksa konfigurasi bucket Anda, izin, dan file website Anda. Pastikan semuanya sudah diunggah dengan benar dan bahwa nama file dan jalur sudah benar.

7️⃣ (Opsional) Menggunakan Domain Kustom: Membuat Website Anda Lebih Profesional

Menggunakan URL S3 default untuk website Anda tidak terlalu menarik. Anda dapat menggunakan domain kustom Anda sendiri (misalnya, flavors-and-bakes.com) untuk membuat website Anda terlihat lebih profesional.

Untuk menggunakan domain kustom, Anda perlu melakukan hal berikut:

1. Daftarkan Domain: Jika Anda belum memiliki domain, Anda perlu mendaftarkannya. Anda dapat menggunakan registrar domain seperti GoDaddy, Namecheap, atau Google Domains.
2. Gunakan Route 53 (Direkomendasikan): AWS Route 53 adalah layanan DNS (Domain Name System) yang dapat Anda gunakan untuk mengelola domain Anda. Ini terintegrasi dengan baik dengan S3 dan layanan AWS lainnya.
   • Buat Hosted Zone: Di konsol Route 53, buat hosted zone untuk domain Anda (misalnya, flavors-and-bakes.com).
   • Buat Record Set: Buat record set “A” yang mengarahkan domain Anda ke endpoint S3 Anda. Anda perlu membuat dua record set: satu untuk domain root (flavors-and-bakes.com) dan satu untuk subdomain www (www.flavors-and-bakes.com). Untuk kedua record set, pilih “Alias” sebagai jenis record dan pilih bucket S3 Anda sebagai target alias.
3. Atau, Gunakan Penyedia DNS Lain: Jika Anda lebih suka menggunakan penyedia DNS lain, Anda dapat membuat record DNS yang sesuai untuk mengarahkan domain Anda ke endpoint S3 Anda. Anda biasanya perlu membuat record “A” atau record “CNAME”.
4. Perhatikan Propagasi DNS: Perubahan DNS membutuhkan waktu untuk dipropagasi di internet. Mungkin perlu beberapa jam sebelum website Anda dapat diakses melalui domain kustom Anda.

8️⃣ (Opsional) Menggunakan HTTPS dengan CloudFront: Mengamankan Website Anda

HTTPS (Hypertext Transfer Protocol Secure) mengenkripsi komunikasi antara browser pengguna dan server Anda, melindungi data sensitif dari intersepsi. Sangat disarankan untuk menggunakan HTTPS untuk semua website Anda, bahkan website statis.

Cara termudah untuk menggunakan HTTPS dengan website statis yang dihosting di S3 adalah dengan menggunakan AWS CloudFront, layanan CDN (Content Delivery Network) AWS.

1. Buat Distribusi CloudFront: Di konsol CloudFront, buat distribusi CloudFront baru.
2. Konfigurasi Distribusi:
   • Origin Domain Name: Pilih endpoint website S3 Anda sebagai origin domain name. Penting: Jangan pilih bucket S3 secara langsung. Pilih endpoint website S3.
   • Viewer Protocol Policy: Pilih “Redirect HTTP to HTTPS” atau “HTTPS Only”.
   • Allowed HTTP Methods: Pilih “GET, HEAD”.
   • Cached HTTP Methods: Pilih “GET, HEAD”.
   • Cache Based on Selected Request Headers: Pilih “Whitelist” dan tambahkan header yang ingin Anda cache. Anda mungkin ingin menyertakan header seperti “Origin” dan “Authorization”.
   • Distribution Settings:
     • Alternate Domain Names (CNAMEs): Tambahkan domain kustom Anda (misalnya, flavors-and-bakes.com dan www.flavors-and-bakes.com).
     • SSL Certificate: Pilih sertifikat SSL/TLS. Anda dapat menggunakan sertifikat yang disediakan AWS Certificate Manager (ACM) secara gratis. Jika Anda belum memiliki sertifikat, Anda dapat memintanya melalui ACM. Pastikan sertifikat yang Anda minta valid untuk domain Anda.
     • Supported HTTP Versions: Pilih “HTTP/2, HTTP/1.1, HTTP/1.0”.
     • Default Root Object: Masukkan nama file HTML utama Anda (biasanya index.html).
3. Buat Distribusi: Klik tombol “Create Distribution”.
4. Perbarui Record DNS: Setelah distribusi CloudFront Anda dibuat, Anda perlu memperbarui record DNS Anda untuk mengarahkan domain Anda ke domain distribusi CloudFront. Di konsol Route 53 (atau penyedia DNS Anda), ubah record “A” Anda untuk menggunakan alias ke domain distribusi CloudFront Anda (yang terlihat seperti d111111abcdef8.cloudfront.net).
5. Perhatikan Propagasi: Perubahan DNS membutuhkan waktu untuk dipropagasi. Mungkin perlu beberapa jam sebelum website Anda dapat diakses melalui HTTPS.

💡 Tips & Trik: Membuat Website Anda Lebih Baik

Berikut adalah beberapa tips dan trik untuk mengoptimalkan website Anda dan menghindari kesalahan umum:

• Gunakan Nama Bucket yang Sesuai: Pilih nama bucket yang deskriptif dan mudah diingat. Jika Anda berencana untuk menggunakan domain kustom, gunakan nama domain Anda sebagai nama bucket.
• Optimalkan Gambar: Kompres gambar Anda untuk mengurangi ukuran file dan meningkatkan kecepatan pemuatan halaman. Anda dapat menggunakan alat seperti TinyPNG atau ImageOptim.
• Minifikasi CSS dan JavaScript: Minifikasi file CSS dan JavaScript Anda untuk menghapus spasi putih dan karakter yang tidak perlu. Ini dapat membantu mengurangi ukuran file dan meningkatkan kecepatan pemuatan halaman. Anda dapat menggunakan alat seperti CSSNano atau UglifyJS.
• Gunakan CDN: Gunakan CDN seperti CloudFront untuk mendistribusikan konten Anda ke server di seluruh dunia. Ini dapat membantu mengurangi latensi dan meningkatkan performa website Anda untuk pengguna di seluruh dunia.
• Konfigurasi Caching: Konfigurasi caching yang tepat untuk file Anda. Anda dapat menggunakan header cache-control untuk menentukan berapa lama browser dan CDN harus menyimpan file Anda.
• Pantau Website Anda: Pantau website Anda untuk memastikan bahwa website tersebut selalu tersedia dan berfungsi seperti yang diharapkan. Anda dapat menggunakan layanan pemantauan seperti AWS CloudWatch atau UptimeRobot.
• Gunakan Error Pages Khusus: Buat halaman kesalahan khusus (misalnya, 404.html) untuk memberikan pengalaman yang lebih baik kepada pengguna jika terjadi kesalahan.
• Verifikasi Izin: Selalu verifikasi izin bucket dan file Anda untuk memastikan bahwa website Anda aman dan hanya dapat diakses oleh orang-orang yang seharusnya.
• Aktifkan Logging: Aktifkan logging akses S3 untuk melacak siapa yang mengakses file Anda dan kapan. Ini dapat membantu Anda mendiagnosis masalah dan meningkatkan keamanan.
• Gunakan AWS CLI: AWS CLI adalah alat yang sangat berguna untuk mengelola sumber daya AWS Anda. Pelajari cara menggunakannya untuk mengotomatiskan tugas dan meningkatkan efisiensi Anda.

🚫 Kesalahan Umum yang Harus Dihindari

Berikut adalah beberapa kesalahan umum yang harus Anda hindari saat hosting website statis di AWS S3:

• Lupa Menonaktifkan “Block All Public Access”: Ini adalah kesalahan paling umum. Jika Anda tidak menonaktifkan opsi ini, website Anda tidak akan dapat diakses secara publik.
• Lupa Membuat File index.html Dapat Diakses Publik: Pastikan Anda membuat file index.html Anda dapat diakses secara publik.
• Salah Nama File HTML Utama: Pastikan Anda menentukan nama file HTML utama yang benar (biasanya index.html) di konfigurasi hosting website statis.
• Salah Ketik Nama Bucket di Kebijakan Bucket: Pastikan Anda mengetik nama bucket yang benar di kebijakan bucket.
• Tidak Menggunakan HTTPS: Selalu gunakan HTTPS untuk mengamankan website Anda.
• Tidak Mengoptimalkan Gambar: Optimalkan gambar Anda untuk mengurangi ukuran file dan meningkatkan kecepatan pemuatan halaman.
• Tidak Mengkonfigurasi Caching: Konfigurasi caching yang tepat untuk file Anda.

🎉 Kesimpulan: Flavors & Bakes Siap Melayani Dunia!

Saya harap panduan langkah demi langkah ini membantu Anda dalam perjalanan hosting website statis Anda sendiri di AWS S3. Meskipun awalnya terasa menakutkan, dengan sedikit kesabaran dan panduan yang tepat, Anda dapat membuat website Anda online dalam waktu singkat. Flavors & Bakes saya, website resep kue sederhana saya, sekarang siap untuk melayani dunia dengan resep-resep lezat dan tips membuat kue yang bermanfaat!

Jangan takut untuk bereksperimen, belajar dari kesalahan Anda, dan terus menjelajahi kemungkinan yang ditawarkan AWS. Selamat hosting dan semoga website Anda sukses!

📚 Sumber Daya Tambahan

Berikut adalah beberapa sumber daya tambahan yang mungkin bermanfaat:

• Dokumentasi AWS S3: https://docs.aws.amazon.com/s3/index.html
• Dokumentasi AWS CloudFront: https://docs.aws.amazon.com/cloudfront/index.html
• AWS CLI Command Reference: https://awscli.amazonaws.com/v2/documentation/api/index.html
• Tutorial Hosting Website Statis di AWS S3: (Cari di Google untuk tutorial terbaru dan paling relevan)