Configuración de un Frontend de React en Amazon S3 y CloudFront

Este tutorial te guiará a través de los pasos para configurar tu frontend de React en Amazon S3 y distribuirlo con Amazon CloudFront.

Paso 1: Preparar tu proyecto de React

Asegúrate de que tu proyecto de React esté listo para producción ejecutando el siguiente comando en la terminal:

yarn build

Esto creará una carpeta build en tu proyecto que contendrá los archivos estáticos de tu aplicación.

Paso 2: Crear un Bucket en Amazon S3

1. Inicia sesión en la consola de administración de AWS y navega al servicio Amazon S3.
2. Haz clic en “Create bucket” (Crear bucket).
3. Proporciona un nombre único para tu bucket. Recuerda que este nombre debe ser único globalmente.
4. Desactiva la opción “Block all public access” y acepta el aviso sobre hacer tu bucket público.
5. Deja las demás configuraciones con sus valores predeterminados y haz clic en “Create bucket” (Crear bucket).

Paso 3: Configurar el Bucket para alojar un sitio web

• En tu nuevo bucket, ve a la pestaña “Properties” (Propiedades).
• Busca la sección “Static website hosting” (Alojamiento de sitio web estático) y haz clic en “Edit” (Editar).
• Selecciona “Enable” (Habilitar) y luego indica el nombre del archivo de entrada de tu aplicación, generalmente index.html.
• En “Error document”, también ingresa index.html.
• Guarda los cambios.

Esta configuración asegura que, en caso de que S3 encuentre un error al intentar acceder a una ruta específica que no corresponde a un archivo físico, siempre servirá el archivo index.html. Esto permite que React Router maneje correctamente todas las rutas de la aplicación, incluso aquellas que no corresponden a archivos físicos en el bucket de S3.

Paso 4: Subir los archivos de tu proyecto

1. Ve a la pestaña “Objects” de tu bucket.
2. Haz clic en “Upload” (Cargar) y luego arrastra y suelta los archivos y carpetas de la carpeta build de tu proyecto React.
3. Completa el proceso de carga.

Paso 5: Hacer el contenido del Bucket público

1. Ve a la pestaña “Permissions” (Permisos) del bucket.
2. Edita la política del bucket agregando una política que permita el acceso público a los archivos. Aquí tienes un ejemplo de política:

{
  "Version": "2012-10-17",
  "Statement": [{
    "Sid": "PublicReadGetObject",
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::tu-bucket-name/*"
  }]
}

3. Reemplaza tu-bucket-name con el nombre de tu bucket.
4. Guarda los cambios.

Paso 6: Crear una distribución de CloudFront

1. Ve al servicio Amazon CloudFront.
2. Haz clic en “Create distribution” (Crear distribución).
3. En la sección “Origin settings” (Configuración de origen), selecciona el bucket de S3 que creaste como el origen.
4. Deja las configuraciones predeterminadas o ajústalas según tus necesidades específicas (por ejemplo, configuraciones de SSL/TLS).
5. Haz clic en “Create distribution” (Crear distribución).

Paso 7: Configurar el dominio (opcional)

Si tienes un dominio personalizado que deseas utilizar, puedes configurar CloudFront para usar ese dominio y actualizar los registros DNS en tu proveedor de dominio para apuntar al dominio proporcionado por CloudFront.