Déployez une application monopage basée sur React sur Amazon S3 et CloudFront - Recommandations AWS
RécapitulatifConditions préalables et limitationsArchitectureOutilsBonnes pratiquesÉpopéesRessources connexesInformations supplémentaires

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

Créée par Jean-Baptiste Guillois () AWS

Référentiel de code : application mono-page basée sur CORS React

Environnement : Production

Technologies : applications Web et mobiles ; sans serveur

Charge de travail : toutes les autres charges de travail

AWSservices : Amazon API Gateway ; Amazon CloudFront

Récapitulatif

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 fichier écrit dans React sur Amazon Simple Storage Service (Amazon S3) et Amazon. CloudFront Ce modèle utilise un REST API fichier configuré dans Amazon API Gateway et exposé via une CloudFront distribution Amazon afin de simplifier la gestion du partage de ressources entre origines (CORS). SPA

Conditions préalables et limitations

Prérequis

  • Un actif Compte AWS.

  • Node.js etnpm, installé et configuré. Pour plus d'informations, consultez la section Téléchargements de la documentation Node.js.

  • Yarn, installé et configuré. Pour plus d'informations, consultez la documentation Yarn.

  • Git, installé et configuré. Pour plus d'informations, consultez la documentation Git.

Architecture

Architecture pour le déploiement d'une solution basée sur React sur Amazon SPA S3 et CloudFront

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 régionaux API (REST). Les journaux des applications sont collectés à l'aide d'Amazon CloudWatch. Tous les AWS API appels sont audités dans AWS CloudTrail. Toutes les configurations de sécurité (par exemple, les identités et les autorisations) sont gérées dans AWS Identity and Access Management (IAM). Le contenu statique est diffusé via le réseau de diffusion de CloudFront contenu Amazon (CDN), et les DNS requêtes sont traitées par Amazon Route 53.

Outils

AWSservices

  • Amazon API Gateway vous aide à créer, publier, gérer, surveiller et sécuriser, et REST ceHTTP, WebSocket APIs à n'importe quelle échelle.

  • AWS CloudFormationvous 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 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 CloudTrailvous aide à auditer la gouvernance, la conformité et le risque opérationnel de votre Compte AWS

  • Amazon vous CloudWatch aide à surveiller les indicateurs de vos AWS ressources et des applications que vous utilisez AWS en temps réel.

  • AWS Identity and Access Management (IAM) 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 est un service DNS Web évolutif et hautement disponible.

  • Amazon Simple Storage Service (Amazon S3) 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 CORSseule page GitHub basé sur React.

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 (AmazonEC2) 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) pour protéger vos actifs contre les attaques malveillantes.

Épopées

TâcheDescriptionCompé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.

  1. Dans le répertoire du projet, exécutez la npm install commande pour initier les dépendances de l'application. 

  2. Exécutez la yarn dev commande pour démarrer l'application localement. 

Développeur d'applications, AWS DevOps

Accédez à l'application localement.

Ouvrez une fenêtre de navigateur et entrez le http://localhost:3000 URL pour accéder à l'application.

Développeur d'applications, AWS DevOps
TâcheDescriptionCompétences requises

Déployez le AWS CloudFormation modèle.

  1. Connectez-vous à la AWS CloudFormation console AWS Management Console, puis ouvrez-la.

  2. Choisissez Create Stack, puis choisissez Avec de nouvelles ressources (standard).

  3. Choisissez Charger un fichier de modèle.

  4. Choisissez Choisir un fichier, choisissez le react-cors-spa-stack.yaml fichier dans le référentiel cloné, puis cliquez sur Suivant.

  5. Entrez un nom pour votre pile, puis choisissez Next.

  6. Conservez toutes les options par défaut, puis choisissez Next.

  7. Passez en revue les paramètres finaux de votre pile, puis choisissez Create stack.

Développeur d'applications, AWS DevOps

Personnalisez les fichiers source de votre application.

  1. Une fois votre stack déployé, ouvrez l'onglet Output et identifiez le Bucket nom et APIDomain la valeur.

  2. Copiez le domaine de CloudFront distribution pour RESTAPI.

  3. Accédez à ce domaine<project_root>/src/pages/index.tsx, puis insérez-le ou collez-le dans la valeur de la APIEndPoint variable à la ligne 13 du index.tsx fichier.

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.

  1. Ouvrez la console Amazon S3.

  2. Identifiez et choisissez le compartiment S3 créé précédemment par la CloudFormation pile.

  3. Choisissez Télécharger, puis Ajouter des fichiers.

  4. Choisissez le contenu de votre out dossier.

  5. Choisissez Ajouter un dossier, puis sélectionnez le _next répertoire.

    Important : Choisissez le _next répertoire, pas le contenu.

  6. Choisissez Upload pour télécharger les fichiers et le répertoire dans votre compartiment S3.

Développeur d'applications, AWS DevOps
TâcheDescriptionCompé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
TâcheDescriptionCompétences requises

Supprimez le contenu du compartiment S3.

  1. Ouvrez la console Amazon S3 et choisissez le compartiment créé précédemment par la pile (le premier compartiment dont le nom commence parreact-cors-spa-). 

  2. Choisissez Empty pour supprimer le contenu du compartiment.

  3. Choisissez le deuxième compartiment créé précédemment par la pile (le deuxième compartiment dont le nom commence par react-cors-spa- et se termine par-logs).

  4. Choisissez Empty pour supprimer le contenu du compartiment.

AWS DevOps, Développeur d'applications

Supprimez la AWS CloudFormation pile.

  1. Ouvrez la AWS CloudFormation console et choisissez la pile que vous avez créée précédemment.

  2. Choisissez Supprimer pour supprimer la pile et toutes les ressources associées.

AWS DevOps, Développeur d'applications

Ressources connexes

Pour déployer et héberger votre application Web, vous pouvez également utiliser AWS Amplify Hosting, 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, 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 deCORS, le REST API est exposé par le biais d'une CloudFront distribution.