As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá. # Explore o desenvolvimento de aplicações web de full-stack nativas da nuvem com o Green Boost *Ben Stickley e Amiin Samatar, Amazon Web Services* ## Resumo Em resposta às crescentes necessidades dos desenvolvedores, a Amazon Web Services (AWS) reconhece a demanda crítica por uma abordagem eficiente para o desenvolvimento de aplicativos web nativo de nuvem. O foco da AWS é ajudar você a superar obstáculos comuns associados à implantação de aplicativos web de nuvem AWS. Ao aproveitar os recursos de tecnologias modernas, como o TypeScript AWS Cloud Development Kit (AWS CDK), o React e o Node.js, esse padrão visa simplificar e agilizar o processo de desenvolvimento. Apoiado pelo kit de ferramentas Green Boost (GB), o padrão oferece um guia prático para a estruturação de aplicativos web que usam os amplos recursos da AWS em sua totalidade. Ele atua como um roteiro abrangente, guiando você pelo processo de implantação de um aplicativo web CRUD (Criar, ler, atualizar, excluir) fundamental integrado à edição do Amazon Aurora compatível com PostgreSQL. Isso é feito usando a interface de linha de comando Green Boost (CLI do Green Boost) e estabelecendo um ambiente de desenvolvimento local. Após a implantação bem-sucedida do aplicativo, o padrão investiga os principais componentes do aplicativo web, incluindo design de infraestrutura, desenvolvimento de backend e frontend e ferramentas essenciais, como cdk-dia, para visualização, facilitando o gerenciamento eficiente de projetos. ## Pré-requisitos e limitações **Pré-requisitos ** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) instalado + [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) instalado + [AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) instalado + [Kit de ferramentas AWS CDK](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) instalado + [Node.js 18](https://nodejs.org/en/download) instalado ou [Node.js 18 com pnpm](https://pnpm.io/cli/env) ativado + [pnpm](https://pnpm.io/installation) instalado, se não fizer parte da instalação do Node.js + Familiaridade básica com TypeScript AWS CDK, Node.js e React + Uma [conta AWS ativa](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [Bootstrap de uma conta da AWS](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) usando o AWS CDK em `us-east-1`. A região `us-east-1` da AWS**** é necessária para dar suporte às funções do Amazon CloudFront Lambda @Edge. + [Credenciais de segurança da AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html), inclusive `AWS_ACCESS_KEY_ID`, configuradas corretamente em seu ambiente de terminal + Para usuários do Windows, um terminal no modo administrador (para acomodar a forma como o pnpm manipula os módulos de nós) **Versões do produto** + AWS SDK para a JavaScript versão 3 + AWS CDK versão 2 + AWS CLI versão 2.2 + Node.js versão 18 + React versão 18 ## Arquitetura **Pilha de tecnologias de destino** + Amazon Aurora Edição Compatível com PostgreSQL + Amazon CloudFront + Amazon CloudWatch + Nuvem de computação elástica da Amazon (Amazon EC2) + AWS Lambda + AWS Secrets Manager + Amazon Simple Notification Service (Amazon SNS) + Amazon Simple Storage Service (Amazon S3) + AWS WAF **Arquitetura de destino** O diagrama a seguir mostra que as solicitações dos usuários passam pela Amazon CloudFront, AWS WAF e AWS Lambda antes de interagir com um bucket do S3, um banco de dados Aurora, uma instância e, finalmente EC2 , chegar aos desenvolvedores. Os administradores, por outro lado, usam o Amazon SNS e a CloudWatch Amazon para fins de notificações e monitoramento. ![\[Processo para implantar uma aplicação web CRUD integrado ao Amazon Aurora PostgreSQL usando a CLI do Green Boost.\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) Para obter uma visão mais aprofundada do aplicativo após a implantação, você pode criar um diagrama usando [cdk-dia](https://github.com/pistazie/cdk-dia), conforme mostrado no exemplo a seguir. ![\[O primeiro diagrama mostra a exibição centrada no usuário; o diagrama cdk-dia mostra a exibição da infraestrutura técnica.\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) Esses diagramas mostram a arquitetura do aplicativo web a partir de dois ângulos distintos. O diagrama cdk-dia oferece uma visão técnica detalhada da infraestrutura de o AWS CDK, destacando serviços específicos da AWS, como o Amazon Aurora compatível com PostgreSQL e o AWS Lambda. Por outro lado, o outro diagrama tem uma perspectiva mais ampla, enfatizando o fluxo lógico de dados e as interações do usuário. A principal distinção está no nível de detalhe: o cdk-dia investiga as complexidades técnicas, enquanto o primeiro diagrama fornece uma visão mais centrada no usuário. A criação do diagrama cdk-dia é abordada no épico *Understand the app infrastructure by using AWS CDK* (Entenda a infraestrutura do aplicativo usando o AWS CDK). ## Ferramentas **Serviços da AWS** + O [Amazon Aurora Edição Compatível com PostgreSQL](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html) é um mecanismo de banco de dados relacional totalmente gerenciado e em conformidade com ACID que ajuda você a configurar, operar e escalar implantações do PostgreSQL. + O [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) é uma estrutura de desenvolvimento de software que ajuda você a definir e provisionar a infraestrutura da Nuvem AWS em código. + A ‭[AWS Command Line Interface (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)‭ é uma ferramenta de código aberto que permite que você interaja com serviços da AWS usando comandos no shell da linha de comando. + [A Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) acelera a distribuição do seu conteúdo da web entregando-o por meio de uma rede mundial de data centers, o que reduz a latência e melhora o desempenho. + CloudWatchA [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) ajuda você a monitorar as métricas dos seus recursos da AWS e dos aplicativos que você executa na AWS em tempo real. + [A Amazon Elastic Compute Cloud (Amazon EC2)](https://docs.aws.amazon.com/ec2/) fornece capacidade de computação escalável na Nuvem AWS. Você poderá iniciar quantos servidores virtuais precisar e escalá-los na vertical rapidamente. + O [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) é um serviço de computação que ajuda você a executar código sem exigir provisionamento ou gerenciamento de servidores. Ele executa o código somente quando necessário e dimensiona automaticamente, assim, você paga apenas pelo tempo de computação usado. + O [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) ajuda você a substituir credenciais codificadas em seu código, incluindo senhas, por uma chamada de API ao Secrets Manager para recuperar o segredo programaticamente. + O [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) ajuda você a gerenciar seus aplicativos e infraestrutura em execução na nuvem AWS. Isso simplifica o gerenciamento de aplicações e recursos, diminui o tempo para detectar e resolver problemas operacionais e ajuda você a gerenciar seus recursos da AWS de modo seguro e em grande escala. Esse padrão usa o Session Manager do AWS Systems Manager. + O [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) é um serviço de armazenamento de objetos baseado em nuvem que ajuda você a armazenar, proteger e recuperar qualquer quantidade de dados. O [Amazon Simple Notification Service (Amazon SNS)](https://docs.aws.amazon.com/sns/latest/dg/welcome.html) ajuda você a coordenar e gerenciar a troca de mensagens entre publicadores e clientes, incluindo servidores web e endereços de e-mail. + O [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) é um firewall para aplicativos web que ajuda você a monitorar solicitações HTTP e HTTPS que são encaminhadas aos recursos protegidos do seu aplicativo web **Outras ferramentas** + O [Git](https://git-scm.com/docs) é um sistema de controle de versão distribuído e de código aberto. + O [Green Boost](https://awslabs.github.io/green-boost/overview/intro) é um kit de ferramentas para criar aplicativos web na AWS. + O [Next.js](https://nextjs.org/docs) é uma estrutura do React para adicionar atributos e otimizações. + [O Node.js](https://nodejs.org/en/docs/) é um ambiente de tempo de JavaScript execução orientado a eventos projetado para criar aplicativos de rede escaláveis. + O [pgAdmin](https://www.pgadmin.org/) é uma ferramenta de gerenciamento de código aberto para PostgreSQL. Ele fornece uma interface gráfica que ajuda você a criar, manter e usar objetos de banco de dados. + O [pnpm](https://pnpm.io/motivation) é um gerenciador de pacotes para dependências do projeto Node.js. ## Práticas recomendadas Consulte a seção [Épicos](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) para obter mais informações sobre as seguintes recomendações: + Monitore a infraestrutura usando CloudWatch painéis e alarmes da Amazon. + Aplique as práticas recomendadas da AWS usando cdk-nag para executar a análise estática de infraestrutura como código (IaC). + Estabeleça o encaminhamento de portas de banco de dados por meio de tunelamento SSH (Secure Shell) com o Session Manager do Systems Manager, que é mais seguro do que ter um endereço IP exposto publicamente. + Gerencie vulnerabilidades executando o `pnpm audit`. + Aplique as melhores práticas usando [ESLint](https://eslint.org/)para realizar análises estáticas de TypeScript código e [Prettier para padronizar a formatação](https://prettier.io/) de código. ## Épicos ### Implemente um aplicativo web CRUD com o Aurora compatível com PostgreSQL | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Instale a CLI do Green Boost. | Para instalar o Green Boost CLI, execute o seguinte comando.
pnpm add -g gboost
| Desenvolvedor de aplicativos | | Crie um aplicativo do GB. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Instale dependências e implante o aplicativo. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Aguarde a conclusão da implantação (aproximadamente 20 minutos). Enquanto você espera, monitore as CloudFormation pilhas da AWS no CloudFormation console. Observe como as estruturações definidas no código são mapeadas para o recurso implantado. Analise a [visualização em árvore do CDK Construct](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html) no CloudFormation console. | Desenvolvedor de aplicativos | | Acesse o aplicativo. | Depois de implantar seu aplicativo GB localmente, você pode acessá-lo usando o CloudFront URL. O URL é impresso na saída do terminal, mas pode ser um pouco difícil encontrá-lo. Para encontrá-lo mais rapidamente, siga as seguintes etapas:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Como alternativa, você pode encontrar a CloudFront URL acessando o CloudFront console da Amazon:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Copie o **Nome de domínio** associado à distribuição. Ele se parece com `your-unique-id.cloudfront.net`. | Desenvolvedor de aplicativos | ### Monitore usando a Amazon CloudWatch | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Veja o CloudWatch painel. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Habilitar alertas. | Um CloudWatch painel ajuda você a monitorar ativamente seu aplicativo web. Para monitorar passivamente seu aplicativo da web, você pode ativar os alertas.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ### Entenda a infraestrutura do aplicativo usando o AWS CDK | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Crie um diagrama de arquitetura. | Gere um diagrama de arquitetura do seu aplicativo web usando [cdk-dia](https://github.com/pistazie/cdk-dia). A visualização da arquitetura ajuda a melhorar a compreensão e a comunicação entre os membros da equipe. Ele fornece uma visão geral clara dos componentes do sistema e seus relacionamentos.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Use o cdk-nag para aplicar as práticas recomendadas. | Use o [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 ajudar você a manter a infraestrutura segura e compatível, aplicando as práticas recomendadas, reduzindo o risco de vulnerabilidades de segurança e configurações incorretas.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ### Avalie a configuração e o esquema do banco de dados | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Adquira variáveis ​​de ambiente. | Para obter as variáveis de ambiente necessárias, use as seguintes etapas:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Estabeleça o encaminhamento de portas. | Para estabelecer o encaminhamento de portas, siga as etapas a seguir:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Ajuste o tempo limite do Session Manager do Systems Manager. | (Opcional) Se o tempo limite padrão da sessão de 20 minutos for muito curto, você poderá aumentá-lo em até 60 minutos no console do Systems Manager selecionando **Session Manager**, **Preferências**, **Editar**, **Tempo limite de sessão ociosa**. | Desenvolvedor de aplicativos | | Visualize o banco de dados. | O pgAdmin é uma ferramenta de código aberto fácil de usar para gerenciar bancos de dados PostgreSQL. Ele simplifica as tarefas do banco de dados, permitindo que você crie, gerencie e otimize bancos de dados com eficiência. Esta seção orienta você na [instalação do pgAdmin](https://www.pgadmin.org/download/) e no uso de seus atributos para o gerenciamento do banco de dados do PostgreSQL.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ### Depure com Node.js | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Depure o caso de uso do item criado. | Para depurar o caso de uso do item criado, siga estas etapas:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/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/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ### Desenvolva o frontend | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Configure o servidor de desenvolvimento. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ### Ferramentas com Green Boost | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Configure o monorepo e o gerenciador de pacotes pnpm. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Execute scripts pnpm. | Execute os seguintes comandos na raiz do seu repositório:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Observe como esses comandos são executados em todos os espaços de trabalho. Os comandos são definidos no campo `package.json#scripts` de cada espaço de trabalho. | Desenvolvedor de aplicativos | | Use ESLint para análise de código estático. | Para testar a capacidade de análise de código estático do ESLint, faça o seguinte:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Gerencie dependências e vulnerabilidades. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | | Pré-comprometa hooks com o Husky. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Essas ferramentas são mecanismos para ajudar a impedir que códigos incorretos entrem em seu aplicativo. | Desenvolvedor de aplicativos | ### Destrua a infraestrutura | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Remova a implantação da sua conta. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Desenvolvedor de aplicativos | ## Solução de problemas | Problema | Solução | | --- | --- | | Não foi possível estabelecer o encaminhamento de porta | Certifique-se de que suas credenciais da AWS estejam configuradas adequadamente e tenham as permissões necessárias.Verifique novamente se as variáveis de ambiente bastion host ID (`DB_BASTION_ID`) e database endpoint (`DB_ENDPOINT`) estão definidas corretamente.Se você ainda encontrar problemas, consulte a documentação da AWS para a [solução de problemas de conexões SSH e do Session Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html). | | O site não está sendo carregado no `localhost:3000` | Confirme se a saída do terminal indica um encaminhamento de porta bem-sucedido, incluindo o endereço de encaminhamento.Certifique-se de que não haja processos conflitantes usando a porta 3000 em sua máquina local.Verifique se o aplicativo Green Boost está configurado e é executado corretamente na porta esperada (3000).Verifique se há extensões ou configurações de segurança em seu navegador que possam bloquear conexões locais. | | Mensagens de erro durante a implantação local (`pnpm deploy:local`) | Analise cuidadosamente as mensagens de erro para identificar a causa do problema.Verifique se as variáveis de ambiente e os arquivos de configuração necessários estão definidos corretamente. | ## Recursos relacionados + [Documentação do AWS CDK](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Documentação do Green Boost](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Documentação do Next.js](https://nextjs.org/docs) + [Documentação do Node.js](https://nodejs.org/en/docs/) + [Documentação do React](https://reactjs.org/docs/getting-started.html) + [TypeScript documentação](https://www.typescriptlang.org/docs/)