= Värd för din React-applikation med AWS på 30 minuter =
Denna handledning är mycket bildtung och riktar sig till helt nybörjare. Den förklarar hur du kan vara värd för din React-applikation på en webbplats, med ett komplett auktoriseringssystem. Det åberopar kraften hos AWS MobileHub genom Mobilehub CLI (Command Line Interface). Handledningen kräver inga färdigheter med AWS-tjänster och kommer också att visa dig hur du konfigurerar en React-applikation.
Om du redan har en React-applikation,
**du kan hoppa till avsnitt 2 där vi installerar awsmobile-cli och lägger till det i vår applikation
= Innan vi börjar behöver vi ett par saker konfigurerade på din dator =
**Node 8.x-miljö installerad på din dator**
- Detta är runtime-miljön för Javascript-applikationsservrar. Det följer med nodpakethanteraren (NPM).
- NPM används för att installera nodpaket som React, AWS Amplify, ett AWS-JS-anslutningspaket och det är i princip det.
- httpsnodejs.org/en/download/
**Ett AWS Free Tier-konto
- Du får gratis tillgång till AWS Services genom Free Tier. För denna handledning borde detta vara mer än tillräckligt. Tänk dock på att varje tjänst har en gräns för användning varje månad och detta kan kosta dig riktiga pengar.
- httpsaws.amazon.com/free/
**Installera AWS CLI (Command Line Interface) för att ringa AWS-tjänster direkt från din konsol** **För den här kursen kommer vi att använda den underhållna plattan från Facebook, skaparna av React **En redaktör som du väljer
- Jag föreslår att börja med Visual Studio Code, en mycket modifierbar lättviktsredigerare som kan köra de flesta programmeringsspråk och ramverk.
Proffstips: I installationsprocessen för VS Code, se till att markera rutan som lägger till den i dina miljösökvägsnamn. Detta ger dig tillgång till öppen VS-kod från terminalen genom att skriva âÃÂÃÂkod filnamn.jsâÃÂàeller âÃÂà Âkod .âÃÂàför hela projektet du befinner dig i. **En terminal du âÃÂà är bekväm i
– De flesta utvecklare borde ha Git installerat på sin dator. Detta ger dig tillgång till Git Bash som är många utvecklare som går till terminal.
Låt oss börja!
**1. Skapa React-applikationen och gå in i projektmappen via terminal**
Gå in i terminalen och leta upp din mapp där du lagrar applikationer. Jag föreslår en mapp som heter âÃÂÃÂdevâÃÂÃÂ.
npx create-react-app projektnamn&& cd projektnamn
eller
npm -g installera create-react-app create-react-app projektnamn
Här skapar vi en React-applikation baserad på pannplattan. âÃÂÃÂnpxâÃÂàär ett nodverktyg som använder npm-servern för att anropa fjärrpaket. Det andra kodavsnittet installerar create-react-app lokalt med
*npm -g installera create-react-app* **och skapar sedan applikationen. Jag föreslår att du använder npx för att alltid vara uppdaterad med create-react-app och sedan skapar applikationen. Jag föreslår att du använder npx för att alltid vara uppdaterad med create-react-app. **2. Installera awsmobile CLI på din dator och kör den i projektet**
Från denna punkt bör du vara uppmärksam på din React-applikation i din kodredigerare. Det kommer att läggas till mappar som /awsmobile och några tillägg till filen package.json.
I ett terminalfönster skriver du
npm installera -g awsmobile-cli
för att installera awsmobile-cli globalt. Vi kommer att använda det här efter att ha gjort lite arbete i AWS Mobile Hub-konsolen.
Se till att du är inne i ditt projekt och skriver
awsmobile init
Du uppmanas med en uppsättning frågor, där standardinställningarna är bra så tryck enter genom varje inställning tills den automatiskt öppnar AWS i din standardwebbläsare. Logga in med ditt Free Tier-konto om du inte redan har gjort det.
Detta försäkrar awsmobile-cli att vi är anslutna till rätt AWS-konto. Gå tillbaka till din terminal och tryck på Enter för att fortsätta.
AWS måste ställa in en användare för att kontrollera applikationen. Detta kommer att göras automatiskt av awsmobile-cli när du fortsätter att trycka på enter.
Efter att ha slutfört detta kommer du att föras till AWS IAM där du bara kommer att göra nästa ¢ÃÂàdig igenom till fullständighet! I det andra steget bör den automatiskt ha markerat âÃÂÃÂAdministrator AccessâÃÂàvilket ger användaren tillgång till alla funktioner i AWS vi behöver.
När du är klar är det mycket viktigt att du laddar ner .csv-filen med dina hemliga referenser eftersom de bara kommer att visas en gång i AWS. Dessa nycklar ska användas i nästa steg i ditt terminalfönster.
Detta skapar framgångsrikt din AWS MobileHub-applikation och installerar automatiskt aws-amplify& aws-amplify-react in i ditt lokala React-projekt
När denna process är klar (~1 min) kan du skriva
awsmobile konsol
för att se din Mobile Hub-applikation i din standardwebbläsare. Du kan också skriva âÃÂÃÂawsmobileâÃÂàför att se en lista med olika åtgärder. Härifrån lägger vi till Cognito Login med webbläsaren, men du kan göra det från awsmobile CLI.
**3. Lägger faktiskt till Cognito Inloggning och Hosting**
För det sista steget kommer vi att lägga till AWS Cognito till vårt projekt genom AWS MobileHub Console. Du kan också kolla in Hosting som redan är aktiverat som standard.
För att testa Hosting, klicka på funktionen i din konsol och klicka på URL:en du har fått. Innehållet här är en mall från AWS, men du kommer snart att skriva över det med React-applikationen.
**För att lägga till Cognito User Inloggning, scrolla nedåt för att hitta âÃÂÃÂUser Sign-inâÃÂàoch klicka på den. **Detta möjliggör Cognito User Pools med ett autentiseringssystem. Använd âÃÂÃÂEmailâÃÂàfrån E-postadress eller telefonnummer för att tvinga fram e-post som användarnamn i din inloggning. Eller så kan du använda Användarnamn och aktivera âÃÂÃÂEmailâÃÂà+ âÃÂÃÂAnvändarnamnâà Âàför att låta användaren välja. Du får bekräftelsekoden via e-post i båda fallen.
Vi accepterar e-post eftersom AWS inte tar betalt för att skicka ut registreringsbekräftelsekoder till e-post, medan det kostar riktiga pengar att skicka SMS.
Vilket resulterar i:
Om du klickar på Åtgärd >Redigera i Cognito kommer du att se Cognito-konsolen för att hantera dina användare och avancerade säkerhetsfunktioner. Vissa inställningar du gjorde i det här steget är inte reversibel men du kan alltid ta bort din användarpool och skapa en ny.
Detta slutför konfigurationen av AWS Cognito inuti MobileHub. Det är dags att lägga till kod. Hur mycket? 5 rader! Och 3 av dem är bara importer i React.
= Lägga till dina inställningar i React-projektet och publicera på din webbplats =
I din terminal kan du när som helst använda awsmobile pull eller awsmobile push för att dra dina ändringar från AWS MobileHub Console online till din applikation, eller skicka dina lokala ändringar gjorda genom awsmobile CLI i terminalen.
För detta användningsfall vill vi hämta de ändringar vi gjort. Gå tillbaka till din terminal och skriv
Tillbaka i VS Code kommer du att se att ditt projekt nu har modifierats. Du kan kontrollera dina lokala konfigurationer i ./awsmobile/backend/mobile-hub-project.yml
Dessutom, i ./package.json hittar du de två markerade biblioteken som läggs till av awsmobile init, vilket vi gjorde tidigare.
Vi kommer nu att använda dessa för att slå in vår applikation i ett Cognito-inloggningsfönster. Öppna ./src/index.js och ändra detta:
till detta:
importera Reagera från 'reagera';
importera ReactDOM från 'react-dom';
importera index.css';
importera app från app';
importera registerServiceWorker från registerServiceWorker';
importera awsMobile från aws-exports';
importera Amplify från 'aws-amplify';
importera { withAuthenticator } från "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
