Despliegue de una SPA React con S3 y CloudFront

Resumen Este patrón describe paso a paso cómo desplegar una aplicación de una sola página SPA desarrollada con React en Amazon S3 y acelerada globalmente con Amazon CloudFront. La SPA consume una API REST creada en Amazon API Gateway y expuesta también a través de CloudFront, lo que simplifica de forma notable la gestión de CORS al centralizar políticas, cabeceras y cacheo en el perímetro.

La solución se basa en un repositorio de ejemplo de AWS que ilustra la infraestructura como código y el flujo de despliegue, adaptándolo para entornos reales de producción con buenas prácticas de seguridad, rendimiento y observabilidad.

Arquitectura El frontend se construye y publica como archivos estáticos en un bucket de S3 sin acceso público directo. CloudFront actúa como CDN y puerta de entrada, usando un Origin Access Control OAC para firmar solicitudes al bucket y evitar exposiciones públicas. La API se implementa en API Gateway y se sirve detrás de otra distribución de CloudFront, lo que reduce la latencia, estandariza cabeceras y simplifica CORS. Route 53 puede gestionar el dominio, mientras que CloudWatch y CloudTrail brindan métricas y auditoría. Todo el despliegue se orquesta con AWS CloudFormation.

Servicios AWS utilizados Amazon API Gateway para la API REST con integración y control de seguridad AWS CloudFormation para aprovisionamiento consistente y repetible de recursos Amazon CloudFront para cache global, menor latencia y políticas de seguridad del borde AWS CloudTrail para auditoría de eventos Amazon CloudWatch para métricas y logs en tiempo real AWS IAM para control de identidades y permisos Amazon Route 53 para DNS Amazon S3 como almacenamiento de objetos del sitio estático con versionado y cifrado

Infraestructura como código con CloudFormation El archivo react-cors-spa-stack.yaml define todos los recursos necesarios. Para el frontend, el bucket de S3 bloquea el acceso público a través de PublicAccessBlockConfiguration, habilita logs en un LoggingBucket dedicado, activa el versionado y cifra los objetos con AES256. El nombre del bucket se genera de forma determinista con un prefijo como react-cors-spa y el identificador del stack.

Política del bucket S3 La BucketPolicy solo permite la acción s3:GetObject al servicio de CloudFront cuando la solicitud proviene de la distribución autorizada del stack. Esto asegura que el contenido únicamente sea legible por CloudFront mediante OAC, evitando accesos directos desde Internet.

Distribución de CloudFront para la SPA La distribución usa el bucket de S3 como origen con un CloudFront Origin Access Control para firmar las solicitudes. El objeto raíz por defecto es index.html. Se definen políticas de cache optimizadas, políticas de solicitud de origen específicas para CORS con S3 y una política de cabeceras de respuesta que incluye preflight y cabeceras de seguridad. El comportamiento por defecto redirige a HTTPS y se configuran respuestas personalizadas para errores 403 hacia index.html, lo que permite enrutamiento del lado del cliente en SPAs. Se habilita logging en un bucket dedicado y se fuerza el uso de TLS 1.2.

Origin Access Control OAC El OAC especifica el tipo de origen s3 y firma todas las solicitudes con SigV4, lo que elimina la necesidad de políticas públicas y refuerza el principio de mínimo privilegio entre CloudFront y S3.

Despliegue paso a paso Paso 1 Aprovisiona la infraestructura con CloudFormation ejecutando aws cloudformation deploy --stack-name react-cors-spa-demo --template-file react-cors-spa-stack.yaml --region us-east-1 --no-fail-on-empty-changeset

Paso 2 Obtén los valores de salida del stack para identificar el bucket y las distribuciones aws cloudformation describe-stacks --stack-name react-cors-spa-demo --region us-east-1 --query Stacks[0].Outputs Anota el BucketName para el siguiente paso. También verás SPADomain y APIDomain correspondientes a las distribuciones de CloudFront.

Paso 3 Construye la aplicación React. Por ejemplo, con Next.js ejecuta yarn build y localiza la carpeta out generada por la exportación estática.

Paso 4 Sube los artefactos estáticos al bucket de S3 aws s3 sync ./out s3://BUCKET_NAME Si usas Next.js, publica también la carpeta _next aws s3 sync ./_next s3://BUCKET_NAME

Buenas prácticas clave Exponer la API de API Gateway a través de CloudFront simplifica CORS, añade cache y reduce latencia. El uso de OAC evita la exposición pública del bucket. La redirección a HTTPS y las cabeceras de seguridad fortalecen la postura de seguridad. Los logs en CloudFront y S3, junto con CloudTrail y CloudWatch, facilitan observabilidad y cumplimiento.

Conclusión Con este enfoque puedes alojar tu SPA de React en AWS de forma rápida, segura y rentable, apoyándote en servicios administrados, cache global y controles de seguridad en el perímetro. Si necesitas una guía integral para desplegar, optimizar y operar tu frontend y backend en la nube, en Q2BSTUDIO te acompañamos de principio a fin con servicios cloud aws y azure, automatización de despliegues y observabilidad.

Sobre Q2BSTUDIO Somos una empresa de desarrollo de software que crea aplicaciones a medida y software a medida, especialistas en inteligencia artificial, ciberseguridad, servicios inteligencia de negocio y power bi, además de automatización de procesos, agentes IA e ia para empresas. Podemos diseñar tu arquitectura, aplicar buenas prácticas DevSecOps y garantizar la resiliencia de tu plataforma en producción. Descubre cómo potenciamos tus cargas en la nube en nuestro servicio de servicios cloud aws y azure y cómo incorporamos modelos avanzados de IA en tus procesos con nuestra oferta de inteligencia artificial para acelerar la innovación y diferenciar tu negocio.