Despliegue automático de React con GitHub Actions y AWS

Configurar un pipeline CI CD completo para aplicaciones React con GitHub Actions, AWS S3 y CloudFront no tiene por qué ser complicado. En esta guía en español te explico paso a paso cómo automatizar desde el commit hasta producción, incorporando pruebas, build, despliegue continuo, invalidación de caché y previews por pull request. Además, integramos recomendaciones de seguridad, rendimiento y buenas prácticas alineadas con software a medida, aplicaciones a medida, servicios cloud aws y azure, inteligencia artificial, ciberseguridad, servicios inteligencia de negocio e IA para empresas.

Resumen del contenido en una frase por sección Paso 1 Infraestructura AWS con S3 y CloudFront. Paso 2 Workflow de GitHub Actions para test build y deploy. Paso 3 Funciones avanzadas cache busting y previews. Paso 4 Configuración de secretos en GitHub. Paso 5 Monitorización y optimización. Sección final de solución de problemas y conclusiones.

Que vas a construir Al terminar tendrás pruebas y build automatizados en cada pull request, despliegue automático a S3 y CloudFront al fusionar en main, invalidaciones de caché inmediatas para que los usuarios vean cambios al instante y despliegues de previsualización por PR, todo listo para producción sin downtime.

Requisitos previos Aplicación React lista para compilar. Cuenta de AWS con acceso a S3 y CloudFront. Repositorio en GitHub. Conocimientos básicos de GitHub Actions.

Paso 1 Infraestructura en AWS 1 Crea un bucket S3 para hosting estático por ejemplo your app production en us east 1 y habilita el sitio estático indicando index.html como documento de inicio y error.html para errores. 2 Configura una distribución de CloudFront con origen el bucket S3. Recomiendo activar redirección a HTTPS, establecer el objeto raíz por defecto en index.html, y para SPA definir respuestas personalizadas que redirijan 403 y 404 a index.html con código 200 para soportar React Router. 3 Seguridad IAM crea un usuario o mejor un rol con permisos mínimos s3 PutObject s3 DeleteObject s3 ListBucket sobre el bucket y cloudfront CreateInvalidation para toda la cuenta o restringido por etiqueta. Añade política de acceso público solo a través de CloudFront usando OAC u OAI para mayor seguridad. 4 Cabeceras de caché en S3 pon Cache Control no cache o un max age corto en HTML y un max age largo con immutable en activos estáticos js css con hash en el nombre para lograr cache busting efectivo.

Paso 2 Workflow de GitHub Actions Crea el archivo .github workflows deploy.yml con estos bloques Claves 1 Disparadores en push a main y en pull request hacia main. 2 Job test en Ubuntu instala Node 18 usa caché de npm ejecuta npm ci luego npm test con cobertura y npm run lint opcional sube cobertura a servicios como Codecov. 3 Job build dependiente de test compila con npm run build y guarda el artefacto de la carpeta build para reutilizarlo en despliegue. 4 Job deploy solo cuando la referencia sea main descarga el artefacto configura credenciales de AWS sincroniza la carpeta build al bucket S3 y crea una invalidación de CloudFront paths barra asterisco para propagar el cambio inmediato. Recuerda que las credenciales pueden configurarse con secretos o recomendablemente con OIDC de GitHub para evitar llaves estáticas.

Paso 3 Funciones avanzadas 1 Cache busting si usas Create React App o frameworks modernos ya generan nombres con content hash. Si tu build no lo hace añade hashing a los archivos de assets js y css y actualiza las referencias en index.html. Reglas prácticas HTML caché corta activos estáticos caché larga con immutable. 2 Previews por pull request en el job de preview cuando event sea pull request sube el build a una ruta del bucket por ejemplo previews pr numero y publica la URL en el resumen del job. Puedes añadir un comportamiento en CloudFront que sirva el prefijo previews para aislar caché y TTLs. 3 Rutas de SPA en CloudFront define custom error responses para 403 y 404 que apunten a barra index.html con 200 y TTL corto. 4 Compresión y performance activa compresión gzip y brotli en CloudFront y usa políticas de caché con TTLs distintos para HTML y estáticos.

Paso 4 Secretos en GitHub Añade los secretos necesarios AWS ACCESS KEY ID y AWS SECRET ACCESS KEY si usas llaves estáticas recomendable usar OIDC con un rol en su lugar. S3 BUCKET con el nombre del bucket. CLOUDFRONT DISTRIBUTION ID con el id de la distribución. Opcionales SLACK WEBHOOK para notificaciones y variables de entorno de tu aplicación React con prefijo REACT APP.

Paso 5 Monitorización y optimización 1 Notificaciones de build y deploy integra notificaciones a Slack o Teams al finalizar los jobs con estado del pipeline y enlace a los logs. 2 Presupuestos de rendimiento añade comprobaciones de tamaño de bundle con herramientas como bundlesize o webpack bundle analyzer y fija umbrales por ejemplo js máximo 300 KB y css máximo 50 KB minificados y comprimidos. 3 Métricas de experiencia usuario integra Lighthouse CI y seguimiento de Core Web Vitals con RUM. 4 Seguridad y cumplimiento activa logs de acceso de S3 y CloudFront, bloquea acceso público directo al bucket y aplica TLS moderno.

Solución de problemas habituales Errores de build revisa compatibilidad de Node y dependencias, variables de entorno y resultados de pruebas en Actions. Problemas de despliegue confirma políticas del bucket y que la distribución apunte al origen correcto, verifica permisos IAM para S3 y CloudFront. Problemas de caché valida que la invalidación se ejecute en cada despliegue, comprueba cabeceras Cache Control en S3 y usa URLs versionadas o content hash en activos.

Conclusión Ya cuentas con un pipeline CI CD listo para producción que prueba, compila y despliega tu app React a AWS S3 y CloudFront con cero tiempo de inactividad e invalidación de caché instantánea. Incluye previews por PR, test completos y control de rendimiento, todo pensado para equipos que necesitan releases confiables y repetibles. Si buscas acelerar este enfoque en tu organización con aplicaciones a medida, software a medida, agentes IA, power bi y servicios cloud aws y azure, en Q2BSTUDIO te acompañamos de principio a fin con una cultura DevOps pragmática y segura.

Por qué Q2BSTUDIO Somos una empresa de desarrollo de software y aplicaciones a medida, especialistas en inteligencia artificial, ciberseguridad, automatización de procesos, servicios inteligencia de negocio y despliegues en nubes públicas. Implementamos pipelines CI CD, infraestructura como código y observabilidad de nivel empresarial, integrando IA para empresas y prácticas de pentesting continuo. Conoce cómo diseñamos arquitecturas modernas y despliegues multicloud en nuestra página de servicios cloud en servicios cloud aws y azure y descubre cómo transformamos tus ideas en productos robustos en nuestra página de aplicaciones a medida y software a medida.

Pro tip de seguridad usa OIDC de GitHub para asumir un rol en AWS y eliminar llaves estáticas, aplica políticas de mínimo privilegio, habilita WAF y Shield si tu caso lo requiere, y segmenta entornos por cuenta y por distribución para aislar riesgos.

Pro tip de rendimiento sirve HTML con TTL bajo y no cache, estáticos con TTL alto e immutable, habilita compresión brotli, activa HTTP2 o HTTP3 y mide impacto con presupuestos de bundles y Lighthouse CI en cada PR.

Pro tip de costes automatiza invalidaciones específicas por rutas cambiadas en lugar de barra asterisco cuando sea posible, usa almacenamiento inteligente en S3 para activos antiguos y revisa informes de CloudFront para ajustar TTL y caché.

Esta guía forma parte de una serie práctica para startups y scaleups donde el siguiente paso aborda infraestructura escalable en AWS con Terraform, módulos reutilizables y buenas prácticas de seguridad, observabilidad y costes.