Comment j'ai déployé mon application React sur AWS Cloud Snd CloudFront - une procédure pas à pas complète

Déployer une application React à AWS S3 et CloudFront: un guide étape par étape

Ce guide vous guide en déploiement de votre application React à Amazon S3 pour l'hébergement statique et en utilisant CloudFront pour la livraison de contenu.

Étape 1: Démarrage

Avant de commencer, assurez-vous d'avoir:

1. node.js et npm installés localement.
2. un compte AWS avec les privilèges administrateurs.

Étape 2: Construire votre application React

1. Ouvrez votre terminal.
2. Créez une nouvelle application React à l'aide de Vite: npm create vite@latest <your_project_name> (Remplacez <your_project_name> par le nom souhaité).
3. Accédez au répertoire du projet: cd <your_project_name>

Étape 3: Vérification et construction

1. Démarrez le serveur de développement pour tester: npm start. Accéder à votre application à http://localhost:3000.
2. Arrêtez le serveur de développement (Ctrl C).
3. Créez votre application pour la production: npm run build. Cela crée un dossier build/ contenant des fichiers optimisés.

Étape 4: Configuration du seau S3

1. Dans la console de gestion AWS, accédez au service S3.
2. Créez un nouveau seau, fournissant un nom unique (par exemple, <your_unique_bucket_name>).
3. Sélectionnez une région et créez le seau.

Étape 5: Activation de l'hébergement de site Web statique sur S3

1. Sélectionnez votre seau nouvellement créé.
2. Accédez à l'onglet "Propriétés".
3. sous "Hébergement de sites Web statiques", activez-le.
4. Définir "Document Index" et "Document d'erreur" à index.html.
5. Enregistrer les modifications.

Étape 6: Configuration des autorisations de seau

1. Accédez à l'onglet "Autorisations".
2. Modifier la politique du seau. Assurez-vous que la politique permet d'accéder au public à votre site Web (considérez les implications de la sécurité et ajustez en conséquence pour les environnements de production).
3. Enregistrez la politique. Testez votre déploiement en accédant à l'URL du seau S3 dans votre navigateur.

Étape 7: Tester le déploiement S3

Accédez à votre application déployée via l'URL S3 (par exemple, http://<your_unique_bucket_name>.s3-website-.amazonaws.com/).

Étape 8: Configuration de CloudFront pour CDN

1. Dans la console de gestion AWS, accédez au service CloudFront.
2. Créez une nouvelle distribution. Choisissez "Web" comme méthode de livraison.
3. Configurez les paramètres d'origine, pointant vers votre point de terminaison de seau S3.
4. Définissez la politique du protocole de la visionneuse sur "Rediriger HTTP vers HTTPS."
5. Créez la distribution.

Étape 9: Tester le déploiement du cloudfront

Une fois la distribution CloudFront déployée, accédez à votre application via l'URL CloudFront.

Conclusion

Vous avez réussi à déployer votre application React à AWS S3 et CloudFront! Votre application est désormais servie via un CDN, garantissant une grande disponibilité et des performances optimisées pour les utilisateurs du monde entier. N'oubliez pas de remplacer les noms et régions du seau d'espace pour place avec vos valeurs réelles. Prioriser toujours les meilleures pratiques de sécurité lors du déploiement en production.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!