Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà. # Esplora lo sviluppo completo di applicazioni web native per il cloud con Green Boost *Ben Stickley e Amiin Samatar, Amazon Web Services* ## Riepilogo In risposta alle esigenze in continua evoluzione degli sviluppatori, Amazon Web Services (AWS) riconosce la necessità fondamentale di un approccio efficiente allo sviluppo di applicazioni Web native per il cloud. L'obiettivo di AWS è aiutarti a superare gli ostacoli comuni associati alla distribuzione di app Web sul cloud AWS. Sfruttando le funzionalità di tecnologie moderne come TypeScript AWS Cloud Development Kit (AWS CDK), React e Node.js, questo modello mira a semplificare e accelerare il processo di sviluppo. Sostenuto dal toolkit Green Boost (GB), il modello offre una guida pratica alla creazione di applicazioni Web che sfruttano appieno le ampie funzionalità di AWS. Funziona come una tabella di marcia completa, che ti guida attraverso il processo di implementazione di un'applicazione web CRUD (Create, Read, Update, Delete) fondamentale integrata con Amazon Aurora PostgreSQL Compatible Edition. Ciò si ottiene utilizzando l'interfaccia a riga di comando Green Boost (Green Boost CLI) e stabilendo un ambiente di sviluppo locale. Dopo la corretta implementazione dell'applicazione, il modello approfondisce i componenti chiave dell'app Web, tra cui la progettazione dell'infrastruttura, lo sviluppo di backend e frontend e strumenti essenziali come cdk-dia per la visualizzazione, che facilitano una gestione efficiente del progetto. ## Prerequisiti e limitazioni **Prerequisiti** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installato + [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) installato + [AWS Command Line Interface (AWS CLI) installata](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) + [AWS CDK Toolkit installato](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) + [Node.js 18](https://nodejs.org/en/download) installato o [Node.js 18 con](https://pnpm.io/cli/env) pnpm attivato + [pnpm](https://pnpm.io/installation) installato, se non fa parte dell'installazione di Node.js + Familiarità di base con TypeScript AWS CDK, Node.js e React + Un [account AWS attivo](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [Un account AWS avviato utilizzando AWS](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) CDK in. `us-east-1` La regione `us-east-1` AWS**** è necessaria per il supporto delle funzioni Amazon CloudFront Lambda @Edge. + [Credenziali di sicurezza AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html)`AWS_ACCESS_KEY_ID`, incluse quelle configurate correttamente nell'ambiente terminale + Per gli utenti Windows, un terminale in modalità amministratore (per adattarsi al modo in cui pnpm gestisce i moduli dei nodi) **Versioni del prodotto** + SDK AWS per la JavaScript versione 3 + AWS CDK versione 2 + AWS CLI versione 2.2 + Node.js versione 18 + React versione 18 ## Architecture **Stack tecnologico Target** + Amazon Aurora PostgreSQL-Compatible Edition + 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 **Architettura Target** Il diagramma seguente mostra che le richieste degli utenti passano attraverso Amazon CloudFront, AWS WAF e AWS Lambda prima di interagire con un bucket S3, un database Aurora, un'istanza e infine raggiungere gli sviluppatori. EC2 Gli amministratori, invece, utilizzano Amazon SNS e CloudWatch Amazon per scopi di notifica e monitoraggio. ![\[Processo di distribuzione di un'app web CRUD integrata con Amazon Aurora PostgreSQL utilizzando Green Boost CLI.\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) [Per dare un'occhiata più approfondita all'applicazione dopo la distribuzione, puoi creare un diagramma utilizzando cdk-dia, come mostrato nell'esempio seguente.](https://github.com/pistazie/cdk-dia) ![\[Il primo diagramma mostra la visualizzazione incentrata sull'utente; il diagramma cdk-dia mostra la vista dell'infrastruttura tecnica.\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) Questi diagrammi mostrano l'architettura dell'applicazione web da due angolazioni distinte. Il diagramma cdk-dia offre una visione tecnica dettagliata dell'infrastruttura CDK di AWS, evidenziando servizi AWS specifici come la compatibilità con Amazon Aurora PostgreSQL e AWS Lambda. Al contrario, l'altro diagramma assume una prospettiva più ampia, enfatizzando il flusso logico dei dati e le interazioni degli utenti. La differenza principale sta nel livello di dettaglio: il cdk-dia approfondisce le complessità tecniche, mentre il primo diagramma offre una visione più incentrata sull'utente. La creazione del diagramma cdk-dia è trattata nell'epico *Understand the app infrastructure by AWS* CDK. ## Tools (Strumenti) **Servizi AWS** + [Amazon Aurora PostgreSQL Compatible Edition è un motore](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html) di database relazionale completamente gestito e conforme ad ACID che ti aiuta a configurare, gestire e scalare le distribuzioni PostgreSQL. + [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) è un framework di sviluppo software che aiuta a definire e fornire l'infrastruttura cloud AWS in codice. + [AWS Command Line Interface (AWS CLI](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html)) è uno strumento open source che ti aiuta a interagire con i servizi AWS tramite comandi nella tua shell a riga di comando. + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) accelera la distribuzione dei tuoi contenuti web distribuendoli attraverso una rete mondiale di data center, che riduce la latenza e migliora le prestazioni. + [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) ti CloudWatch aiuta a monitorare i parametri delle tue risorse AWS e delle applicazioni che esegui su AWS in tempo reale. + [Amazon Elastic Compute Cloud (Amazon EC2)](https://docs.aws.amazon.com/ec2/) fornisce capacità di calcolo scalabile nel cloud AWS. Puoi avviare tutti i server virtuali di cui hai bisogno e dimensionarli rapidamente. + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) è un servizio di elaborazione che ti aiuta a eseguire codice senza dover fornire o gestire server. Esegue il codice solo quando necessario e si ridimensiona automaticamente, quindi paghi solo per il tempo di calcolo che utilizzi. + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) ti aiuta a sostituire le credenziali codificate nel codice, comprese le password, con una chiamata API a Secrets Manager per recuperare il segreto a livello di codice. + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) ti aiuta a gestire le applicazioni e l'infrastruttura in esecuzione nel cloud AWS. Semplifica la gestione delle applicazioni e delle risorse, riduce i tempi di rilevamento e risoluzione dei problemi operativi e ti aiuta a gestire le tue risorse AWS in modo sicuro su larga scala. Questo modello utilizza AWS Systems Manager Session Manager. + [Amazon Simple Storage Service (Amazon S3) Simple Storage Service (Amazon](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) S3) è un servizio di storage di oggetti basato sul cloud che consente di archiviare, proteggere e recuperare qualsiasi quantità di dati. [Amazon Simple Notification Service (Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/welcome.html)) ti aiuta a coordinare e gestire lo scambio di messaggi tra editori e clienti, inclusi server Web e indirizzi e-mail. + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) è un firewall per applicazioni Web che ti aiuta a monitorare le richieste HTTP e HTTPS che vengono inoltrate alle risorse delle tue applicazioni Web protette. **Altri strumenti** + [Git](https://git-scm.com/docs) è un sistema di controllo delle versioni distribuito e open source. + [Green Boost](https://awslabs.github.io/green-boost/overview/intro) è un toolkit per la creazione di app Web su AWS. + [Next.js](https://nextjs.org/docs) è un framework React per aggiungere funzionalità e ottimizzazioni. + [Node.js](https://nodejs.org/en/docs/) è un ambiente di JavaScript runtime basato sugli eventi progettato per la creazione di applicazioni di rete scalabili. + [pgAdmin](https://www.pgadmin.org/) è uno strumento di gestione open source per PostgreSQL. Fornisce un'interfaccia grafica che consente di creare, gestire e utilizzare oggetti di database. + [pnpm](https://pnpm.io/motivation) è un gestore di pacchetti per le dipendenze del progetto Node.js. ## Best practice Consulta la sezione [Epics](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) per ulteriori informazioni sui seguenti consigli: + Monitora l'infrastruttura utilizzando i CloudWatch pannelli di controllo e gli allarmi di Amazon. + Applica le best practice di AWS utilizzando cdk-nag per eseguire analisi statiche dell'infrastruttura come codice (IaC). + Stabilisci l'inoltro delle porte DB tramite il tunneling SSH (Secure Shell) con Systems Manager Session Manager, che è più sicuro rispetto all'avere un indirizzo IP esposto pubblicamente. + Gestisci le vulnerabilità eseguendo. `pnpm audit` + Applica le migliori pratiche utilizzando [ESLint](https://eslint.org/)per eseguire analisi statiche TypeScript del codice e [Prettier](https://prettier.io/) per standardizzare la formattazione del codice. ## Epiche ### Implementa un'app web CRUD con Aurora compatibile con PostgreSQL | Operazione | Description | Competenze richieste | | --- | --- | --- | | Installa la CLI Green Boost. | Per installare Green Boost CLI, esegui il seguente comando.
pnpm add -g gboost
| Sviluppatore di app | | Crea un'app GB. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Installa le dipendenze e distribuisci l'app. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Attendi il termine della distribuzione (circa 20 minuti). Durante l'attesa, monitora gli CloudFormation stack AWS nella CloudFormation console. Nota come i costrutti definiti nel codice si associano alla risorsa distribuita. Esamina la [visualizzazione ad albero di CDK Construct](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html) nella console. CloudFormation | Sviluppatore di app | | Accedi all'app. | Dopo aver distribuito l'app GB localmente, puoi accedervi utilizzando l' CloudFront URL. L'URL è stampato nell'output del terminale, ma può essere un po' difficile da trovare. Per trovarlo più rapidamente, segui i seguenti passaggi:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)In alternativa, puoi trovare l' CloudFront URL accedendo alla CloudFront console Amazon:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Copia il **nome di dominio** associato alla distribuzione. Assomiglierà a`your-unique-id.cloudfront.net`. | Sviluppatore di app | ### Monitora utilizzando Amazon CloudWatch | Operazione | Description | Competenze richieste | | --- | --- | --- | | Visualizza la CloudWatch dashboard. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Abilita gli avvisi. | Una CloudWatch dashboard ti aiuta a monitorare attivamente la tua app web. Per monitorare passivamente la tua app web, puoi abilitare gli avvisi.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ### Comprendi l'infrastruttura delle app utilizzando AWS CDK | Operazione | Description | Competenze richieste | | --- | --- | --- | | Crea un diagramma di architettura. | [Genera un diagramma di architettura della tua app web usando cdk-dia.](https://github.com/pistazie/cdk-dia) La visualizzazione dell'architettura aiuta a migliorare la comprensione e la comunicazione tra i membri del team. Fornisce una panoramica chiara dei componenti del sistema e delle loro relazioni.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Usa cdk-nag per applicare le migliori pratiche. | Usa [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) per aiutarti a mantenere un'infrastruttura sicura e conforme applicando le migliori pratiche e riducendo il rischio di vulnerabilità di sicurezza e configurazioni errate.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ### Valuta la configurazione e lo schema del database | Operazione | Description | Competenze richieste | | --- | --- | --- | | Acquisire variabili di ambiente. | Per ottenere le variabili di ambiente richieste, utilizzate i seguenti passaggi:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Stabilisci il port forwarding. | Per stabilire il port forwarding, utilizzare i seguenti passaggi:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Regola il timeout di Systems Manager Session Manager. | (Facoltativo) Se il timeout di sessione predefinito di 20 minuti è troppo breve, è possibile aumentarlo fino a 60 minuti nella console Systems Manager selezionando Gestione sessioni, **Preferenze**, **Modifica**, Timeout **sessione** **inattiva**. | Sviluppatore di app | | Visualizza il database. | pgAdmin è uno strumento open source intuitivo per la gestione dei database PostgreSQL. Semplifica le attività del database, consentendoti di creare, gestire e ottimizzare i database in modo efficiente. Questa sezione guida l'utente nell'[installazione di pgAdmin](https://www.pgadmin.org/download/) e nell'utilizzo delle sue funzionalità per la gestione del database PostgreSQL.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ### Esegui il debug con Node.js | Operazione | Description | Competenze richieste | | --- | --- | --- | | Esegui il debug dello use case create item. | Per eseguire il debug del caso d'uso di creazione dell'elemento, segui questi passaggi:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/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/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ### Sviluppa il frontend | Operazione | Description | Competenze richieste | | --- | --- | --- | | Configura il server di sviluppo. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ### Utensili con Green Boost | Operazione | Description | Competenze richieste | | --- | --- | --- | | Configura monorepo e il gestore di pacchetti pnpm. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Esegui script pnpm. | Esegui i seguenti comandi nella directory principale del tuo repository:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Notate come questi comandi vengono eseguiti in tutte le aree di lavoro. I comandi sono definiti nel campo di ogni area di `package.json#scripts` lavoro. | Sviluppatore di app | | Utilizzare ESLint per l'analisi statica del codice. | Per testare la capacità di analisi statica del codice ESLint, effettuate le seguenti operazioni:[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Gestisci dipendenze e vulnerabilità. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | | Hook di pre-commit con Husky. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Questi strumenti sono meccanismi che aiutano a impedire che codice errato entri nell'applicazione. | Sviluppatore di app | ### Distruggi l'infrastruttura | Operazione | Description | Competenze richieste | | --- | --- | --- | | Rimuovi la distribuzione dal tuo account. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/it_it/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Sviluppatore di app | ## risoluzione dei problemi | Problema | Soluzione | | --- | --- | | Impossibile stabilire il port forwarding | Assicurati che le tue credenziali AWS siano configurate correttamente e dispongano delle autorizzazioni necessarie.Ricontrolla che le variabili di ambiente bastion host ID (`DB_BASTION_ID`) e database endpoint (`DB_ENDPOINT`) siano impostate correttamente.Se i problemi persistono, consulta la documentazione AWS per la [risoluzione dei problemi di connessioni SSH e Session Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html). | | Il sito Web non si sta caricando `localhost:3000` | Verifica che l'output del terminale indichi che il port forwarding è andato a buon fine, incluso l'indirizzo di inoltro.Assicurati che non vi siano processi in conflitto utilizzando la porta 3000 sul computer locale.Verificate che l'applicazione Green Boost sia configurata correttamente e in esecuzione sulla porta prevista (3000).Controlla il tuo browser web per eventuali estensioni o impostazioni di sicurezza che potrebbero bloccare le connessioni locali. | | Messaggi di errore durante la distribuzione locale (`pnpm deploy:local`) | Esamina attentamente i messaggi di errore per identificare la causa del problema.Verificate che le variabili di ambiente e i file di configurazione necessari siano impostati correttamente. | ## Risorse correlate + [Documentazione CDK AWS](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Documentazione Green Boost](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Documentazione Next.js](https://nextjs.org/docs) + [Documentazione Node.js](https://nodejs.org/en/docs/) + [Documentazione React](https://reactjs.org/docs/getting-started.html) + [TypeScript documentazione](https://www.typescriptlang.org/docs/)