= Héberger votre application React avec AWS en 30 minutes =
Ce tutoriel est très riche en images et s'adresse aux débutants complets. Il explique comment vous pouvez héberger votre application React sur un site Web, avec un système d'autorisation complet. Il invoque la puissance d'AWS MobileHub via l'interface de ligne de commande Mobilehub (interface de ligne de commande). Le didacticiel ne nécessite aucune compétence avec les services AWS et vous montrera également comment configurer une application passe-partout React.
Si vous avez déjà une application React,
** vous pouvez passer à la section 2 où nous installons awsmobile-cli et l'ajoutons à notre application
= Avant de commencer, nous avons besoin de quelques éléments configurés sur votre ordinateur =
**Environnement Node 8.x installé sur votre ordinateur**
- Il s'agit de l'environnement d'exécution des serveurs d'applications Javascript. Il suit avec le gestionnaire de packages de nœuds (NPM).
- NPM est utilisé pour installer des packages de nœuds tels que React, AWS Amplify, un package de connecteur AWS-JS et c'est essentiellement tout.
- httpsnodejs.org/en/download/
**Un compte d'offre gratuite AWS
- Vous bénéficiez d'un accès gratuit aux services AWS via l'offre gratuite. Pour ce tutoriel, cela devrait être plus que suffisant. Cependant, n'oubliez pas que chaque service a une limite d'utilisation chaque mois et cela peut vous coûter de l'argent réel.
- httpsaws.amazon.com/free/
**Installez l'AWS CLI (Command Line Interface) pour appeler les services AWS directement depuis votre console** **Pour ce cours, nous utiliserons le passe-partout maintenu de Facebook, créateurs de React **Un éditeur de votre choix
- Je suggère de commencer par Visual Studio Code, un éditeur léger hautement modifiable qui peut exécuter la plupart des langages et frameworks de programmation.
Conseil de pro : dans le processus d'installation de VS Code, assurez-vous de cocher la case qui l'ajoute aux noms de chemin de votre environnement. Cela vous donne accès à ouvrir VS Code à partir du terminal en tapant âÃÂÃÂcode filename.jsâÃÂàou âÃÂà Âcode .âÃÂàpour l'ensemble du projet dans lequel vous êtes. **Un terminal dans lequel vousâÃÂà re à l'aise dans
- La plupart des développeurs devraient avoir Git installé sur leur ordinateur. Cela vous donne accès à Git Bash, qui est le terminal incontournable de nombreux développeurs.
Commençons!
**1. Créez l'application React et entrez le dossier du projet via le terminal **
Entrez dans le terminal et localisez votre dossier dans lequel vous stockez les applications. Je suggère un dossier nommé âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app nom-projet&& cd nom-projet
ou alors
npm -g install create-react-app create-react-app nom-projet
Ici, nous créons une application React basée sur le passe-partout. âÃÂÃÂnpxâÃÂàest un outil Node qui utilise le serveur npm pour appeler des packages distants. Le deuxième extrait de code installe create-react-app localement avec
*npm -g install create-react-app* **puis crée l'application. Je suggère d'utiliser npx pour être toujours à jour avec create-react-app, puis crée l'application. Je suggère d'utiliser npx pour être toujours à jour avec create-react-app. **2. Installez awsmobile CLI sur votre ordinateur et exécutez-le dans le projet **
À partir de ce moment, vous devez faire attention à votre application React dans votre éditeur de code. Il y aura des dossiers ajoutés tels que /awsmobile et quelques ajouts au fichier package.json.
Dans une fenêtre de terminal, tapez
npm install -g awsmobile-cli
pour installer awsmobile-cli globalement. Nous l'utiliserons après avoir travaillé dans la console AWS Mobile Hub.
Assurez-vous que vous êtes à l'intérieur de votre projet et tapez
initialisation awsmobile
Vous êtes invité avec un ensemble de questions, dans lesquelles les valeurs par défaut sont bonnes, alors appuyez sur Entrée pour chaque paramètre jusqu'à ce qu'il ouvre automatiquement AWS dans votre navigateur par défaut. Connectez-vous avec votre compte Free Tier si vous ne l'avez pas déjà fait.
Cela garantit à awsmobile-cli que nous sommes connectés au bon compte AWS. Retournez à votre terminal et appuyez sur Entrée pour continuer.
AWS doit configurer un utilisateur pour contrôler l'application. Cela sera fait automatiquement par awsmobile-cli lorsque vous continuerez à appuyer sur Entrée.
Après avoir terminé cela, vous serez redirigé vers AWS IAM où vous n'aurez plus qu'à suivre ¢ÃÂàvotre chemin jusqu'à l'exhaustivité ! Dans la deuxième étape, il devrait automatiquement avoir coché âÃÂÃÂAdministrator AccessâÃÂàqui donne à l'utilisateur l'accès à toutes les fonctionnalités d'AWS dont nous avons besoin.
Une fois terminé, il est très important que vous téléchargiez le fichier .csv avec vos informations d'identification secrètes car elles ne seront affichées qu'une seule fois dans AWS. Ces clés sont à utiliser dans les prochaines étapes de votre fenêtre de terminal.
Cela crée avec succès votre application AWS MobileHub et installe automatiquement aws-amplify& aws-amplify-react dans votre projet React local
Lorsque ce processus est terminé (~ 1 min), vous pouvez taper
console awsmobile
pour voir votre application Mobile Hub dans votre navigateur par défaut. Vous pouvez également taper âÃÂÃÂawsmobileâÃÂàpour voir une liste des différentes actions. À partir de là, nous allons ajouter Cognito Login avec le navigateur, mais vous pouvez le faire à partir de la CLI awsmobile.
**3. Ajout actuel de Cognito Sign-in and Hosting**
Pour la dernière étape, nous ajouterons AWS Cognito à notre projet via la console AWS MobileHub. Vous pouvez également consulter l'hébergement qui est déjà activé par défaut.
Pour tester l'hébergement, cliquez sur la fonctionnalité dans votre console et cliquez sur l'URL qui vous a été fournie. Le contenu ici est un modèle d'AWS, mais vous allez bientôt l'écraser avec l'application React.
**Pour ajouter Cognito User Sign-in, faites défiler vers le bas pour trouver âÃÂÃÂUser Sign-inâÃÂàet cliquez dessus. ** Cela active les groupes d'utilisateurs Cognito avec un système d'authentification. Utilisez âÃÂÃÂEmailâÃÂàde l'adresse e-mail ou du numéro de téléphone pour forcer l'e-mail comme nom d'utilisateur dans votre connexion. Ou vous pouvez utiliser le nom d'utilisateur et activer âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâà Âàpour laisser le choix à l'utilisateur. Vous recevrez le code de confirmation par e-mail dans les deux cas.
Nous acceptons les e-mails car AWS ne facture pas l'envoi des codes de confirmation d'inscription par e-mail, alors que l'envoi de SMS coûte de l'argent réel.
Ce qui se traduit par :
Si vous cliquez sur Action >Modifier dans Cognito, vous verrez la console Cognito pour gérer vos utilisateurs et les fonctions de sécurité avancées. Certaines configurations que vous avez effectuées à cette étape sont irréversibles, mais vous pouvez toujours supprimer votre groupe d'utilisateurs et en créer un nouveau.
Ceci termine la configuration d'AWS Cognito dans MobileHub. Il est temps d'ajouter du code. Combien? 5 lignes ! Et 3 d'entre eux ne sont que des importations dans React.
= Ajout de vos paramètres au projet React et publication sur votre site Web =
Dans votre terminal, vous pouvez à tout moment utiliser awsmobile pull ou awsmobile push pour extraire respectivement vos modifications de la console AWS MobileHub en ligne vers votre application, ou pousser vos modifications locales effectuées via l'interface de ligne de commande awsmobile dans le terminal.
Pour ce cas d'utilisation, nous voulons récupérer les modifications que nous avons apportées. Retournez à votre terminal et tapez
De retour dans VS Code, vous verrez que votre projet a maintenant été modifié. Vous pouvez vérifier vos configurations locales dans ./awsmobile/backend/mobile-hub-project.yml
De plus, dans ./package.json, vous trouverez les deux bibliothèques en surbrillance ajoutées par awsmobile init, ce que nous avons fait plus tôt.
Nous allons maintenant les utiliser pour envelopper notre application dans une fenêtre de connexion Cognito. Ouvrez ./src/index.js et modifiez ceci :
pour ça:
importer React depuis 'react' ;
importer ReactDOM depuis 'react-dom' ;
importer index.css' ;
importer l'application depuis l'application' ;
importez registerServiceWorker à partir de registerServiceWorker' ;
importer awsMobile depuis aws-exports ;
importer Amplify à partir de 'aws-amplifier' ;
import { withAuthenticator } de "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
