Mengatasi masalah layar putih saat deploy dengan AWS S3 + CloudFront karena file statis gagal dimuat

Ini adalah tulisan tentang cara mengatasi masalah layar putih yang terjadi karena file statis gagal dimuat saat deploy dengan AWS S3 + CloudFront. Semoga bermanfaat bagi mereka yang sedang mempertimbangkan distribusi file statis yang stabil menggunakan AWS S3 + CloudFront.

[Latar belakang terjadinya masalah]

• Mengoperasikan layanan frontend berbasis React + Vite
• Setelah deploy, layar putih muncul secara intermittent → file statis gagal dimuat
• Error di konsol: ketidaksesuaian tipe MIME (text/html dikembalikan)

[Analisis masalah]

• Ketidaksesuaian tipe MIME: respons HTML dikembalikan, bukan file statis
• Hipotesis bahwa pembatalan Github Actions → instance ECS terhapus
• Ketidaksesuaian antara waktu deploy dan penyajian file statis
• index.html versi lama merujuk ke file statis baru, tetapi file tersebut sudah dihapus

[Cara mengatasinya]

• Memanfaatkan CloudFront + S3 (keputusan akhir)
• Menggunakan absolute path S3 agar file statis versi lama tetap dipertahankan
• Saat build Vite, menambahkan commitHash, timestamp pada nama file → menjaga keunikan
• Mengatur S3 Lifecycle untuk menghapus file yang tidak diperlukan secara otomatis
• Menghubungkan CloudFront untuk penyajian file statis yang cepat dan stabil
• Pengaturan terpisah untuk environment Local, Dev, Prod

[Hasil verifikasi]

• Terkonfirmasi bahwa pendekatan CloudFront + S3 berjalan normal
• Strategi caching diterapkan: memeriksa cache browser (Cache-Control, max-age)
• Tidak perlu invalidasi cache karena setiap file dibuat unik
• Deploy yang stabil dimungkinkan tanpa masalah file statis hilang seperti sebelumnya

[Hal yang dipelajari]

• Dalam environment deploy, pengelolaan file statis dapat sangat memengaruhi UX.
• Saat memverifikasi hipotesis, pendekatan yang cepat dan sederhana itu penting
• Mendapat pengalaman mengoptimalkan environment deploy dengan memanfaatkan S3 + CloudFront
• Perlu membedakan strategi deploy untuk tiap environment (Local, Dev, Prod)
• Memahami cara kerja caching browser (Cache-Control, from disk cache) adalah hal penting

[cnaa97]

Karena ini rolling, ya wajar jadi masalah. Solusinya, waktu deployment dipersingkat atau deployment dipisah lalu trafik diarahkan ke satu sisi dengan strategi blue-green.

Atau, bisa juga tangkap error di React lalu paksa reload.