= Hosting van uw React-applicatie met AWS in 30 minuten =
Deze tutorial bevat veel afbeeldingen en is gericht op complete beginners. Er wordt uitgelegd hoe u uw React-applicatie op een website kunt hosten, met een volledig autorisatiesysteem. Het beroept zich op de kracht van AWS MobileHub via de Mobilehub CLI (Command Line Interface). De tutorial vereist geen vaardigheden met AWS-services en laat je ook zien hoe je een React-boilerplate-applicatie opzet.
Als je al een React-applicatie hebt,
**u kunt doorgaan naar sectie 2 waar we awsmobile-cli installeren en toevoegen aan onze applicatie
= Voordat we beginnen, moeten we een aantal dingen op uw computer instellen =
**Node 8.x-omgeving geïnstalleerd op uw computer**
- Dit is de runtime-omgeving voor Javascript-applicatieservers. Het volgt met de knooppuntpakketbeheerder (NPM).
- NPM wordt gebruikt om knooppuntpakketten te installeren, zoals React, AWS Amplify, een AWS-JS-connectorpakket en dat is het eigenlijk.
- httpsnodejs.org/en/download/
**Een AWS Free Tier-account
- U krijgt gratis toegang tot AWS Services via Free Tier. Voor deze tutorial zou dit meer dan genoeg moeten zijn. Houd er echter rekening mee dat elke service elke maand een gebruikslimiet heeft en dat dit u echt geld kan kosten.
- httpsaws.amazon.com/free/
**Installeer de AWS CLI (Command Line Interface) om AWS-services rechtstreeks vanaf uw console aan te roepen** **Voor deze cursus gebruiken we de onderhouden boilerplate van Facebook, makers van React **Een editor naar keuze
- Ik stel voor om te beginnen met Visual Studio Code, een zeer aanpasbare lichtgewicht editor die de meeste programmeertalen en frameworks kan draaien.
Pro-tip: zorg ervoor dat u tijdens het installatieproces van VS Code het vakje aanvinkt dat het toevoegt aan de padnamen van uw omgeving. Dit geeft u toegang tot het openen van VS Code vanaf de terminal door âÃÂÃÂcode bestandsnaam.jsâÃÂàof âÃÂà te typen Âcode .âÃÂàvoor het hele project waarin u zich bevindt. **Een terminal waar u zich in bevindt. Je zit er comfortabel in
- De meeste ontwikkelaars zouden Git op hun computer moeten hebben geïnstalleerd. Dit geeft je toegang tot Git Bash, de terminal van veel ontwikkelaars.
Laten we beginnen!
**1. Maak de React-applicatie en voer de projectmap in via terminal**
Ga de terminal binnen en zoek uw map waar u applicaties opslaat. Ik stel een map voor met de naam âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app projectnaam&& cd projectnaam
of
npm -g install create-react-app create-react-app projectnaam
Hier maken we een React-applicatie op basis van de boilerplate. âÃÂÃnpxâÃÂàis een Node-tool die de npm-server gebruikt voor het aanroepen van externe pakketten. Het tweede codefragment installeert create-react-app lokaal met
*npm -g install create-react-app* **en maakt vervolgens de applicatie aan. Ik raad aan om npx te gebruiken om altijd up-to-date te zijn met create-react-app en maakt vervolgens de applicatie. Ik stel voor om npx te gebruiken om altijd up-to-date te zijn met create-react-app. **2. Installeer awsmobile CLI op uw computer en voer het uit in het project**
Vanaf dit punt moet u aandacht besteden aan uw React-toepassing in uw code-editor. Er zullen mappen worden toegevoegd zoals /awsmobile en enkele toevoegingen aan het bestand package.json.
Typ in een terminalvenster
npm install -g awsmobile-cli
om awsmobile-cli wereldwijd te installeren. We zullen dit gebruiken na wat werk in de AWS Mobile Hub-console.
Zorg ervoor dat je in je project zit en typ
awsmobile begin
U wordt gevraagd een reeks vragen te stellen, waarvan de standaardwaarden goed zijn, dus druk op Enter bij elke instelling totdat AWS automatisch wordt geopend in uw standaardbrowser. Log in met uw Free Tier-account als u dat nog niet deed.
Dit verzekert awsmobile-cli ervan dat we verbonden zijn met het juiste AWS-account. Ga terug naar uw terminal en druk op Enter om door te gaan.
AWS moet een gebruiker instellen om de applicatie te besturen. Dit wordt automatisch gedaan door awsmobile-cli wanneer u op enter blijft drukken.
Nadat je dit hebt voltooid, word je naar AWS IAM gebracht, waar je gewoon de volgende ¢ÃÂàjouw weg naar volledigheid! In de tweede stap zou automatisch âÃÂÃÂAdministrator AccessâÃÂàmoeten zijn aangevinkt, wat de gebruiker toegang geeft tot alle functies van AWS die we nodig hebben.
Als u klaar bent, is het erg belangrijk dat u het .csv-bestand met uw geheime inloggegevens downloadt, aangezien deze slechts één keer in AWS worden weergegeven. Deze toetsen moeten worden gebruikt in de volgende stappen van uw terminalvenster.
Dit maakt met succes uw AWS MobileHub-applicatie en installeert automatisch aws-amplify& aws-amplify-react in uw lokale React-project
Wanneer dit proces is voltooid (~ 1 min), kunt u typen
awsmobiele console
om uw Mobile Hub-applicatie in uw standaardbrowser te zien. U kunt ook 'awsmobile'typen om een lijst met verschillende acties weer te geven. Vanaf hier voegen we Cognito Login toe met de browser, maar u kunt dit doen vanuit de awsmobile CLI.
**3. Cognito Sign-in en Hosting daadwerkelijk toevoegen**
Voor de laatste stap voegen we AWS Cognito toe aan ons project via de AWS MobileHub Console. U kunt ook Hosting bekijken, die standaard al is ingeschakeld.
Om Hosting te testen, klikt u op de functie in uw console en klikt u op de URL die u heeft gekregen. De inhoud hier is een sjabloon van AWS, maar u zult deze binnenkort overschrijven met de React-applicatie.
**Als u Cognito User Sign-in wilt toevoegen, scrolt u omlaag om âÃÂÃÂUser Sign-in te vinden en klikt u erop. **Dit maakt Cognito User Pools mogelijk met een authenticatiesysteem. Gebruik âÃÂÃÂEmailâÃÂàvan e-mailadres of telefoonnummer om e-mail als gebruikersnaam af te dwingen bij uw login. Of u kunt Gebruikersnaam gebruiken en âÃÂÃÂE-mailâÃÂà+ âÃÂÃÂGebruikersnaamâà inschakelen Âàom de gebruiker te laten kiezen. Je ontvangt hoe dan ook de bevestigingscode per e-mail.
We accepteren e-mail omdat AWS geen kosten in rekening brengt voor het verzenden van registratiebevestigingscodes naar e-mail, terwijl het echt geld kost om sms te verzenden.
Wat resulteert in:
Als u in Cognito op Actie >Bewerken klikt, ziet u de Cognito-console voor het beheren van uw gebruikers en geavanceerde beveiligingsfuncties. Sommige instellingen die u in deze stap hebt gedaan, kunnen niet ongedaan worden gemaakt, maar u kunt altijd uw gebruikersgroep verwijderen en een nieuwe maken.
Hiermee is de configuratie van AWS Cognito in MobileHub voltooid. Het is tijd om code toe te voegen. Hoe veel? 5 regels! En 3 daarvan zijn alleen invoer in React.
= Uw instellingen toevoegen aan het React-project en publiceren op uw website =
In uw terminal kunt u op elk moment awsmobile pull of awsmobile push gebruiken om respectievelijk uw wijzigingen van de AWS MobileHub Console online naar uw applicatie te halen, of uw lokale wijzigingen via de awsmobile CLI in de terminal te pushen.
Voor deze use case willen we de aangebrachte wijzigingen ophalen. Ga terug naar je terminal en typ
Terug in VS Code ziet u dat uw project nu is gewijzigd. U kunt uw lokale configuraties controleren in ./awsmobile/backend/mobile-hub-project.yml
Ook zul je in ./package.json zien dat de twee gemarkeerde bibliotheken worden toegevoegd door awsmobile init, wat we eerder deden.
We zullen deze nu gebruiken om onze applicatie in een Cognito-inlogvenster te plaatsen. Open ./src/index.js en wijzig dit:
hierop:
importeer Reageren van 'reageren';
importeer ReactDOM uit 'react-dom';
importeer index.css';
app importeren uit app';
importeer registerServiceWorker uit registerServiceWorker';
importeer awsMobile van aws-exports';
importeer Amplify uit 'aws-amplify';
import { withAuthenticator } from "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
