Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Explore el desarrollo completo de aplicaciones web nativas en la nube con Green Boost *Ben Stickley y Amiin Samatar, Amazon Web Services* ## Resumen En respuesta a las necesidades cambiantes de los desarrolladores, Amazon Web Services (AWS) reconoce la demanda crítica de un enfoque eficiente para desarrollar aplicaciones web nativas en la nube. El objetivo de AWS es ayudarlo a superar los obstáculos comunes asociados con la implementación de aplicaciones web en la nube de AWS. Al aprovechar las capacidades de las tecnologías modernas, como el TypeScript AWS Cloud Development Kit (AWS CDK), React y Node.js, este patrón tiene como objetivo agilizar y acelerar el proceso de desarrollo. Basado en el kit de herramientas Green Boost (GB), el patrón ofrece una guía práctica para crear aplicaciones web que utilicen al máximo las amplias capacidades de AWS. Actúa como una hoja de ruta integral que lo guía a través del proceso de implementación de una aplicación web CRUD (creación, lectura, actualización, eliminación) fundamental integrada con la edición compatible con Amazon Aurora PostgreSQL. Esto se logra mediante el uso de la interfaz de la línea de comandos de Green Boost (CLI de Green Boost) y el establecimiento de un entorno de desarrollo en las instalaciones. Tras la implementación exitoso de la aplicación, el patrón profundiza en los componentes clave de la aplicación web, como el diseño de la infraestructura, el desarrollo del backend y el frontend, y en herramientas esenciales como cdk-dia para la visualización, lo que facilita la gestión eficiente de los proyectos. ## Requisitos previos y limitaciones **Requisitos previos ** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) instalado + [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) instalado + [Interfaz de la línea de comandos de AWS (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) instalada + [Kit de herramientas de AWS CDK](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) instalado + [Node.js 18](https://nodejs.org/en/download) instalado o [Node.js 18 con pnpm](https://pnpm.io/cli/env) activado + [pnpm](https://pnpm.io/installation) está instalado, si no forma parte de la instalación de Node.js + Familiaridad básica con TypeScript AWS CDK, Node.js y React + Una [cuenta de AWS activa](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [Una cuenta de AWS iniciada](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) mediante AWS CDK en `us-east-1`. La región de `us-east-1` AWS**** es necesaria para admitir las funciones de Amazon CloudFront Lambda @Edge. + [Credenciales de seguridad de AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html), incluida `AWS_ACCESS_KEY_ID`, correctamente configuradas en su entorno de terminal + Para los usuarios de Windows, un terminal en modo administrador (para adaptarse a la forma en que pnpm gestiona los módulos de nodos) **Versiones de producto** + AWS SDK para la JavaScript versión 3 + AWS CDK versión 2 + CLI de AWS versión 2.2 + Node.js versión 18 + React versión 18 ## Arquitectura **Pila de tecnología de destino** + Edición de Amazon Aurora compatible con PostgreSQL + Amazon CloudFront + Amazon CloudWatch + Amazon Elastic Compute Cloud (Amazon EC2) + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service (Amazon SNS) + Amazon Simple Storage Service (Amazon S3) + AWS WAF **Arquitectura de destino** El siguiente diagrama muestra que las solicitudes de los usuarios pasan por Amazon CloudFront, AWS WAF y AWS Lambda antes de interactuar con un bucket de S3, una base de datos de Aurora o EC2 una instancia y, finalmente, llegar a los desarrolladores. Los administradores, por otro lado, utilizan Amazon SNS y Amazon con CloudWatch fines de notificación y supervisión. ![\[Proceso de implementación de una aplicación web CRUD integrada con Amazon Aurora PostgreSQL mediante la CLI de Green Boost.\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) Para obtener una visión más profunda de la aplicación tras su implementación, puede crear un diagrama con [cdk-dia](https://github.com/pistazie/cdk-dia), como se muestra en el siguiente ejemplo. ![\[El primer diagrama muestra una vista centrada en el usuario; el diagrama cdk-dia muestra una vista de la infraestructura técnica.\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) Estos diagramas muestran la arquitectura de la aplicación web desde dos ángulos distintos. El diagrama cdk-dia ofrece una vista técnica detallada de la infraestructura de CDK de AWS y destaca servicios específicos de AWS, como Amazon Aurora, compatible con PostgreSQL, y AWS Lambda. Por el contrario, el otro diagrama adopta una perspectiva más amplia y hace hincapié en el flujo lógico de los datos y las interacciones de los usuarios. La diferencia clave reside en el nivel de detalle: el cdk-dia profundiza en las complejidades técnicas, mientras que el primer diagrama ofrece una visión más centrada en el usuario. La creación del diagrama cdk-dia se describe en la epopeya *Comprenda la infraestructura de aplicaciones mediante AWS CDK*. ## Tools (Herramientas) **Servicios de AWS** + La [edición de Amazon Aurora compatible con PostgreSQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html) es un motor de base de datos relacional compatible con ACID, completamente administrado que le permite configurar, utilizar y escalar implementaciones de PostgreSQL. + [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) es un marco de desarrollo de software que le ayuda a definir y aprovisionar la infraestructura de la nube de AWS en código. + La [Interfaz de la línea de comandos de AWS (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) es una herramienta de código abierto que le permite interactuar con los servicios de AWS mediante comandos en el intérprete de comandos de la línea de comandos. + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) acelera la distribución de tu contenido web al distribuirlo a través de una red mundial de centros de datos, lo que reduce la latencia y mejora el rendimiento. + [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) le CloudWatch ayuda a supervisar las métricas de sus recursos de AWS y las aplicaciones que ejecuta en AWS en tiempo real. + [Amazon Elastic Compute Cloud (Amazon EC2)](https://docs.aws.amazon.com/ec2/) proporciona capacidad informática escalable en la nube de AWS. Puede lanzar tantos servidores virtuales como necesite y escalarlos o reducirlos con rapidez. + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) es un servicio de computación que ayuda a ejecutar código sin necesidad de aprovisionar ni administrar servidores. Ejecuta el código solo cuando es necesario y amplía la capacidad de manera automática, por lo que solo pagará por el tiempo de procesamiento que utilice. + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) le permite reemplazar las credenciales codificadas en el código, incluidas las contraseñas, con una llamada a la API de Secrets Manager para recuperar el secreto mediante programación. + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) le permite administrar las aplicaciones y la infraestructura que se ejecutan en la nube de AWS. Simplifica la administración de aplicaciones y recursos, reduce el tiempo requerido para detectar y resolver problemas operativos y ayuda a utilizar y administrar los recursos de AWS a escala de manera segura. Este patrón utiliza el administrador de sesiones de AWS Systems Manager. + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) es un servicio de almacenamiento de objetos basado en la nube que le permite almacenar, proteger y recuperar cualquier cantidad de datos. [Amazon Simple Notification Service (Amazon SNS)](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) le permite coordinar y administrar el intercambio de mensajes entre publicadores y clientes, incluidos los servidores web y las direcciones de correo electrónico. + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) es un firewall de aplicación web que le permite monitorizar las solicitudes HTTP y HTTPS que se reenvíen a los recursos de su aplicación web protegida **Otras herramientas** + [Git](https://git-scm.com/docs) es un sistema de control de versiones distribuido y de código abierto. + [Green Boost](https://awslabs.github.io/green-boost/overview/intro) es un conjunto de herramientas para crear aplicaciones web en AWS. + [Next.js](https://nextjs.org/docs) es un marco de React para añadir funciones y optimizaciones. + [Node.js](https://nodejs.org/en/docs/) es un entorno de JavaScript ejecución basado en eventos diseñado para crear aplicaciones de red escalables. + [pgAdmin](https://www.pgadmin.org/) es una herramienta de gestión de código abierto para PostgreSQL. Proporciona una interfaz gráfica que permite crear, mantener y utilizar objetos de bases de datos. + [pnpm](https://pnpm.io/motivation) es un administrador de paquetes para las dependencias del proyecto Node.js. ## Prácticas recomendadas Consulte la sección [Epics](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) para obtener más información sobre las siguientes recomendaciones: + Supervise la infraestructura mediante Amazon CloudWatch Dashboards y alarmas. + Aplique las prácticas recomendadas de AWS mediante cdk-nag para ejecutar análisis estáticos de infraestructura como código (IaC). + Establezca el reenvío de puertos de base de datos a través de túneles SSH (Secure Shell) con Systems Manager Session Manager, que es más seguro que tener una dirección IP expuesta públicamente. + Gestione las vulnerabilidades ejecutando `pnpm audit`. + Aplique las mejores prácticas utilizando [Prettier [ESLint](https://eslint.org/)](https://prettier.io/)para realizar análisis estáticos del TypeScript código y estandarizar el formato del código. ## Epics ### Implemente una aplicación web CRUD con Aurora compatible con PostgreSQL | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Instale la CLI de Green Boost. | Para instalar Green Boost CLI, ejecute el siguiente comando.
pnpm add -g gboost
| Desarrollador de aplicaciones | | Cree una aplicación GB. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Instale las dependencias e implemente la aplicación. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Espere a que finalice la implementación (aproximadamente 20 minutos). Mientras espera, supervise las CloudFormation pilas de AWS en la CloudFormation consola. Observe cómo las estructuras definidas en el código se corresponden con el recurso implementado. Revise la [vista en árbol de CDK Construct](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html) en la CloudFormation consola. | Desarrollador de aplicaciones | | Accede a la aplicación. | Tras implementar su aplicación GB de forma local, puede acceder a ella mediante la CloudFront URL. La URL se imprime en la salida del terminal, pero encontrarla puede resultar un poco abrumador. Siga los pasos siguientes para encontrarlo rápidamente:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Como alternativa, puedes encontrar la CloudFront URL accediendo a la CloudFront consola de Amazon:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Copie el **nombre de dominio** asociado a la distribución. Tendrá un aspecto similar a `your-unique-id.cloudfront.net`. | Desarrollador de aplicaciones | ### Supervisa con Amazon CloudWatch | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Ver el CloudWatch panel de control. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Habilitar de alertas. | Un CloudWatch panel de control le ayuda a monitorear activamente su aplicación web. Para supervisar de forma pasiva su aplicación web, puede activar las alertas.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ### Comprenda la infraestructura de aplicaciones mediante AWS CDK | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Cree un diagrama de arquitectura. | Genere un diagrama de arquitectura de su aplicación web mediante [cdk-dia](https://github.com/pistazie/cdk-dia). La visualización de la arquitectura ayuda a mejorar la comprensión y la comunicación entre los miembros del equipo. Proporciona una visión general clara de los componentes del sistema y sus relaciones.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Use cdk-nag para aplicar las prácticas recomendadas. | Utilice [cdk-nag](https://docs.aws.amazon.com/prescriptive-guidance/latest/patterns/check-aws-cdk-applications-or-cloudformation-templates-for-best-practices-by-using-cdk-nag-rule-packs.html) para ayudarle a mantener una infraestructura segura y que cumpla con las normas, aplicando las prácticas recomendadas y reduciendo el riesgo de vulnerabilidades de seguridad y errores de configuración.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ### Evalúe la configuración y el esquema de la base de datos | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Adquiera variables de entorno. | Para obtener las variables de entorno requeridas, siga los siguientes pasos:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Establezca el reenvío de puertos. | Para establecer el reenvío de puertos, siga estos pasos:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Ajuste el tiempo de espera del Administrador de sesiones de Systems Manager. | (Opcional) Si el tiempo de espera predeterminado de la sesión de 20 minutos es demasiado corto, puede aumentarlo hasta 60 minutos en la consola de Systems Manager seleccionando **Administrador de sesiones**, **Preferencias**, **Editar**, **Tiempo de espera de sesión inactiva**. | Desarrollador de aplicaciones | | Visualice la base de datos. | pgAdmin es una herramienta de código abierto fácil de usar para administrar bases de datos PostgreSQL. Simplifica las tareas de las bases de datos, lo que le permite crear, administrar y optimizar las bases de datos de manera eficiente. Esta sección le guía a través de la [instalación de pgAdmin](https://www.pgadmin.org/download/) y el uso de sus funciones para la administración de bases de datos PostgreSQL.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ### Depuración con Node.js | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Depura el caso práctico de creación de objetos. | Para depuración del caso práctico de creación de elementos, siga estos pasos:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ### Desarrolle el frontend | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Configure el servidor de desarrollo. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ### Trabajando con Green Boost | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Configure monorepo y el administrador de paquetes pnpm. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Ejecute scripts pnpm. | Ejecute los siguientes comandos en la raíz de su repositorio:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Observe cómo se ejecutan estos comandos en todos los espacios de trabajo. Los comandos se definen en el campo `package.json#scripts` de cada espacio de trabajo. | Desarrollador de aplicaciones | | Se utiliza ESLint para el análisis de código estático. | Para probar la capacidad de análisis de código estático de ESLint, haga lo siguiente:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Gestione las dependencias y vulnerabilidades. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | | Precomete los enlaces con Husky. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Estas herramientas son mecanismos que ayudan a evitar que el código incorrecto llegue a su aplicación. | Desarrollador de aplicaciones | ### Derribe la infraestructura | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Elimine la implementación de su cuenta. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desarrollador de aplicaciones | ## Resolución de problemas | Problema | Solución | | --- | --- | | No se pudo establecer el reenvío de puertos | Asegúrese de que sus credenciales de AWS estén configuradas correctamente y tengan los permisos necesarios.Compruebe que las variables de entorno del identificador de host bastión (`DB_BASTION_ID`) y del punto de conexión de la base de datos (`DB_ENDPOINT`) estén configuradas correctamente.Si sigue teniendo problemas, consulte la documentación de AWS para [solucionar problemas de conexiones SSH y Administrador de sesiones](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html). | | Sitio web no está cargando en `localhost:3000` | Confirme que la salida del terminal indica que el reenvío de puertos se ha realizado correctamente, incluida la dirección de reenvío.Asegúrese de que no haya procesos conflictivos al utilizar el puerto 3000 de su máquina en las instalaciones.Compruebe que la aplicación Green Boost esté correctamente configurada y ejecutándose en el puerto esperado (3000).Compruebe en su navegador web si hay extensiones o ajustes de seguridad que puedan bloquear las conexiones en las instalacioneses. | | Mensajes de error durante la implementación local (`pnpm deploy:local`) | Revise los mensajes de error detenidamente para identificar la causa del problema.Compruebe que las variables de entorno y los archivos de configuración necesarios estén configurados correctamente. | ## Recursos relacionados + [Documentación de AWS SDK](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Documentación de Green Boost](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Documentación de Next.js](https://nextjs.org/docs) + [Documentación de Node.js](https://nodejs.org/en/docs/) + [Documentación de React](https://reactjs.org/docs/getting-started.html) + [TypeScript documentación](https://www.typescriptlang.org/docs/)