Behebung des Problems eines weißen Bildschirms beim Deployment mit AWS S3 + CloudFront, weil statische Dateien nicht geladen werden konnten

Ein Beitrag darüber, wie das Problem eines weißen Bildschirms beim Deployment gelöst wurde, das dadurch entstand, dass statische Dateien nicht geladen werden konnten – mithilfe von AWS S3 + CloudFront. Hoffentlich ist er hilfreich für alle, die über ein stabiles Deployment statischer Dateien mit AWS S3 + CloudFront nachdenken.

[Hintergrund des Problems]

• Betrieb eines Frontend-Service auf Basis von React + Vite
• Nach dem Deployment trat gelegentlich ein weißer Bildschirm auf → statische Dateien konnten nicht geladen werden
• Konsolenfehler: MIME-Typ stimmt nicht überein (text/html wurde zurückgegeben)

[Problemanalyse]

• MIME-Typ stimmt nicht überein: Statt statischer Dateien wurde eine HTML-Antwort zurückgegeben
• Hypothese: Abbruch von Github Actions → ECS-Instanz entfernt
• Inkonsistenz zwischen Deployment-Zeitpunkt und Auslieferung statischer Dateien
• index.html der bestehenden Version verweist auf neue statische Dateien, diese wurden jedoch entfernt

[Lösungsansatz]

• Einsatz von CloudFront + S3 (endgültige Entscheidung)
• Verwendung absoluter S3-Pfade, um statische Dateien früherer Versionen beizubehalten
• Beim Vite-Build wurden commitHash und timestamp zu Dateinamen hinzugefügt → Eindeutigkeit bleibt erhalten
• Automatisches Löschen unnötiger Dateien per S3 Lifecycle-Konfiguration
• Anbindung an CloudFront für schnelle und stabile Auslieferung statischer Dateien
• Separate Konfigurationen für die Umgebungen Local, Dev und Prod

[Ergebnisse der Verifikation]

• Bestätigung, dass der Ansatz mit CloudFront + S3 korrekt funktioniert
• Caching-Strategie angewendet: Browser-Cache (Cache-Control, max-age) überprüft
• Dank eindeutiger Dateinamen ist keine Cache-Invalidierung erforderlich
• Stabiles Deployment möglich, ohne fehlende statische Dateien wie zuvor

[Was man daraus gelernt hat]

• Die Verwaltung statischer Dateien in der Deployment-Umgebung kann großen Einfluss auf die UX haben.
• Bei der Überprüfung von Hypothesen ist ein schneller und einfacher Ansatz wichtig
• Erfahrung mit der Optimierung einer Deployment-Umgebung unter Einsatz von S3 + CloudFront
• Unterschiedliche Deployment-Strategien je nach Umgebung (Local, Dev, Prod) sind notwendig
• Ein Verständnis des Browser-Cachings (Cache-Control, from disk cache) ist unerlässlich

[cnaa97]

Weil es ein Rolling Deployment ist, ist das Problem ja naheliegend. Man kann die Deployment-Zeit verkürzen oder das Deployment trennen und mit einer Blue-Green-Strategie den Traffic auf eine Seite bündeln.

Oder man fängt den React-Fehler ab und erzwingt einen Reload.