AWS S3 + CloudFront ile dağıtım sırasında statik dosyaların yüklenememesi nedeniyle oluşan beyaz ekran sorununu çözmek

 (blog.lemonbase.team)
13 puan yazan whatsup 2025-02-10 | 1 yorum | WhatsApp'ta paylaş

Dağıtım sırasında statik dosyaların yüklenememesi nedeniyle beyaz ekran oluşması sorununu AWS S3 + CloudFront ile çözen bir yazı. AWS S3 + CloudFront ile kararlı bir statik dosya dağıtımı planlayanlara yardımcı olmasını umuyorum.

[Sorunun ortaya çıkış arka planı]

  • React + Vite tabanlı frontend servisinin işletilmesi
  • Dağıtımdan sonra aralıklı olarak beyaz ekran oluşması → statik dosyalar yüklenemiyor
  • Konsol hatası: MIME türü uyuşmazlığı (text/html dönüyor)

[Sorun analizi]

  • MIME türü uyuşmazlığı: statik dosya yerine HTML yanıtı dönüyor
  • Github Actions iptali → ECS instance'ının kaldırılması hipotezi
  • Dağıtım zamanı ile statik dosya servis etme zamanının uyuşmaması
  • Eski sürümün index.html dosyası yeni statik dosyalara referans veriyor ancak dosyalar silinmiş durumda

[Çözüm yöntemi]

  • CloudFront + S3 kullanımı (nihai karar)
  • Eski sürüm statik dosyalarını korumak için S3 mutlak yolu kullanımı
  • Vite build sırasında dosya adına commitHash, timestamp ekleme → benzersizliğin korunması
  • Gereksiz dosyaların otomatik silinmesi için S3 Lifecycle ayarı
  • Hızlı ve kararlı statik dosya servisi için CloudFront entegrasyonu
  • Local, Dev, Prod ortamları için ayrı yapılandırma

[Doğrulama sonuçları]

  • CloudFront + S3 yaklaşımının düzgün çalıştığı doğrulandı
  • Caching stratejisi uygulandı: tarayıcı önbelleği (Cache-Control, max-age) kontrol edildi
  • Dosyalara benzersizlik verildiği için cache invalidation gerekmiyor
  • Önceden olduğu gibi statik dosya eksikliği sorunu olmadan kararlı dağıtım mümkün

[Öğrenilenler]

  • Dağıtım ortamında statik dosya yönetimi UX üzerinde büyük etki yaratabilir.
  • Hipotez doğrularken hızlı ve basit yaklaşım önemlidir
  • S3 + CloudFront kullanan dağıtım ortamı optimizasyonu deneyimi
  • Ortama göre dağıtım stratejilerinin (Local, Dev, Prod) ayrıştırılması gerekir
  • Tarayıcı önbelleği davranışını (Cache-Control, from disk cache) anlamak şarttır

İlgili okumalar

1 yorum

 
cnaa97 2025-02-10

Rolling olduğu için sorun çıkması zaten normal. Dağıtım süresini kısaltabilir ya da dağıtımı ayırıp trafiği tek tarafa toplayan blue-green stratejisiyle yapabilirsiniz.

Ya da React’te error catch yapıp yeniden yüklemeyi zorlayabilirsiniz.