Explore el desarrollo completo de aplicaciones web nativas en la nube con Green Boost

Para crear una aplicación mediante Green Boost, ejecute el comando gboost create.

Elige la plantilla CRUD App with Aurora PostgreSQL.

Desplácese hasta el directorio del proyecto: cd <your directory>.

Utilice el comando pnpm i para instalar las dependencias.

Vaya al directorio infra: cd infra.

Para implementar la aplicación, ejecute el siguiente comando pnpm deploy:local.

Se trata de un alias para un comando cdk deploy ... definido en infra/package.json.

Abra la terminal en la que ejecutó el comando pnpm deploy:local.

Busque una sección en la salida del terminal que se parezca al texto siguiente.

myapp5stickbui9C39A55A.CloudFrontDomainName = d1q16n5pof924c.cloudfront.net

La URL será exclusiva para la implementación.

Inicie sesión en la consola de administración de AWS y vaya al servicio de CloudFront.

Busque la última distribución implementada en la lista.

Abra la consola de CloudWatch y elija Paneles.

Seleccione el panel que tiene el nombre <appId>-<stageName>-dashboard.

Revise el panel. ¿Qué recursos se están supervisando? ¿Qué métricas se registran? Este panel es posible gracias al constructo de código abierto cdk-monitoring-constructs.

Navegue hasta /infra/src/app/stateless/monitor-stack.ts, que define la pila de monitores.

Elimine los comentarios de la siguiente línea y sustituya admin@example.com por su dirección de correo electrónico.

onAlarmTopic.addSubscription(new EmailSubscription("admin@example.com"));

Añada la información siguiente sobre las importaciones a la parte superior del archivo.

import { EmailSubscription } from "aws-cdk-lib/aws-sns-subscriptions";

En infra/, ejecute el siguiente comando.

cdk deploy "*/monitor" --exclusively.

Para confirmar su suscripción al tema de SNS que se inicia cuando se activa una alarma de monitorización, elija el enlace del mensaje de correo electrónico.

Instale Graphviz.

En infra/, ejecute el comando pnpm cdk-dia.

Ver su infra/diagram.png.

Conozca las prácticas recomendadas de cdk-nag en su sección de reglas, que incluye las comprobaciones del paquete de reglas de la biblioteca de soluciones de AWS.

Para ver cómo cdk-nag aplica las reglas, realice un cambio en el código. Por ejemplo, en infra/src/app/stateful/data-stacks.ts, cambie storageEncrypted: true a storageEncrypted: false.

En infra/, ejecute el comando cdk synth "*/data". Durante la síntesis, se producirá un error de compilación que indica una infracción de la regla.

AwsSolutions-RDS2: The RDS instance or Aurora DB cluster does not have storage encryption enabled.

Este error muestra cómo cdk-nag es un mecanismo de seguridad para aplicar las prácticas recomendadas de infraestructura y evitar errores de configuración de seguridad.

Si es necesario, también puede suprimir las reglas en diferentes ámbitos. Por ejemplo, para suprimir AWSSolutions-RDS2, añada el siguiente código debajo de la instancia de DbIamCluster.

NagSuppressions.addResourceSuppressions(
  cluster.node.findChild("Resource"),
  [
    {
      id: "AwsSolutions-RDS2",
      reason: "Customer requirement necessitates having unencrypted DB storage",
    },
  ],
);

Tras la supresión, vuelva a ejecutar cdk synth "*/data". Su aplicación AWS CDK ahora debería sintetizarse correctamente. Puede encontrar todas las reglas suprimidas en infra/cdk.out/assembly-<appId>-<stageName>/AwsSolutions-<appId>-<stageName>-${stackId}-NagReport.csv.

Para encontrar el DB_BASTION_ID, inicie sesión en la consola y navegue hasta la consola EC2. Elija Instancias (en ejecución) y busque la fila que contiene <stageName>-ssm-db-bastion Name. El Identificador de instancia comienza por i-.

Para buscar DB_ENDPOINT, en la consola de Amazon Relational Database Service (Amazon RDS), elija Instancias de base de datos y seleccione el clúster regional que tiene un identificador de base de datos que comience por <appId>-<stageName>-data-. Localice el punto de conexión de la instancia de escritura, que termina en rds.amazonaws.com.

Instale el complemento Administrador de sesiones de AWS Systems Manager.

Inicie el reenvío de puertos ejecutando pnpm db:connect dentro de core/ para establecer una conexión segura a través del host bastión.

Cuando vea el texto Waiting for connections..., en su terminal, significa que se ha establecido correctamente un túnel SSH entre su máquina local y el servidor Aurora a través del host bastión de EC2.

En el Explorador de objetos, abra el menú contextual (haga clic con el botón derecho) de Servidores y, a continuación, seleccione Registrar, Servidor.

En la pestaña General, escriba <appId>-<stageName> para el campo Nombre.

Para obtener la contraseña de la base de datos, abra la consola de AWS Secrets Manager, seleccione el secreto que contenga la descripción Generated by the CDK for the stack: <appId>-<stageName>-data y elija la tarjeta Valor secreto. Seleccione Recuperar Valor secreto y copie el Valor secreto con una clave o contraseña.

En la pestaña Conexión, introduzca 0.0.0 para el campo Nombre/dirección del host y <appId>_admin para el campo Nombre de usuario. Para el campo Contraseña, use el secreto que obtuvo anteriormente. Seleccione Sí en el campo ¿Guardar contraseña?.

Seleccione Save.

Para ver las tablas, vaya a <appId>-<stageName>, Bases de datos, <appId>_db, Esquemas, <appId>, Tablas.

Abra el menú contextual (haga clic con el botón derecho) de la tabla de Elementos y, a continuación, seleccione Ver/editar datos, Todas las filas.

Explore la tabla.

Abra el archivo core/src/modules/item/create-item.use-case.ts e inserte el siguiente código.

import { fileURLToPath } from "node:url";

// existing create-item.use-case.ts code here

if (process.argv[1] === fileURLToPath(import.meta.url)) {
  createItemUseCase({
    description: "Item 1's Description",
    name: "Item 1",
  });
}

El código agregado en el paso anterior garantiza que se llame a la función de createItemUseCase cuando este módulo se ejecute directamente. Establezca puntos de interrupción en las líneas de este bloque de código donde desee iniciar la depuración línea por línea.

Abra la Terminal de depuración de JavaScript de VS Code y, a continuación, ejecute pnpm tsx core/src/modules/item/create-item.use-case.ts para ejecutar el código con la depuración línea por línea. Como alternativa, puede usar sentencias e console.log, pero las instrucciones impresas pueden resultar inadecuadas cuando trabajas con una lógica empresarial compleja. La depuración línea por línea proporciona más contexto.

Navegue hasta ui/ y ejecute pnpm dev para iniciar el servidor de desarrollo Next.js.

Acceda a su aplicación web de forma local en http://localhost:3000. El servidor de desarrollo Next.js está configurado con información instantánea de Fast Refresh sobre las modificaciones realizadas en sus componentes de React.

Experimente con la personalización del color de la barra de la aplicación. Abre el archivo ui/src/components/theme/theme.tsx y busque la sección que define el tema de la barra de la aplicación. En la sección colorSchemes.light.palette.primary, actualice el valor principal de colors.lagoon a colors.carrot. Tras realizar este cambio, guarde el archivo y observe la actualización en su navegador.

Experimente modificando el texto y los componentes y añadiendo nuevas páginas.

Revise pnpm-workspace.yaml en la raíz de su repositorio de GB y observe cómo se definen los espacios de trabajo. Para obtener más información sobre espacios de trabajo, consulte la documentación de pnpm.

Revise ui/package.json y observe cómo hace referencia al espacio de trabajo core/ con el nombre de paquete "<appId>/core": "workspace:^",.

Observe cómo la configuración de TypeScript y ESLint está centralizada en los paquetes de utilidades definidos en packages/. Esta configuración es utilizada luego por paquetes de aplicaciones como core/, infra/ y ui/. Esto resulta útil cuando la aplicación se escala y se definen más paquetes de aplicaciones, que pueden hacer referencia a los paquetes de utilidades sin duplicar el código de configuración.

Ejecuta pnpm lint. Este comando ejecuta un análisis de código estático con ESLint.

Ejecuta pnpm typecheck. Este comando ejecuta el compilador de TypeScript para comprobar los tipos de código.

Ejecuta pnpm test. Este comando ejecuta Vitest para ejecutar pruebas unitarias.

Primero, asegúrese de que la extensión ESLint de VS Code (ID: dbaeumer.vscode-eslint) esté instalada. También recomendamos instalar VS Code Error Lens (ID: usernamehw.errorlens) para ver los errores en línea.

Incluya en el código una línea de código que utilice la función eval() como se muestra en el siguiente ejemplo.

const userInput = "import("fs").then((fs) => console.log(fs.readFileSync("/etc/passwd", { encoding: "utf8" })))";
eval(userInput);

Después de incluir la línea eval(), abra su editor de código para confirmar que ESLint indicó el olor del código con garabatos rojos.

Revise los complementos y la configuración de ESLint en packages/eslint-config-{node,next}/.eslintrc.cjs.

Para identificar cualquier vulnerabilidad y exposición común (CVE), ejecute pnpm audit en la raíz de su repositorio.

Debería ver No se ha encontrado ninguna vulnerabilidad conocida.

Instale un paquete intencionalmente vulnerable en core/ al ejecutar pnpm add minimist@0.2.3 y, a continuación, ejecute pnpm audit. Observe cómo se informa de la vulnerabilidad.

Desinstale el paquete vulnerable que contiene core/ pnpm remove minimistal ejecutar .

Realiza un par de pequeños cambios en los archivos de TypeScript en todo el repositorio. Los cambios pueden ser tan básicos como añadir comentarios.

Organice y confirme estos cambios utilizando git add -A y, a continuación, git commit -m "test husky".

El activador del enlace Husky previo a la confirmación, que se define en .husky/pre-commit, ejecuta el comando pnpm lint-staged.

Observe cómo lint-staged ejecuta los comandos especificados en los archivos */.lintstagedrc.js de todo el repositorio en archivos que Git ha preparado.

Para destruir la infraestructura que aprovisionó en la primera epopeya, ejecute pnpm destroy:local en infra/.

Espere 15 minutos después de que pnpm destroy:local haya finalizado y, a continuación, elimine la función de Lambda @Edge retenida buscando el identificador de su aplicación en la consola de Lambda. Las funciones Lambda @Edge se replican, lo que dificulta su eliminación. Para obtener más información sobre cómo eliminar funciones de Lambda @Edge, consulte la documentación de CloudFront.