Cómo resolver el problema de pantalla en blanco al desplegar con AWS S3 + CloudFront por no poder cargar archivos estáticos

Este es un artículo sobre cómo se resolvió con AWS S3 + CloudFront el problema de pantalla en blanco que ocurría durante el despliegue cuando no se podían cargar archivos estáticos. Espero que sea útil para quienes estén evaluando una forma estable de desplegar archivos estáticos con AWS S3 + CloudFront.

[Contexto del problema]

• Operación de un servicio frontend basado en React + Vite
• Después del despliegue, aparecía de forma intermitente una pantalla en blanco → no se podían cargar los archivos estáticos
• Error en la consola: incompatibilidad de tipo MIME (se devolvía text/html)

[Análisis del problema]

• Incompatibilidad de tipo MIME: se devolvía una respuesta HTML en lugar de un archivo estático
• Hipótesis: cancelación de Github Actions → eliminación de la instancia de ECS
• Desajuste entre el momento del despliegue y el servicio de archivos estáticos
• El index.html de la versión anterior referenciaba nuevos archivos estáticos, pero esos archivos ya habían sido eliminados

[Solución]

• Uso de CloudFront + S3 (decisión final)
• Uso de rutas absolutas de S3 para mantener los archivos estáticos de versiones anteriores
• Al compilar con Vite, se agregan commitHash y timestamp al nombre del archivo → se mantiene la unicidad
• Configuración de S3 Lifecycle para eliminar automáticamente archivos innecesarios
• Integración con CloudFront para servir archivos estáticos de forma rápida y estable
• Configuración separada para los entornos Local, Dev y Prod

[Resultados de la verificación]

• Se confirmó el funcionamiento correcto del enfoque CloudFront + S3
• Se aplicó una estrategia de caché: revisión de la caché del navegador (Cache-Control, max-age)
• Al dar unicidad a los archivos, no hace falta invalidar la caché
• Es posible hacer despliegues estables sin el problema de archivos estáticos faltantes como ocurría antes

[Lecciones aprendidas]

• La gestión de archivos estáticos en el entorno de despliegue puede tener un gran impacto en la UX.
• Al validar hipótesis, es importante un enfoque rápido y simple
• Experiencia de optimización del entorno de despliegue usando S3 + CloudFront
• Necesidad de diferenciar la estrategia de despliegue por entorno (Local, Dev, Prod)
• Es indispensable entender cómo funciona la caché del navegador (Cache-Control, from disk cache)

[cnaa97]

Como es un despliegue rolling, obviamente ahí está el problema. Puedes reducir el tiempo de despliegue o separar el despliegue y usar una estrategia blue-green para concentrar el tráfico en un solo lado.

O también puedes capturar el error en React y forzar una recarga.