Panduan Teknis Hosting Frontend Serverless: S3 dan CloudFront

Arsitektur Hosting Frontend Serverless

Hosting frontend serverless menggunakan kombinasi Amazon S3 dan Amazon CloudFront adalah standar industri untuk aplikasi web statis (React, Vue, Angular, atau HTML murni). S3 berfungsi sebagai penyimpanan objek (origin) untuk file statis, sementara CloudFront bertindak sebagai Content Delivery Network (CDN) yang mendistribusikan konten ke edge location di seluruh dunia untuk latensi minimal.

Langkah Implementasi Teknis

1. Konfigurasi S3 Bucket: Buat bucket S3, unggah file build frontend, dan pastikan akses publik dibatasi hanya untuk CloudFront menggunakan Origin Access Control (OAC).
2. Konfigurasi CloudFront: Buat distribusi CloudFront, arahkan origin ke bucket S3, dan atur Default Root Object ke 'index.html'.
3. Penanganan Single Page Application (SPA): Tambahkan Custom Error Response di CloudFront untuk mengarahkan error 403/404 ke 'index.html' agar routing sisi klien (seperti React Router) berfungsi dengan benar.

Analisis Performa dan Biaya

Pendekatan ini menghilangkan kebutuhan akan server tradisional (EC2). Biaya dihitung berdasarkan penggunaan (pay-as-you-go). S3 mengenakan biaya penyimpanan dan transfer data, sementara CloudFront mengenakan biaya transfer data keluar dengan tarif yang lebih kompetitif dibanding transfer langsung dari S3.

Troubleshooting Umum

• Error 403 Forbidden: Pastikan OAC telah dikonfigurasi dengan benar pada S3 Bucket Policy.
• Cache Tidak Terupdate: Lakukan Invalidation pada distribusi CloudFront setelah mengunggah versi baru aplikasi.
• HTTPS Tidak Aktif: Pastikan sertifikat SSL di ACM berada di region 'us-east-1' agar dapat digunakan oleh CloudFront.