= Déployer des applications React sur Amazon S3 =
== Guide de 5 minutes sur la façon de déployer React Apps avec S3 ==
Vous avez donc terminé votre application React et vous cherchez à l'héberger quelque part. Saviez-vous que vous pouvez utiliser Amazon AWS S3 pour héberger vos applications React ? C'est relativement facile, peu coûteux et rapide à déployer.
= Commençons ! =
== Prérequis ==
Avant d'entrer dans l'hébergement, laissons faire la configuration administrative. Assurez-vous que les éléments suivants sont remplis :
**Vous avez un compte AWS Inscrivez-vous pour un compte AWS ici : httpsaws.amazon.com/resources/create-account/ **Créer un utilisateur AWS Dans la console AWS, accédez à l'onglet IAM, puis accédez au à Section "Utilisateurs"sur la barre latérale.
Cliquez sur âÃÂÃÂAdd UserâÃÂàet cochez âÃÂÃÂProgrammatic accessâàÃÂ.
Cliquez sur âÃÂÃÂSuivant : AutorisationsâÃÂàet ici sélectionnez âÃÂÃÂAttacher les politiques existantes directementâà ÃÂ. Cochez âÃÂÃÂAdministratorAccessâÃÂàpour le déploiement.
Cliquez sur les boutons Suivant et enfin cliquez sur âÃÂÃÂCréer un utilisateurâÃÂÃÂ.
Dans la dernière étape, nous recevons un ID de clé d'accès et une clé d'accès secrète. Télécharger et
** enregistrez-les sur votre ordinateur car vous en aurez besoin plus tard
== Installer AWS CLI ==
L'AWS CLI est un outil puissant qui peut nous aider à simplifier le processus de déploiement.
Laissez-vous installer AWS CLI à l'aide de Homebrew (pour macOS). Installez Homebrew si vous ne l'avez pas déjà fait.
*Remarque : Si vous utilisez Windows, vous pouvez trouver les instructions sur la documentation officielle * *ici*
Ouvrez votre terminal et entrez
brasser installer awscli.
Une fois l'outil CLI installé, nous pouvons configurer notre compte AWS avec
aws configure. C'est ici que vous devrez entrer les informations de clé d'accès que vous avez précédemment téléchargées. Cela devrait ressembler à ce qui suit.
Pour la région, vous pouvez vérifier votre URL sur la console AWS et elle mentionnera votre région. Par exemple, le mien est âÃÂÃÂap-southeast-1âÃÂÃÂ.
= Création d'une application React =
Votre application React est peut-être déjà prête à être déployée. Toutefois, si vous avez besoin d'un exemple d'application, vous pouvez utiliser les options suivantes :
- Générer une application standard React en exécutant
npx créer-réagir-app mon-application
- Téléchargez mon exemple d'application React (avec un exemple de formulaire) sur httpsgithub.com/harishv7/react-hook-form-example. Cela a été fait pour un tutoriel pour ajouter des formulaires aux applications React. Vérifiez le ici.
Une fois cela fait, assurez-vous que les dépendances sont toutes installées en utilisant
fil installez et lancez l'application en utilisant
début de fil.
= Configurer un compartiment S3 =
Maintenant que notre exemple d'application est prêt, nous allons configurer un compartiment S3 pour héberger notre application.
Sur la console AWS, recherchez âÃÂÃÂS3âÃÂàet accédez au tableau de bord S3. Cliquez sur âÃÂÃÂCreate bucketâÃÂàet donnez au bucket un nom tel que âÃÂÃÂmy-react -app-2021âÃÂà(ou tout ce que vous souhaitez).
*Remarque : Le nom du compartiment doit être unique sur l'ensemble de S3. Choisissez donc un nom unique qui n'existe pas, sinon vous obtiendrez une erreur !* 
Activez l'accès public au bucket puisque nous l'hébergeons en direct.
Laissez le reste des paramètres tels quels et cliquez sur "Créer un compartiment". Vous verrez une entrée comme celle-ci sur votre tableau de bord S3.
Cliquez et accédez à notre compartiment S3 nouvellement créé.
Cliquez sur "Propriétés"et faites défiler jusqu'en bas où vous voir âÃÂÃÂHébergement de site Web statiqueâÃÂÃÂ.
Cliquez sur âÃÂÃÂEnableâÃÂàet entrez âÃÂÃÂindex.htmlâààsous Index document.
Laissez les autres champs inchangés et cliquez sur âÃÂÃÂEnregistrer les modificationsâÃÂÃÂ.
= Déploiement sur S3 =
Nous sommes maintenant prêts à déployer notre application sur S3. Pour ce faire, utilisez la commande CLI suivante :
aws s3 sync build/ s3your-bucket-name>--acl public-read
Nous pouvons également ajouter cette commande à notre fichier package.json en tant que script âÃÂÃÂdeployâÃÂÃÂ.
Construisons notre application en utilisant
construction de fil qui aide à créer une construction de production optimisée.
Ensuite, laissez la commande CLI donnée ci-dessus ou si vous avez configuré votre script de publication dans package.json, nous pouvons utiliser
déploiement de fils.
Ça y est, notre application est maintenant déployée !
Pour savoir où notre application est hébergée (le lien du site Web), accédez à la console AWS S3 et cliquez sur le compartiment que vous avez créé.
Allez dans l'onglet Propriétés et faites défiler jusqu'au site Web statique. section hébergement et notre URL sera là.
Cliquez dessus et votre application s'ouvrira dans un nouvel onglet. Voici le mien !
= Conclusion =
Nous avons déployé avec succès notre application React sur Amazon S3 ! C'est un excellent choix pour déployer et tester rapidement vos prototypes React et les partager avec d'autres. Il est également très facile et rapide à déployer.
J'espère que ce tutoriel vous a été utile !
Bon codage ! ðÃÂÃÂû
*Plus de contenu sur * *plainenglish.io*
