Si alguna vez, después de un deploy, te aparece un pantallazo blanco con algún error que ya habías visto antes o te resulta familiar, es posible que estés enfrentando un problema de caché. En este tutorial, te guiaré paso a paso en el proceso de despliegue de una aplicación en un bucket de S3 y cómo limpiar la caché de CloudFront para evitar estos problemas comunes.
Pasos para Desplegar en AWS:
1. Generar los Archivos de Producción
Primero, asegúrate de tener todos los archivos necesarios para el despliegue listos en tu entorno local. Para eso, debes ejecutar el comando de build de tu aplicación. En este ejemplo, estamos usando yarn para manejar dependencias y scripts.
yarn run buildEste comando compila tu proyecto y genera los archivos optimizados en la carpeta dist/. Esta carpeta contendrá los archivos que se subirán al bucket de S3.
2. Sincronizar los Archivos con el Bucket de S3
Una vez que tienes los archivos de producción, el siguiente paso es sincronizarlos con tu bucket de S3. Esto asegura que tu aplicación esté actualizada en el servidor.
aws s3 sync dist/ s3://nombre-de-tu-bucket --deleteEl flag --delete asegura que cualquier archivo que ya no esté presente en dist/ será eliminado del bucket, manteniendo la coherencia entre tu entorno local y el bucket.
3. Invalidar la Caché de CloudFront
Después de sincronizar los archivos con S3, es crucial invalidar la caché de CloudFront. CloudFront es una red de distribución de contenido (CDN) que cachea los archivos estáticos de tu aplicación para mejorar el rendimiento. Sin embargo, si no invalidas la caché después de una actualización, es probable que los usuarios sigan viendo versiones antiguas de los archivos.
aws cloudfront create-invalidation --distribution-id tu-distribution-id --paths "/*"Este comando invalida todos los archivos cacheados en CloudFront, asegurando que los usuarios reciban la versión más reciente de tu aplicación.
4. Evitar Errores de Caché (Opcional)
Si solo realizas los pasos 1 y 2, es posible que te enfrentes a un problema de pantalla blanca o errores en la consola relacionados con el webmanifest. Esto sucede porque los archivos antiguos aún están en la caché de CloudFront. Siempre asegúrate de realizar el paso 3 para evitar estos problemas.
Conclusión
Este proceso asegura que los cambios realizados en tu entorno local se reflejen correctamente en producción sin problemas de caché. Aunque puede parecer tentador omitir la invalidación de CloudFront para ahorrar tiempo, es un paso esencial para evitar errores frustrantes.
Si sigues estos pasos, podrás desplegar actualizaciones de forma segura y sin sorpresas desagradables. ¡Buena suerte con tu blog!
