Les traductions sont fournies par des outils de traduction automatique. En cas de conflit entre le contenu d'une traduction et celui de la version originale en anglais, la version anglaise prévaudra. # Découvrez le développement complet d'applications Web natives pour le cloud avec Green Boost *Ben Stickley et Amiin Samatar, Amazon Web Services* ## Résumé En réponse à l'évolution des besoins des développeurs, Amazon Web Services (AWS) reconnaît la nécessité d'adopter une approche efficace du développement d'applications Web natives pour le cloud. L'objectif d'AWS est de vous aider à surmonter les obstacles courants associés au déploiement d'applications Web sur le cloud AWS. En exploitant les capacités des technologies modernes telles qu' TypeScriptAWS Cloud Development Kit (AWS CDK), React et Node.js, ce modèle vise à rationaliser et à accélérer le processus de développement. S'appuyant sur la boîte à outils Green Boost (GB), le modèle propose un guide pratique pour créer des applications Web qui utilisent pleinement les fonctionnalités étendues d'AWS. Il constitue une feuille de route complète qui vous guide tout au long du processus de déploiement d'une application Web CRUD (Create, Read, Update, Delete) fondamentale intégrée à Amazon Aurora PostgreSQL Compatible Edition. Ceci est réalisé en utilisant l'interface de ligne de commande Green Boost (CLI Green Boost) et en établissant un environnement de développement local. Après le déploiement réussi de l'application, le modèle explore les composants clés de l'application Web, notamment la conception de l'infrastructure, le développement du backend et du frontend, ainsi que les outils essentiels tels que cdk-dia pour la visualisation, facilitant ainsi une gestion de projet efficace. ## Conditions préalables et limitations **Conditions préalables** + [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installé + [Visual Studio Code (VS Code)](https://code.visualstudio.com/download) installé + [Interface de ligne de commande (AWS CLI) (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/getting-started-install.html) installée + [AWS CDK Toolkit installé](https://docs.aws.amazon.com/cdk/v2/guide/cli.html) + [Node.js 18](https://nodejs.org/en/download) installé, ou [Node.js 18 avec pnpm activé](https://pnpm.io/cli/env) + [pnpm](https://pnpm.io/installation) installé, s'il ne fait pas partie de votre installation de Node.js + Connaissance de base d'AWS CDK TypeScript, de Node.js et de React + Un [compte AWS actif](https://docs.aws.amazon.com/accounts/latest/reference/manage-acct-creating.html) + [Un compte AWS a démarré à l'aide](https://docs.aws.amazon.com/cdk/v2/guide/bootstrapping.html) d'AWS CDK dans. `us-east-1` La région `us-east-1` AWS**** est requise pour le support des fonctions Amazon CloudFront Lambda @Edge. + [Informations d'identification de sécurité AWS](https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-envvars.html)`AWS_ACCESS_KEY_ID`, y compris celles correctement configurées dans votre environnement de terminal + Pour les utilisateurs de Windows, un terminal en mode administrateur (pour s'adapter à la façon dont pnpm gère les modules de nœuds) **Versions du produit** + SDK AWS pour JavaScript version 3 + AWS CDK version 2 + Version 2.2 de l'interface de ligne de commande AWS + Version 18 de Node.js + Version 18 de React ## Architecture **Pile technologique cible** + 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 **Architecture cible** Le schéma suivant montre que les demandes des utilisateurs passent par Amazon CloudFront, AWS WAF et AWS Lambda avant d'interagir avec un compartiment S3, une base de données Aurora, EC2 une instance et d'atteindre finalement les développeurs. Les administrateurs, quant à eux, utilisent Amazon SNS et Amazon à des CloudWatch fins de notification et de surveillance. ![\[Processus de déploiement d'une application Web CRUD intégrée à Amazon Aurora PostgreSQL à l'aide de la CLI Green Boost.\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/129691e9-7fd3-4208-ab8c-05b9f40a5c4c.png) Pour obtenir un aperçu plus approfondi de l'application après le déploiement, vous pouvez créer un diagramme à l'aide de [cdk-dia](https://github.com/pistazie/cdk-dia), comme indiqué dans l'exemple suivant. ![\[Le premier diagramme montre une vue centrée sur l'utilisateur ; le diagramme cdk-dia montre une vue de l'infrastructure technique.\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/bacafc47-07c0-494b-8bbf-24bdc9b54f6a/images/5e4c3321-47bd-44e7-bf14-f470eed984c1.png) Ces diagrammes présentent l'architecture de l'application Web sous deux angles distincts. Le diagramme cdk-dia offre une vue technique détaillée de l'infrastructure AWS CDK, en mettant en évidence des services AWS spécifiques tels que la compatibilité avec Amazon Aurora PostgreSQL et AWS Lambda. En revanche, l'autre diagramme adopte une perspective plus large, mettant l'accent sur le flux logique des données et les interactions avec les utilisateurs. La principale différence réside dans le niveau de détail : le cdk-dia explore les subtilités techniques, tandis que le premier schéma fournit une vue plus centrée sur l'utilisateur. La création du diagramme cdk-dia est abordée dans l'épique *Comprendre l'infrastructure des applications à l'aide d'AWS* CDK. ## Outils **Services AWS** + [Amazon Aurora PostgreSQL Compatible Edition](https://docs.aws.amazon.com/AmazonRDS/latest/AuroraUserGuide/Aurora.AuroraPostgreSQL.html) est un moteur de base de données relationnelle entièrement géré et compatible ACID qui vous aide à configurer, exploiter et dimensionner les déploiements PostgreSQL. + [AWS Cloud Development Kit (AWS CDK)](https://docs.aws.amazon.com/cdk/latest/guide/home.html) est un framework de développement logiciel qui vous aide à définir et à provisionner l'infrastructure du cloud AWS sous forme de code. + [L'interface de ligne de commande AWS (AWS CLI)](https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-welcome.html) est un outil open source qui vous permet d'interagir avec les services AWS par le biais de commandes dans votre shell de ligne de commande. + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) accélère la diffusion de votre contenu Web en le diffusant via un réseau mondial de centres de données, ce qui réduit la latence et améliore les performances. + [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) vous CloudWatch aide à surveiller les indicateurs de vos ressources AWS et des applications que vous exécutez sur AWS en temps réel. + [Amazon Elastic Compute Cloud (Amazon EC2)](https://docs.aws.amazon.com/ec2/) fournit une capacité de calcul évolutive dans le cloud AWS. Vous pouvez lancer autant de serveurs virtuels que vous le souhaitez et les augmenter ou les diminuer rapidement. + [AWS Lambda](https://docs.aws.amazon.com/lambda/latest/dg/welcome.html) est un service de calcul qui vous permet d'exécuter du code sans avoir à provisionner ou à gérer des serveurs. Il exécute votre code uniquement lorsque cela est nécessaire et évolue automatiquement, de sorte que vous ne payez que pour le temps de calcul que vous utilisez. + [AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) vous aide à remplacer les informations d'identification codées en dur dans votre code, y compris les mots de passe, par un appel d'API à Secrets Manager pour récupérer le secret par programmation. + [AWS Systems Manager](https://docs.aws.amazon.com/systems-manager/latest/userguide/what-is-systems-manager.html) vous aide à gérer vos applications et votre infrastructure exécutées dans le cloud AWS. Il simplifie la gestion des applications et des ressources, réduit le délai de détection et de résolution des problèmes opérationnels et vous aide à gérer vos ressources AWS en toute sécurité à grande échelle. Ce modèle utilise le gestionnaire de session AWS Systems Manager. + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html) est un service de stockage d'objets basé sur le cloud qui vous permet de stocker, de protéger et de récupérer n'importe quel volume de données. [Amazon Simple Notification Service (Amazon SNS](https://docs.aws.amazon.com/sns/latest/dg/welcome.html)) vous aide à coordonner et à gérer l'échange de messages entre les éditeurs et les clients, y compris les serveurs Web et les adresses e-mail. + [AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/what-is-aws-waf.html) est un pare-feu pour applications Web qui vous permet de surveiller les demandes HTTP et HTTPS qui sont transmises aux ressources protégées de votre application Web. **Autres outils** + [Git](https://git-scm.com/docs) est un système de contrôle de version distribué et open source. + [Green Boost](https://awslabs.github.io/green-boost/overview/intro) est une boîte à outils permettant de créer des applications Web sur AWS. + [Next.js](https://nextjs.org/docs) est un framework React permettant d'ajouter des fonctionnalités et des optimisations. + [Node.js](https://nodejs.org/en/docs/) est un environnement d' JavaScript exécution piloté par les événements conçu pour créer des applications réseau évolutives. + [pgAdmin](https://www.pgadmin.org/) est un outil de gestion open source pour PostgreSQL. Il fournit une interface graphique qui vous permet de créer, de gérer et d'utiliser des objets de base de données. + [pnpm](https://pnpm.io/motivation) est un gestionnaire de paquets pour les dépendances du projet Node.js. ## Bonnes pratiques Consultez la section [Epics](#explore-full-stack-cloud-native-web-application-development-with-green-boost-epics) pour plus d'informations sur les recommandations suivantes : + Surveillez l'infrastructure à l'aide des CloudWatch tableaux de bord et des alarmes Amazon. + Appliquez les meilleures pratiques d'AWS en utilisant cdk-nag pour exécuter une analyse statique de l'infrastructure sous forme de code (IaC). + Établissez la redirection de port de base de données via le tunneling SSH (Secure Shell) avec le gestionnaire de session Systems Manager, qui est plus sécurisé que le fait d'avoir une adresse IP exposée publiquement. + Gérez les vulnérabilités en exécutant`pnpm audit`. + Appliquez les meilleures pratiques en utilisant [ESLint](https://eslint.org/)pour effectuer une analyse de TypeScript code statique et [Prettier](https://prettier.io/) pour standardiser le formatage du code. ## Épopées ### Déployer une application Web CRUD compatible avec Aurora PostgreSQL | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Installez la CLI Green Boost. | Pour installer Green Boost CLI, exécutez la commande suivante.
pnpm add -g gboost
| Développeur d’applications | | Créez une application GB. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Installez les dépendances et déployez l'application. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Attendez la fin du déploiement (environ 20 minutes). Pendant que vous attendez, surveillez les CloudFormation piles AWS dans la CloudFormation console. Remarquez comment les constructions définies dans le code correspondent à la ressource déployée. Passez en revue l'[arborescence de CDK Construct](https://docs.aws.amazon.com/cdk/v2/guide/constructs.html) dans la CloudFormation console. | Développeur d’applications | | Accédez à l'application. | Après avoir déployé votre application GB localement, vous pouvez y accéder à l'aide de l' CloudFront URL. L'URL est imprimée dans la sortie du terminal, mais elle peut être un peu difficile à trouver. Pour le trouver plus rapidement, procédez comme suit :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Vous pouvez également trouver l' CloudFront URL en accédant à la CloudFront console Amazon :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Copiez le **nom de domaine** associé à la distribution. Cela ressemblera à`your-unique-id.cloudfront.net`. | Développeur d’applications | ### Surveillez en utilisant Amazon CloudWatch | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Consultez le CloudWatch tableau de bord. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Activez les alertes. | Un CloudWatch tableau de bord vous permet de surveiller activement votre application Web. Pour surveiller passivement votre application Web, vous pouvez activer les alertes.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ### Découvrez l'infrastructure des applications à l'aide d'AWS CDK | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Créez un schéma d'architecture. | Générez un schéma d'architecture de votre application Web à l'aide de [cdk-dia](https://github.com/pistazie/cdk-dia). La visualisation de l'architecture permet d'améliorer la compréhension et la communication entre les membres de l'équipe. Il fournit une vue d'ensemble claire des composants du système et de leurs relations.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Utilisez cdk-nag pour appliquer les meilleures pratiques. | Utilisez [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) pour vous aider à maintenir une infrastructure sécurisée et conforme en appliquant les meilleures pratiques, en réduisant le risque de vulnérabilités de sécurité et de mauvaises configurations.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ### Évaluer la configuration et le schéma de la base de données | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Acquérir des variables d'environnement. | Pour obtenir les variables d'environnement requises, procédez comme suit :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Établissez la redirection de port. | Pour établir la redirection de port, procédez comme suit :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Ajustez le délai d'expiration du gestionnaire de sessions de Systems Manager. | (Facultatif) Si le délai d'expiration de session par défaut de 20 minutes est trop court, vous pouvez l'augmenter jusqu'à 60 minutes dans la console Systems Manager en choisissant **Session Manager**, **Preferences**, **Edit**, **Idle session timeout**. | Développeur d’applications | | Visualisez la base de données. | pgAdmin est un outil open source convivial pour gérer les bases de données PostgreSQL. Il simplifie les tâches de base de données, vous permettant de créer, de gérer et d'optimiser efficacement les bases de données. Cette section explique comment [installer pgAdmin](https://www.pgadmin.org/download/) et comment utiliser ses fonctionnalités pour la gestion des bases de données PostgreSQL.[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ### Déboguer avec Node.js | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Déboguez le cas d'utilisation de la fonction Create Item. | Pour déboguer le cas d'utilisation lié à la création d'un élément, procédez comme suit :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/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/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ### Développez le frontend | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Configurez le serveur de développement. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ### Outillage avec Green Boost | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Configurez monorepo et le gestionnaire de paquets pnpm. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Exécutez des scripts pnpm. | Exécutez les commandes suivantes à la racine de votre dépôt :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Remarquez comment ces commandes sont exécutées dans tous les espaces de travail. Les commandes sont définies dans le `package.json#scripts` champ de chaque espace de travail. | Développeur d’applications | | À utiliser ESLint pour l'analyse de code statique. | Pour tester la capacité d'analyse de code statique de ESLint, procédez comme suit :[\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Gérez les dépendances et les vulnérabilités. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | | Pré-validez les hameçons avec Husky. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html)Ces outils sont des mécanismes qui aident à empêcher le mauvais code de pénétrer dans votre application. | Développeur d’applications | ### Détruire l'infrastructure | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Supprimez le déploiement de votre compte. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/explore-full-stack-cloud-native-web-application-development-with-green-boost.html) | Développeur d’applications | ## Résolution des problèmes | Problème | Solution | | --- | --- | | Impossible d'établir la redirection de port | Assurez-vous que vos informations d'identification AWS sont correctement configurées et que vous disposez des autorisations nécessaires.Vérifiez que les variables d'environnement Bastion Host ID (`DB_BASTION_ID`) et Database Endpoint (`DB_ENDPOINT`) sont correctement définies.Si vous rencontrez toujours des problèmes, consultez la documentation AWS pour [résoudre les problèmes liés aux connexions SSH et au gestionnaire de session](https://docs.aws.amazon.com/systems-manager/latest/userguide/session-manager-getting-started-enable-ssh-connections.html). | | Le site Web ne se charge pas `localhost:3000` | Vérifiez que la sortie du terminal indique une redirection de port réussie, y compris l'adresse de transfert.Assurez-vous qu'il n'y a aucun processus conflictuel utilisant le port 3000 sur votre machine locale.Vérifiez que l'application Green Boost est correctement configurée et s'exécute sur le port attendu (3000).Vérifiez dans votre navigateur Web la présence d'extensions ou de paramètres de sécurité susceptibles de bloquer les connexions locales. | | Messages d'erreur lors du déploiement local (`pnpm deploy:local`) | Lisez attentivement les messages d'erreur pour identifier la cause du problème.Vérifiez que les variables d'environnement et les fichiers de configuration nécessaires sont correctement définis. | ## Ressources connexes + [Documentation du kit AWS CDK](https://docs.aws.amazon.com/cdk/latest/guide/home.html) + [Documentation Green Boost](https://awslabs.github.io/green-boost/learn/m1-deploy-gb-app) + [Documentation Next.js](https://nextjs.org/docs) + [Documentation Node.js](https://nodejs.org/en/docs/) + [Documentation React](https://reactjs.org/docs/getting-started.html) + [TypeScript documentation](https://www.typescriptlang.org/docs/)