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éployez une application monopage basée sur React sur Amazon S3 et CloudFront *Jean-Baptiste Guillois, Amazon Web Services* ## Résumé Une application monopage (SPA) est un site Web ou une application Web qui met à jour dynamiquement le contenu d'une page Web affichée en utilisant JavaScript APIs. Cette approche améliore l'expérience utilisateur et les performances d'un site Web car elle ne met à jour que les nouvelles données au lieu de recharger l'intégralité de la page Web depuis le serveur. Ce modèle fournit une step-by-step approche pour coder et héberger un SPA écrit dans React sur Amazon Simple Storage Service (Amazon S3) et Amazon. CloudFront Dans ce modèle, le SPA utilise une API REST configurée dans Amazon API Gateway et exposée via une CloudFront distribution Amazon afin de simplifier la gestion du [partage de ressources entre origines (CORS).](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) ## Conditions préalables et limitations **Conditions préalables** + Un actif Compte AWS. + Node.js et`npm`, installé et configuré. Pour plus d'informations, consultez la section [Téléchargements](https://nodejs.org/en/download/) de la documentation Node.js. + Yarn, installé et configuré. Pour plus d'informations, consultez la [documentation Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable). + Git, installé et configuré. Pour plus d'informations, consultez la [documentation Git](https://github.com/git-guides/install-git). ## Architecture ![\[Architecture pour le déploiement d'un SPA basé sur React sur Amazon S3 et CloudFront\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/images/pattern-img/970a9d13-e8a2-44ac-aca5-a066e4be60e8/images/96061e05-8ac8-446e-b1da-baa6fc1cc7b6.png) Cette architecture est automatiquement déployée en utilisant AWS CloudFormation (infrastructure en tant que code). Il utilise des services régionaux tels qu'Amazon S3 pour stocker les actifs statiques et Amazon CloudFront avec Amazon API Gateway pour exposer les points de terminaison d'API régionaux (REST). Les journaux des applications sont collectés à l'aide d'Amazon CloudWatch. Tous les appels AWS d'API sont audités dans AWS CloudTrail. Toute la configuration de sécurité (par exemple, les identités et les autorisations) est gérée dans Gestion des identités et des accès AWS (IAM). Le contenu statique est diffusé via le réseau de diffusion de CloudFront contenu (CDN) Amazon et les requêtes DNS sont gérées par Amazon Route 53. ## Outils **Services AWS** + [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) vous aide à créer, publier, gérer, surveiller et sécuriser REST, HTTP, et ce, WebSocket APIs à n'importe quelle échelle. + [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)vous aide à configurer les AWS ressources, à les approvisionner rapidement et de manière cohérente, et à les gérer tout au long de leur cycle de vie dans toutes Comptes AWS les régions. + [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 le temps de latence et améliore les performances. + [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)vous aide à auditer la gouvernance, la conformité et le risque opérationnel de votre Compte AWS + [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) vous CloudWatch aide à surveiller les indicateurs de vos AWS ressources et des applications que vous utilisez AWS en temps réel. + [Gestion des identités et des accès AWS (IAM)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) vous aide à gérer en toute sécurité l'accès à vos AWS ressources en contrôlant qui est authentifié et autorisé à les utiliser. + [Amazon Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) est un service Web DNS hautement disponible et évolutif. + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) 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. **Code** L'exemple de code d'application de ce modèle est disponible dans le référentiel d'applications d'une [seule page CORS GitHub basé sur React](https://github.com/aws-samples/react-cors-spa). ## Bonnes pratiques En utilisant le stockage d'objets Amazon S3, vous pouvez stocker les actifs statiques de votre application de manière sécurisée, hautement résiliente, performante et rentable. Il n'est pas nécessaire d'utiliser un conteneur dédié ou une instance Amazon Elastic Compute Cloud (Amazon EC2) pour cette tâche. En utilisant le réseau de diffusion de CloudFront contenu Amazon, vous pouvez réduire la latence que vos utilisateurs peuvent rencontrer lorsqu'ils accèdent à votre application. Vous pouvez également associer un pare-feu d'application Web ([AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) pour protéger vos actifs contre les attaques malveillantes. ## Épopées ### Créez et déployez votre application localement | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Pour cloner le référentiel. | Exécutez la commande suivante pour cloner le référentiel de l'exemple d'application :
git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
| Développeur d'applications, AWS DevOps | | Déployez l'application localement. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Développeur d'applications, AWS DevOps | | Accédez à l'application localement. | Ouvrez une fenêtre de navigateur et entrez l'`http://localhost:3000`URL pour accéder à l'application. | Développeur d'applications, AWS DevOps | ### Déployer l'application | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Déployez le AWS CloudFormation modèle. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Développeur d'applications, AWS DevOps | | Personnalisez les fichiers source de votre application. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Développeur d’applications | | Créez le package d'application. | Dans le répertoire de votre projet, exécutez la `yarn build` commande pour créer le package d'application. | Développeur d’applications | | Déployez le package d'application. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Développeur d'applications, AWS DevOps | ### Tester l'application | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Accédez à l'application et testez-la. | Ouvrez une fenêtre de navigateur, puis collez le domaine de CloudFront distribution (le `SPADomain` résultat de la CloudFormation pile que vous avez déployée précédemment) pour accéder à l'application. | Développeur d'applications, AWS DevOps | ### Nettoyez les ressources | Sous-tâche | Description | Compétences requises | | --- | --- | --- | | Supprimez le contenu du compartiment S3. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, développeur d'applications | | Supprimez la CloudFormation pile. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/fr_fr/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, développeur d'applications | ## Ressources connexes Pour déployer et héberger votre application Web, vous pouvez également utiliser [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html), qui fournit un flux de travail basé sur Git pour héberger des applications Web complètes sans serveur avec un déploiement continu. Amplify Hosting en fait partie [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html), qui fournit un ensemble d'outils et de fonctionnalités spécialement conçus pour permettre aux développeurs Web et mobiles de créer rapidement et facilement des applications complètes. AWS ## Informations supplémentaires Pour traiter les URLs demandes non valides de l'utilisateur susceptibles de générer 403 erreurs, une page d'erreur personnalisée configurée dans la CloudFront distribution détecte 403 erreurs et les redirige vers le point d'entrée de l'application (`index.html`). Pour simplifier la gestion de CORS, l'API REST est exposée par le biais d'une CloudFront distribution.