Infraestructura como Código para Aplicaciones React en AWS Escritas en TypeScript

Rate this content
Bookmark

Consideramos qué es IaC (Infraestructura como Código) y por qué deberíamos invertir nuestro tiempo/dinero en ello. Será una charla estilo masterclass y al finalizar, tendrás una infraestructura completa como código para una aplicación React en AWS escrita en TypeScript

FAQ

Denys Artyukhovic es el líder del equipo en The Zone, una empresa que transforma la manera en que los fanáticos se involucran con los deportes. Originalmente es de Bielorrusia y actualmente está basado en Londres.

The Zone está cambiando la forma en que los fanáticos se involucran con los deportes, desde la distribución de contenido hasta ofrecer experiencias inmersivas en tiempo real con datos aumentados para las transmisiones de video. Están disponibles en más de 200 países y en varios tipos de dispositivos.

La infraestructura como código es crucial para The Zone debido a la necesidad de manejar frecuentes cambios en la infraestructura, a veces varias veces al día, lo que sería muy estresante y propenso a errores si se hiciera manualmente.

Terraform es un software de código abierto desarrollado por HashiCorp que permite gestionar la infraestructura mediante código. The Zone lo utiliza para administrar su infraestructura de manera eficiente y soporta TypeScript a través de CDK (Cloud Development Kit).

Usar TypeScript en la infraestructura como código ofrece beneficios como evitar aprender un nuevo lenguaje, aprovechar la potencia y las características de TypeScript como autocompletado y tipos, y facilitar la estructuración y el mantenimiento del código.

The Zone utiliza Terraform para manejar los cambios en su infraestructura, lo que permite actualizar y modificar componentes de manera controlada y sistemática, reduciendo la posibilidad de errores y aumentando la eficiencia.

Denis Artyuhovich
Denis Artyuhovich
30 min
22 Oct, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Esta charla cubre la infraestructura como código utilizando Terraform y CDK. El orador demuestra cómo construir la infraestructura para una aplicación React, incluyendo un bucket S3 y la conexión a un dominio real. También se discute la configuración del comportamiento de la caché, CloudFront y los backends remotos. TypeScript se destaca como un lenguaje poderoso para la infraestructura como código, y se enfatiza la importancia de la automatización y el código bien documentado para infraestructuras a escala global.

1. Introducción a la Infraestructura como Código

Short description:

Vamos a hablar de infraestructura como código. Mi equipo en The Zone está cambiando la forma en que los fanáticos se involucran con los deportes. Tenemos una amplia gama de infraestructura. Para evitar errores manuales y garantizar la escalabilidad, necesitamos utilizar la infraestructura como código. Hay dos paradigmas de programación: imperativo y declarativo. Terraform, un software de código abierto, admite miles de proveedores y nos permite administrar la infraestructura con código, incluido TypeScript.

Genial. Sí, como dije, ahora vamos a hablar de infraestructura como código. Pero antes, permítanme presentarme y darles un poco de contexto sobre por qué lo necesitamos. ¿Qué está pasando? Genial. Mi nombre es Denys Artyukhovic. Soy el líder del equipo en The Zone. Originalmente, soy de Bielorrusia, pero ahora estoy basado en Londres. Y en The Zone, estamos cambiando todos los aspectos de cómo los fanáticos se involucran con los deportes, desde la distribución de contenido hasta una experiencia verdaderamente inmersiva en tiempo real donde puedes ver datos aumentados para las transmisiones de video. Estamos disponibles en más de 200 países y en varios tipos de dispositivos, incluidos televisores inteligentes, tabletas, computadoras portátiles y, por supuesto, Xbox, PS5 y otras consolas de juegos. Y creo que puedes imaginar la cantidad de infraestructura que tenemos. Y mi equipo ha construido características que son multiplataforma. Están disponibles en la web y en los televisores. Entonces, la respuesta ahora, probablemente sea obvia, pero consideremos el flujo normal de desarrollo de sus aplicaciones. Comenzamos con una característica, o digamos un servicio, luego una nueva y brillante idea llega al escenario y tenemos una característica más, y luego boom, cientos de ellas. Y en nuestro caso, podemos esperar cambios en nuestra infraestructura incluso varias veces al día, y creo que puedes imaginar lo estresante que podría ser si todo fuera manual, porque necesitas replicar algunos cambios manuales, ¿y qué pasa si algunos de los desarrolladores olvidan actualizar la documentación? ¿O qué pasa si la interfaz de usuario misma ha cambiado en nuestro proveedor de la nube, como AWS, y hacemos clic en la casilla de verificación incorrecta y Facebook no está disponible durante unas horas? Así que puede ser realmente estresante, ¿verdad? Para evitar esta situación y solucionar este problema y nunca tener un problema así, nuevamente, necesitamos aprovechar la infraestructura como código. Pero antes de comenzar a hablar sobre la infraestructura en sí, consideremos estos dos paradigmas de programación, ya que son bastante relevantes cuando hablamos de codificación para la infraestructura. Por un lado, tenemos el enfoque imperativo, que se basa en instrucciones explícitas para todo literalmente. Por lo general, nos referimos a algunos scripts de shell, y de hecho, la instrucción explícita es la mayor ventaja de este enfoque. Pero al mismo tiempo, es la mayor preocupación, porque debes mantener todo tú mismo y no es realmente escalable a lo largo del tiempo. Por otro lado, tenemos el enfoque declarativo, que se basa en describir el resultado y dejar que el proveedor haga el resto del trabajo, lo cual es mucho más fácil y mejor para escalar. Entonces, sí, nuevamente, con el enfoque imperativo, eres inteligente y siempre culpas al sistema de que no funciona como esperas, porque escribiste tantas líneas de código. Cuando con el enfoque declarativo, simplemente no te importa hasta que los proveedores inteligentes se encarguen de todo por ti. Y la buena noticia es que Terraform, en realidad, es un software de código abierto. ¿Quién ha trabajado con Terraform antes? Permítanme hacer esta pregunta primero. Sí. Ok. Algunas personas. Increíble. Entonces, Terraform es un software de código abierto que fue desarrollado originalmente por HashiCorp, y admite miles de proveedores diferentes, y nos permite administrar nuestra infraestructura con código, y lo que es más importante para hoy es que también admite TypeScript. O mejor dicho, CDK, que significa

2. Construyendo Infraestructura con Terraform y CDK

Short description:

Para implementar infraestructura, antes necesitabas aprender un nuevo lenguaje. El lenguaje de Terraform no es complejo y creo que es un cambio de juego. En los próximos 30 minutos, construiremos una infraestructura lista para producción para una aplicación de React, paso a paso. Comenzaremos creando carpetas e instalando CDK. Luego, usaremos React Create App para crear una aplicación básica de React con TypeScript. A continuación, inicializaremos el proyecto con CDK-TF, especificando una plantilla de TypeScript y un backend local. Si encuentras errores de TypeScript, agrega la bandera skip-loop check al archivo ts-config de Terraform.

El Kit de Desarrollo de la Nube, CDK, admite TypeScript. Y realmente creo que es un verdadero cambio de juego porque anteriormente, para implementar infraestructura, probablemente necesitabas aprender un nuevo lenguaje. Con el lenguaje de Terraform de HashiCorp, que no es malo, no es complejo, probablemente un poco más complejo que los archivos JSON o YAML, pero ya sabes, somos desarrolladores. Realmente me gusta el poder de los lenguajes de programación y he estado programando durante muchos años, y eso es con lo que me gustaría crear mi infraestructura, y sí, por eso creo que es un verdadero cambio de juego. Entonces, en los próximos 30 minutos, lo que vamos a hacer, quiero decir, probablemente un poco menos, vamos a construir la infraestructura lista para producción para nuestra aplicación de React, para ser honesto, incluso para cualquier aplicación de JS que elijas. Y sí, lo haremos paso a paso, será como una clase magistral, puedes seguir con las laptops, pero no te preocupes si necesitas tomarte tu tiempo, al final de la charla compartiré contigo todos los ejemplos de código y habrá un enlace al repositorio de GitHub para que puedas seguir más adelante, y estoy bastante seguro de que esta charla será grabada. Ok, así que podemos empezar. Entonces, déjame hacer esto porque es un poco extraño. Genial. ¿Puedes ver mi pantalla? Y solo un segundo, lo haré escalable para poder controlarlo. Ok, lo siento mucho. Acabo de desordenar las cosas. Pero todo bien ahora. Genial. Sí, el primer paso, lo que vamos a hacer, vamos a usar React Create. Espero que todos. Sí. Entonces vamos a usar React Create App solo para crear la aplicación básica de React con TypeScript y vamos a ejecutar este comando para hacerlo y después de esto tendremos esta aplicación bonita y brillante lista. Pero hasta ahora nada está relacionado con la infraestructura en sí. Ahora vamos a empezar creando algunas carpetas para nuestra infraestructura. Y como requisito previo, necesitamos instalar CDK. Puedes instalarlo a nivel global en tu máquina o puedes instalarlo por proyecto. Tú decides. Pero básicamente, tan pronto como tengamos CDK-TF, podemos crear una carpeta de proyecto y comenzar a configurar nuestra infraestructura. Para esto, voy a usar un comando que es CDK-TF init. Voy a pasar la plantilla como TypeScript, de manera similar a lo que hemos hecho para la aplicación de React, y voy a especificar un backend local. Si sabes lo que significa un backend local en términos de Terraform, genial. Si no, no te preocupes. Lo cubriremos un poco más adelante durante la charla. Después de la inicialización, es posible que veas errores relacionados con TypeScript y la razón de esto es porque estoy bastante seguro de que Terraform los abordará en breve, pero hasta ahora necesitas agregar skip-loop check porque realmente no espera que haya otro proyecto de TypeScript en el mismo proyecto. Tan pronto como agreguemos skip-loop check

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.
TypeScript y React: Secretos de un matrimonio feliz
React Advanced Conference 2022React Advanced Conference 2022
21 min
TypeScript y React: Secretos de un matrimonio feliz
Top Content
TypeScript y React son inseparables. ¿Cuál es el secreto de su exitosa unión? Bastante código extrañamente extraño. Aprende por qué useRef siempre se siente extraño, cómo manejar los genéricos en los hooks personalizados y cómo los tipos de unión pueden transformar tus componentes.
Los tipos más útiles de React
React Day Berlin 2023React Day Berlin 2023
21 min
Los tipos más útiles de React
Top Content
No pensamos en React como si tuviera sus propios tipos. Pero los tipos de React son una parte fundamental del marco de trabajo - supervisados por el equipo de React, y coordinados con las principales lanzamientos de React.En esta charla de codificación en vivo, veremos todos los tipos que te has estado perdiendo. ¿Cómo obtienes el tipo de props de un componente? ¿Cómo sabes qué ref toma un componente? ¿Deberías usar React.FC? ¿Y qué pasa con JSX.Element?Te irás con un montón de ideas emocionantes para llevar a tus aplicaciones de React, y esperamos que con una nueva apreciación por las maravillas de React y TypeScript trabajando juntos.
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.
Deja de Escribir tus Rutas
Vue.js London 2023Vue.js London 2023
30 min
Deja de Escribir tus Rutas
Cuanto más trabajas en una aplicación, más complicado se vuelve su enrutamiento y más fácil es cometer un error. "¿Se llamaba la ruta usuarios o usuario?", "¿Tenía un parámetro id o era userId?". Si solo TypeScript pudiera decirte cuáles son los nombres y parámetros posibles. Si solo no tuvieras que escribir una sola ruta más y dejar que un complemento lo haga por ti. En esta charla repasaremos lo que se necesitó para traer rutas automáticamente tipadas para Vue Router.

Workshops on related topic

React, TypeScript y TDD
React Advanced Conference 2021React Advanced Conference 2021
174 min
React, TypeScript y TDD
Top Content
Featured WorkshopFree
Paul Everitt
Paul Everitt
ReactJS es extremadamente popular y, por lo tanto, ampliamente soportado. TypeScript está ganando popularidad y, por lo tanto, cada vez más soportado.

¿Los dos juntos? No tanto. Dado que ambos cambian rápidamente, es difícil encontrar materiales de aprendizaje precisos.

¿React+TypeScript, con los IDEs de JetBrains? Esa combinación de tres partes es el tema de esta serie. Mostraremos un poco sobre mucho. Es decir, los pasos clave para ser productivo, en el IDE, para proyectos de React utilizando TypeScript. En el camino, mostraremos el desarrollo guiado por pruebas y enfatizaremos consejos y trucos en el IDE.
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
React Advanced Conference 2022React Advanced Conference 2022
148 min
Mejores Prácticas y Consejos Avanzados de TypeScript para Desarrolladores de React
Top Content
Featured Workshop
Maurice de Beijer
Maurice de Beijer
¿Eres un desarrollador de React tratando de obtener los máximos beneficios de TypeScript? Entonces esta es la masterclass para ti.En esta masterclass interactiva, comenzaremos desde lo básico y examinaremos los pros y contras de las diferentes formas en que puedes declarar componentes de React usando TypeScript. Después de eso, pasaremos a conceptos más avanzados donde iremos más allá de la configuración estricta de TypeScript. Aprenderás cuándo usar tipos como any, unknown y never. Exploraremos el uso de predicados de tipo, guardias y comprobación exhaustiva. Aprenderás sobre los tipos mapeados incorporados, así como cómo crear tus propias utilidades de mapa de tipo nuevo. Y comenzaremos a programar en el sistema de tipos de TypeScript usando tipos condicionales e inferencia de tipos.
Consejos y Trucos Profundos de TypeScript
Node Congress 2024Node Congress 2024
83 min
Consejos y Trucos Profundos de TypeScript
Top Content
Workshop
Josh Goldberg
Josh Goldberg
TypeScript tiene un sistema de tipos poderoso con todo tipo de características sofisticadas para representar estados de JavaScript salvajes y extravagantes. Pero la sintaxis para hacerlo no siempre es sencilla, y los mensajes de error no siempre son precisos al decirte qué está mal. Vamos a profundizar en cómo funcionan muchas de las características más poderosas de TypeScript, qué tipos de problemas del mundo real resuelven, y cómo dominar el sistema de tipos para que puedas escribir código TypeScript verdaderamente excelente.
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
TypeScript Congress 2023TypeScript Congress 2023
131 min
Practica Técnicas de TypeScript Construyendo una Aplicación con Componentes de Servidor React
Workshop
Maurice de Beijer
Maurice de Beijer
En esta masterclass práctica, Maurice te guiará personalmente a través de una serie de ejercicios diseñados para empoderarte con una profunda comprensión de los Componentes de Servidor React y el poder de TypeScript. Descubre cómo optimizar tus aplicaciones, mejorar el rendimiento y desbloquear nuevas posibilidades.
 
Durante la masterclass, realizarás:
- Maximizar la mantenibilidad y escalabilidad del código con prácticas avanzadas de TypeScript
- Desatar los beneficios de rendimiento de los Componentes de Servidor React, superando enfoques tradicionales
- Potenciar tu TypeScript con el poder de los Tipos Mapeados
- Hacer tus tipos TypeScript más seguros con Tipos Opacos
- Explorar el poder de los Tipos de Plantillas Literales al usar Tipos Mapeados
 
Maurice estará virtualmente a tu lado, ofreciendo una guía completa y respondiendo a tus preguntas mientras navegas por cada ejercicio. Al final de la masterclass, habrás dominado los Componentes de Servidor React, armado con un nuevo arsenal de conocimientos de TypeScript para potenciar tus aplicaciones React.
 
No pierdas esta oportunidad de elevar tu experiencia en React a nuevas alturas. Únete a nuestra masterclass y desbloquea el potencial de los Componentes de Servidor React con TypeScript. Tus aplicaciones te lo agradecerán.
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.