Automatizar Despliegues de Sitios React desde GitHub a S3 y CloudFront

Rate this content
Bookmark

En esta masterclass, demostraré cómo crear un pipeline de CI/CD para una aplicación React en AWS. Extraeremos el código fuente de GitHub y ejecutaremos pruebas contra la aplicación antes de desplegarla en un bucket de S3 para alojamiento de sitios estáticos. Luego, distribuiremos el sitio utilizando CloudFront, que apuntará al bucket de S3. Toda la infraestructura se construirá utilizando Terraform. Además, utilizaré Terragrunt para mostrar cómo crear esta configuración para múltiples entornos.

FAQ

La automatización CI/CD es una práctica que ayuda a los equipos de desarrollo a optimizar ciclos de lanzamiento, permitiendo la implementación continua de calidad. Se configura una canalización que obtiene código fuente de GitHub, ejecuta pruebas y luego despliega la aplicación en S3 y CloudFront en AWS.

Para la implementación de aplicaciones React en AWS, se utilizan las herramientas CodeBuild y CodePipeline. Estas herramientas gestionan la integración y entrega continua, manejando pruebas y despliegues automáticos.

Terraform se utiliza para construir y gestionar la infraestructura de forma codificada. Permite configurar recursos como S3 y CloudFront de manera sistemática y reproducible, facilitando la gestión de la infraestructura como código.

Terragrunt es un envoltorio de Terraform que ayuda a mantener un enfoque DRY (Don't Repeat Yourself) en la configuración de la infraestructura. Facilita la gestión de configuraciones múltiples y complejas, especialmente útil en entornos con múltiples configuraciones de Terraform.

El proceso incluye configurar CodePipeline para obtener el código de GitHub, usar CodeBuild para ejecutar pruebas, y luego, si son exitosas, desplegar los activos estáticos en un bucket de S3 configurado para alojamiento de sitios estáticos, distribuido a través de CloudFront.

Se utilizan diferentes ramas para cada entorno (producción, UAT, desarrollo) en el repositorio de GitHub. Terraform y Terragrunt configuran recursos específicos para cada entorno, permitiendo gestionar y desplegar configuraciones de manera organizada y eficiente.

S3 se utiliza para alojar sitios estáticos de React, mientras que CloudFront actúa como CDN (Red de Distribución de Contenidos), mejorando la entrega y la velocidad de acceso al contenido estático a nivel global, optimizando la experiencia de usuario final.

Lukonde Mwila
Lukonde Mwila
33 min
01 Jul, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta masterclass se centra en automatizar los despliegues de React en S3 y CloudFront utilizando un pipeline de CI/CD en AWS. Cubre la configuración del pipeline, la obtención del código fuente de GitHub y la configuración de la infraestructura con Terraform y Terragrunt. La masterclass también demuestra el proceso de construcción y despliegue de una aplicación React utilizando AWS CodeBuild y CodePipeline. En general, proporciona una visión general completa de las herramientas y técnicas involucradas en la automatización de los despliegues de React en AWS.

1. Introducción

Short description:

Voy a hablarles sobre la automatización de implementaciones de React en S3 y CloudFront. La principal motivación de esta charla es que cada vez más equipos de desarrollo buscan optimizar sus ciclos de lanzamiento para obtener software de calidad en producción.

Hola a todos. Muchas gracias por sintonizar mi charla en la conferencia DevOps.js 2021. Voy a hablarles sobre la automatización de implementaciones de React en S3 y CloudFront. La principal motivación de esta charla es que cada vez más equipos de desarrollo buscan optimizar sus ciclos de lanzamiento para obtener software de calidad en producción. Y el CI/CD es la práctica automatizada que ayuda a los equipos de software a lograr esto. Sin embargo, construir pipelines puede ser un proceso tedioso si se tiene que hacer manualmente para múltiples entornos, además de ser consumidor de tiempo y no escalar muy bien, especialmente cuando se tiene que hacer una y otra vez.

2. Configuración de la canalización CI/CD en AWS

Short description:

En esta charla, les guiaré a través de la configuración de una canalización CI/CD para aplicaciones React en AWS utilizando CodeBuild y CodePipeline. Utilizaremos Terraform y Terragrunt para la configuración de la infraestructura. Demostraré múltiples flujos de implementación en diferentes entornos y mostraré la salida final de tres sitios diferentes desde el mismo código base. Mi nombre es Lukhan Demwila, un ingeniero de software senior en Intellect y un AWS Container Hero.

Entonces, en esta charla, quiero hacer un recorrido detallado del código de cómo configurar una canalización CI/CD para aplicaciones React en AWS, y las herramientas de CI/CD que voy a utilizar son CodeBuild y CodePipeline. La canalización obtendrá el código fuente de un repositorio de GitHub y ejecutará pruebas en esa aplicación en la etapa de CI antes de implementarla en el bucket de S3, que luego se configurará para actuar como un sitio estático para alojamiento. Además, este sitio se distribuirá utilizando CloudFront y apuntará al bucket de S3 como su origen.

Toda la infraestructura se construirá utilizando Terraform. Además, voy a utilizar una herramienta llamada Terragrunt, que es un envoltorio de Terraform y realmente ayuda en términos de tener un enfoque DRY para programar su infraestructura. Y eso será muy útil. Como pueden ver, no tendremos tanto código en nuestra base de código, incluso para nuestra infraestructura, lo cual será muy útil. Y esta es una de las buenas prácticas cuando se trata de construir recursos como estos. Al final, les demostraré una implementación en múltiples entornos, así como la salida final de tres sitios diferentes desde el mismo código base. Y eso es algo que será bastante interesante de ver una vez que todo se complete.

Antes de continuar, voy a presentarme. Soy Lukhan Demwila. Mucha gente me llama Luke. Algunas personas se divierten y me llaman Skywalker. Soy un ingeniero de software senior en Intellect. También soy un AWS Container Hero y tengo cinco certificaciones de AWS. Actualmente, trabajo como consultor en el sector de servicios financieros, principalmente como ingeniero de cloud y DevOps. Anteriormente, estuve muy involucrado en el desarrollo de aplicaciones, tanto web como móviles, en productos SaaS para startups. Pero desde entonces, he pasado al espacio de cloud y DevOps.

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Elevando Monorepos con los Espacios de Trabajo de npm
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Elevando Monorepos con los Espacios de Trabajo de npm
Top Content
Aprenda más sobre cómo aprovechar las características predeterminadas de los espacios de trabajo de npm para ayudarlo a administrar su proyecto monorepo, mientras también explora algunas de las nuevas características de npm cli.
Automatizando Todo el Código y las Pruebas con GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automatizando Todo el Código y las Pruebas con GitHub Actions
Top Content
Las tareas de código como linting y pruebas son partes críticas del flujo de trabajo de un desarrollador que nos ayudan a mantenernos cuerdos, como prevenir problemas de sintaxis o estilo y fortalecer nuestra lógica de negocio central. Hablaremos de cómo podemos usar GitHub Actions para automatizar estas tareas y ayudar a mantener nuestros proyectos funcionando sin problemas.
Ajustando DevOps para las Personas sobre la Perfección
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Ajustando DevOps para las Personas sobre la Perfección
Top Content
La demanda de DevOps ha aumentado en los últimos años a medida que más organizaciones adoptan tecnologías nativas de la nube. La complejidad también ha aumentado y una mentalidad de "cero a héroe" deja a muchas personas persiguiendo la perfección y FOMO. Esta sesión se centra en cambio en por qué tal vez no deberíamos adoptar una práctica tecnológica y cómo a veces los equipos pueden lograr los mismos resultados priorizando a las personas sobre la automatización y controles de operaciones. Veamos las cantidades y el ajuste fino de todo como código, solicitudes de extracción, DevSecOps, Monitoreo y más para priorizar el bienestar del desarrollador sobre la perfección de la optimización. Puede ser una decisión válida desplegar menos y dormir mejor. Y finalmente examinaremos cómo la práctica manual y la disciplina pueden ser la clave para productos y experiencias superiores.
¿Por qué es tan lento el CI?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
¿Por qué es tan lento el CI?
Todos nos hemos preguntado esto mientras esperamos una eternidad a que termine nuestro trabajo de CI. Un CI lento no solo arruina la productividad del desarrollador, rompiendo nuestra concentración, sino que también cuesta dinero en tarifas de computación en la nube y desperdicia enormes cantidades de electricidad. Vamos a adentrarnos en por qué ocurre esto y cómo podemos solucionarlo con herramientas mejores y más rápidas.
La filosofía de Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
La filosofía de Yarn
En los últimos años, Yarn se ha convertido en una de las herramientas más comunes utilizadas para desarrollar proyectos de JavaScript, en gran parte gracias a un conjunto de principios rectores. Pero, ¿cuáles son? ¿Cómo se aplican en la práctica a Yarn? Y, lo que es igual de importante, ¿cómo te benefician a ti y a tus proyectos?
En esta charla no nos adentraremos en pruebas de rendimiento o conjuntos de características: en su lugar, aprenderás cómo abordamos el desarrollo de Yarn, cómo exploramos nuevos caminos, cómo mantenemos nuestro código saludable y, en general, por qué creemos que Yarn se mantendrá firmemente establecido en nuestro ecosistema en los próximos años.
Despliegue Atómico para Hipsters de JavaScript
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Despliegue Atómico para Hipsters de JavaScript
Desplegar una aplicación no es un proceso fácil. Te encontrarás con muchos problemas y puntos de dolor que resolver para que funcione correctamente. Lo peor es: ahora que puedes desplegar tu aplicación en producción, ¿cómo no vas a poder desplegar también todas las ramas del proyecto para tener acceso a vistas previas en vivo? ¿Y poder hacer un revert rápido a pedido?Afortunadamente, el clásico conjunto de herramientas de DevOps tiene todo lo que necesitas para lograrlo sin comprometer tu salud mental. Al mezclar expertamente Git, herramientas de Unix y llamadas a API, y orquestar todo ello con JavaScript, dominarás el secreto de los despliegues atómicos seguros.No necesitarás depender de servicios comerciales: ¡conviértete en el maestro perfecto de las herramientas y netlifica tu aplicación desde casa!

Workshops on related topic

Despliegue de aplicaciones React Native en la nube
React Summit 2023React Summit 2023
88 min
Despliegue de aplicaciones React Native en la nube
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Desplegar aplicaciones React Native manualmente en una máquina local puede ser complejo. Las diferencias entre Android e iOS requieren que los desarrolladores utilicen herramientas y procesos específicos para cada plataforma, incluidos los requisitos de hardware para iOS. Los despliegues manuales también dificultan la gestión de las credenciales de firma, las configuraciones de entorno, el seguimiento de las versiones y la colaboración en equipo.
Appflow es la plataforma de DevOps móvil en la nube creada por Ionic. Utilizar un servicio como Appflow para construir aplicaciones React Native no solo proporciona acceso a potentes recursos informáticos, sino que también simplifica el proceso de despliegue al proporcionar un entorno centralizado para gestionar y distribuir tu aplicación en múltiples plataformas. Esto puede ahorrar tiempo y recursos, permitir la colaboración, así como mejorar la confiabilidad y escalabilidad general de una aplicación.
En este masterclass, desplegarás una aplicación React Native para su entrega en dispositivos de prueba Android e iOS utilizando Appflow. También aprenderás los pasos para publicar en Google Play y Apple App Stores. No se requiere experiencia previa en el despliegue de aplicaciones nativas, y obtendrás una comprensión más profunda del proceso de despliegue móvil y las mejores prácticas para utilizar una plataforma de DevOps móvil en la nube para enviar rápidamente a gran escala.
Despliegue de Aplicación MERN Stack en Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
Despliegue de Aplicación MERN Stack en Kubernetes
Workshop
Joel Lord
Joel Lord
Desplegar y gestionar aplicaciones JavaScript en Kubernetes puede volverse complicado. Especialmente cuando una base de datos también debe formar parte del despliegue. MongoDB Atlas ha facilitado mucho la vida de los desarrolladores, sin embargo, ¿cómo se integra un producto SaaS con su clúster de Kubernetes existente? Aquí es donde entra en juego el Operador de MongoDB Atlas. En este masterclass, los asistentes aprenderán cómo crear una aplicación MERN (MongoDB, Express, React, Node.js) localmente y cómo desplegar todo en un clúster de Kubernetes con el Operador de Atlas.
Azure Static Web Apps (SWA) con Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) con Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Las Azure Static Web Apps se lanzaron a principios de 2021 y, de forma predeterminada, pueden integrar su repositorio existente y implementar su aplicación web estática desde Azure DevOps. Este masterclass demuestra cómo publicar una Azure Static Web App con Azure DevOps.
Construyendo Aplicaciones Serverless en AWS con TypeScript
Node Congress 2021Node Congress 2021
245 min
Construyendo Aplicaciones Serverless en AWS con TypeScript
Workshop
Slobodan Stojanović
Slobodan Stojanović
Este masterclass te enseña los conceptos básicos del desarrollo de aplicaciones serverless con TypeScript. Comenzaremos con una función Lambda simple, configuraremos el proyecto y la infraestructura como código (AWS CDK) y aprenderemos cómo organizar, probar y depurar una aplicación serverless más compleja.
Tabla de contenidos:        - Cómo configurar un proyecto serverless con TypeScript y CDK        - Cómo escribir una función Lambda testeable con arquitectura hexagonal        - Cómo conectar una función a una tabla DynamoDB        - Cómo crear una API serverless        - Cómo depurar y probar una función serverless        - Cómo organizar y hacer crecer una aplicación serverless


Materiales mencionados en el masterclass:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
Blog de DynamoDB de Alex DeBrie: https://www.dynamodbguide.com/
Excelente libro para DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html