Cómo Hacer Deploy de una App React en AWS S3 y CloudFront

En este tutorial, aprenderás a desplegar una aplicación React en AWS utilizando S3 para almacenamiento de archivos estáticos y CloudFront para distribución de contenido. Este proceso incluye tres pasos básicos.

Comandos para hacer deploy

1. Construir la aplicación

Primero, asegúrate de que tu aplicación está lista para producción generando los archivos estáticos:

yarn build

Este comando crea una carpeta dist/ (o build/ según tu configuración) con todos los archivos optimizados para producción.

2. Subir los archivos a S3

Sincroniza los archivos generados con tu bucket de S3 utilizando el siguiente comando:

aws s3 sync dist/ s3://mi-bucket-s3 --delete --region us-east-1

Este comando:

• dist/: Especifica la carpeta donde se encuentran los archivos generados.
• s3://mi-bucket-s3: Especifica el bucket de S3 donde se subirán los archivos.
• --delete: Elimina archivos en el bucket de S3 que ya no están en tu carpeta local.
• --region us-east-1: Define la región donde se encuentra tu bucket.

3. Invalidar la caché de CloudFront

Una vez que los archivos se han subido a S3, invalida la caché de CloudFront para asegurarte de que los usuarios obtienen la versión más reciente:

aws cloudfront create-invalidation --distribution-id ABCD1234EXAMPLE --paths "/*"

Este comando:

• --distribution-id ABCD1234EXAMPLE: Especifica el ID de tu distribución de CloudFront (reemplázalo con tu propio ID).
• --paths "/*": Indica que toda la caché debe ser invalidada.

Resumen de comandos

Estos son los comandos necesarios para desplegar tu aplicación React en S3 y CloudFront:

# 1. Generar archivos estáticos
yarn build

# 2. Sincronizar con S3
aws s3 sync dist/ s3://mi-bucket-s3 --delete --region us-east-1

# 3. Invalidar la caché de CloudFront
aws cloudfront create-invalidation --distribution-id ABCD1234EXAMPLE --paths "/*"

Notas adicionales

• Asegúrate de que tienes configuradas tus credenciales de AWS correctamente antes de ejecutar estos comandos.
• El comando yarn build requiere que tengas Yarn instalado y configurado en tu entorno.
• Reemplaza los valores mi-bucket-s3 y ABCD1234EXAMPLE con los nombres e IDs específicos de tu proyecto.

¡Espero que este tutorial te sea útil para tus despliegues! Si tienes preguntas o sugerencias, no dudes en comentarlas.