Hur man bygger Serverless Web Apps med React och AWS förstärka

AWS Amplify är ett klientbibliotek, CLI toolchain och UI-komponentbibliotek som gör att utvecklare snabbt kan skapa och ansluta till kraftfulla tjänster i molnet. I det här inlägget ser vi hur man bygger helt serverlösa webbapps med React och AWS förstärkas med funktioner som autentisering, ett hanterat GraphQL-datalag, lagring, lambdafunktioner och webbhotell.

Amplify möjliggör funktioner som Managed GraphQL (AWS AppSync), lagring (Amazon S3), användarautentisering (Amazon Cognito), serverlösa funktioner (AWS Lambda), hosting (Amazon CloudFront och Amazon S3), analytics (Amazon Pinpoint) och mer.

Målet med biblioteket och CLI är att låta utvecklare skapa fullstabila webb- och mobilapplikationer utan att behöva oroa sig för att hantera sin egen back-end-infrastruktur, så att de kan flytta sig längre upp i stacken med hjälp av de färdigheter som de redan vet.

I den här serien visar jag hur du skapar ett nytt AWS Amplify-projekt, aktivera molnfunktioner med CLI, anslut React-programmet och börja interagera med molntjänsterna. I det här inlägget visar jag dig hur du implementerar autentisering, lagring och hosting. I nästa handledning lär vi dig hur du skapar och interagerar med GraphQL och Serverless API.

Medan denna handledning använder React, kommer Amplify att fungera med något JavaScript-projekt och har ramspecifika komponenter för Angular, Vue, React Native och Ionic. CLI stöder också nativ iOS och Android.

Komma igång

Skapa en ny reaktansansökan

För att komma igång måste vi först skapa en ny React-applikation med CLI skapar-reagera-appen och byta till den nya katalogen:

npx skapa-reagera-app förstärka-web-app cd amplify-web-app

Därefter installerar vi AWS Amplify-klientberoende:

garn lägga till aws-amplify aws-amplify-react # eller npm installera aws-amplify aws-amplify-react

Installera och konfigurera AWS Amplify CLI

Därefter måste vi installera AWS Amplify CLI.

npm installera -g @ aws-amplify / cli

Nu när AWS Amplify CLI är installerat måste vi konfigurera det för att kunna skapa resurser i vårt AWS-konto. Vi gör detta genom att springa förstärka konfigurera kommandot och konfigurera en ny AWS-användare.

förstärka konfigurera

Du kan se en kort video genomgång av den här konfigurationen på YouTube.

Nu när AWS Amplify CLI är installerad och konfigurerad, kör förstärka kommandot från din kommandorad för att se de tillgängliga alternativen och se till att CLI installerats korrekt.

förstärka

Initialisering av ett nytt AWS-förstärkningsprojekt

För att initiera ett nytt AWS Amplify-projekt, kör vi förstärka init kommando:

förstärka init

När du uppmanas väljer du din föredragna textredigerare och klarar standardinställningarna för alla andra alternativ.

Detta har nu initierat ett nytt AWS Amplify-projekt lokalt, och vi kommer nu att se en förstärka katalog och .amplifyrc filen skapad i rotkatalogen i vårt React-projekt. Dessa filer innehåller konfigurationsinformation om vårt Amplify-projekt, och vi behöver inte röra dem alls för tillfället.

Implementerande autentisering

Den första funktionen som vi aktiverar är användarautentisering. Vi kan aktivera funktioner när som helst genom att köra förstärka lägg till . Kategorin för autentisering är auth, så springa:

förstärka lägg till auth

När du blir frågad Vill du använda standard autentisering och säkerhetskonfiguration?, välja Ja.

När det här är skapat måste vi springa förstärka push att skapa den nya tjänsten i vårt konto:

förstärka push

När du blir frågad Är du säker på att du vill fortsätta?, välja Ja.

När tjänsten har skapats kan du när som helst visa tjänsten i instrumentbrädan genom att besöka https://console.aws.amazon.com/cognito/users/ och klicka på namnet på din tjänst.

Vi kan även visa alla aktiverade tjänster när som helst genom att köra förstärka status:

förstärka status

Du kommer också att märka en ny fil som skapades-AWS-exports.js-i rotmappen i React-appen. Du behöver inte redigera den här filen som den hanteras för dig av CLI, men vi kommer att använda den i nästa steg för att konfigurera det lokala projektet.

Lägger till autentisering till React App

Nu när vi har autentiseringstjänsten skapad kan vi börja använda den i vår React app!

Det första vi behöver göra är att konfigurera React-programmet för att veta om vårt Amplify-projekt. Det sätt vi gör är att ringa Amplify.configure i roden av projektet - för oss kommer det att vara src / index.js.

import Förstärk från 'aws-amplify' importkonfiguration från './aws-exports' Amplify.configure (config)

Nu är vårt projekt redo att gå, och vi kan implementera autentisering.

Använda withAuthenticator Högbeställningskomponent

Vi ska titta på ett par sätt att gå om att implementera användarautentisering, men för att sparka bort saker börjar vi med att använda withAuthenticator högre order komponent från AWS-amplifiera reagera bibliotek. Denna komponent ställer ut ett helt autentiseringsflöde i några få rader kod och är ett bra sätt att komma igång med biblioteket.

I App.js, importera withAuthenticator HOC högst upp i filen:

importera withAuthenticator från "aws-amplify-react" 

Och, längst ner, uppdatera exportera uttalande att paketera App komponent med withAuthenticator.

exportera standard medAuthenticator (App)

För att lära dig mer, läs om tillgängliga Amplify React-komponenter för autentisering i den officiella dokumentationen.

Testa autentiseringsflödet

Nu kan vi köra appen och bör se en inloggningsskärm:

Klick Skapa konto att registrera dig och logga in på appen. När vi är inloggade sparas sessionen, så vi kan uppdatera sidan och vi kommer bli inloggade.

Utloggningsalternativ

Vi kan också göra en utropsknapp genom att lägga till ett andra argument till HOC:

exportera standard medAuthenticator (App, includeGreetings: true)

Observera att vi också kan använda Auth klass direkt för att underteckna användare:

// 1. Importera klassimporten Auth från "aws-amplify" // Skriv ut användaren ut och vänta Auth.signOut ()

Observera att när du ringer Auth.signOut direkt måste vi fortfarande göra om komponenten på något sätt för att få användaren tillbaka till inloggningssidan. Du kan se ett exempel på detta i en frågestråd på projektets GitHub repo. 

Använda Auth Klass

Vi kan också använda Auth klass för att manuellt hantera användare. Auth har över 30 tillgängliga metoder inklusive Bli Medlem, logga in, confirmSignUp, confirmSignIn, glömt ditt lösenord, och resendSignUp.

Låt oss ta en titt på hur du kan implementera användarregistrering med hjälp av Bli Medlem klassmetod:

// 1. Skapa initialt tillstånd för att hålla användarinmatningar state = användarnamn: ", lösenord:", email: ", phone_number:", authCode: " // 2. onChange handler för användarinmatningsändringar onChange = e =>  this.setState ([e.target.name]: e.target.value) // 3. Funktion att ringa Auth.signUp signUp = async () => const användarnamn, lösenord, email, phone_number = this.state väntar Auth.signUp (användarnamn, lösenord, attribut: phone_number, email) console.log ("framgångsrikt registrerat") // 4. Funktion att ringa Auth.signUp confirmSignUp = async () => const användarnamn, authCode = this.state väntar Auth.confirmSignUp (användarnamn, authCode) console.log ('framgångsrikt bekräftat registrerat') // 5. Skapa metod med attribut för att uppdatera status  // 6. Skapa knappar för att ringa signUp och confirmSignUp metoder Bli Medlem

Detta är en plan för hur du manuellt kan registrera en användare med Auth-klassen.

Manuell implementering tar längre tid att skriva men ger dig fullständig kontroll över inte bara användargränssnittet utan även den faktiska funktionaliteten du vill implementera.

Du kan lära dig mer om Autentisering med AWS förstärka i projektdokumentationen.

Lagring med Amazon S3

Amazon S3 är en populär tjänst för att lagra media som bilder och videoklipp, liksom för back-end-tjänster som applikationshantering, säkerhetskopiering och leverans av programvara..

AWS Amplify CLI gör att vi kan skapa, konfigurera, uppdatera och ta bort S3-skopor. I det här avsnittet tittar vi på hur man skapar en S3-hink samt hur man laddar upp och hämtar bilder och filer till hinken.

För att aktivera lagring kan vi köra följande kommando:

förstärka lägg till lagring

Därefter uppmanas du att tillhandahålla vissa konfigurationsdetaljer. Välj Innehåll (bilder, ljud, video etc.) service. Ange sedan ett projektspecifikt resursnamn (används internt i projektet) och skopnamnet (S3-platsen där dina data kommer att lagras). Slutligen bör tillgången vara begränsad till Endast auth användare, och autentiserade användare bör beviljas läsa skriva tillgång.

Nu har lagring lagts till i vår konfiguration, och vi kör förstärka push att skapa de nya resurserna i vårt konto:

förstärka push

Detta skapar och konfigurerar en Amazon S3-hink som vi kan börja använda för att lagra objekt.

Exempel på användning av S3-lagring

Om vi ​​ville testa det här kunde vi lagra lite text i en fil så här:

importera Lagring från "aws-amplify" // skapa funktion för att arbeta med lagring addToStorage = () => Storage.put ('javascript / MyReactComponent.js', 'import React from' reagera 'const App = () = > ( 
Hej världen
 ) export standard App ') .then (resultat => console.log (' resultat: ', resultat)) .catch (err => console.log (' error: ', err));  // lägg till klickhanteraren Lägg till i lagring

Detta skapar en mapp som heter javaScript i vår S3-hink och lagra en fil som heter MyReactComponent.js där med koden vi angav i det andra argumentet av Storage.put.

Om vi ​​vill läsa allt från den här mappen kan vi använda Storage.list:

readFromStorage = () => Storage.list ('javascript /') .then (data => console.log ('data från S3:', data)) .catch (err => console.log ) 

Om vi ​​bara vill läsa den enkla filen kan vi använda Storage.get:

readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('data från S3:', data)) .catch (err => console.log fel "))

Om vi ​​ville dra ner allt vi kunde använda Storage.list:

readFromStorage = () => Storage.list (") .then (data => console.log (" data från S3: ", data)) .catch (err => console.log ('error'))

Arbeta med bilder

Att arbeta med bilder är också enkelt. Här är ett exempel:

klass S3ImageUpload utökar React.Component onChange (e) const file = e.target.files [0]; Storage.put ('example.png', fil, contentType: 'image / png') .then (result => console.log (result)) .catch (err => console.log (err));  render () returnera (  this.onChange (e) />)

I ovanstående kod länkar vi en filuppladdningsformatinmatning till onChange händelsehanterare. När användaren levererar en fil, Storage.put kallas för att ladda upp filen till S3 med MIME-typ image / png.

värd

För att distribuera och värd din app på AWS kan vi använda värd kategori.

förstärka lägg till värd

Återigen uppmanas du att tillhandahålla vissa konfigurationsalternativ:

• För miljötyp, välj DEV (S3 endast med HTTP).
• Välj ett globalt unikt hinknamn där ditt projekt kommer att vara värd.
• Ange namnet på indexet och feladresserna för webbplatsen, vanligtvis index.html.

Nu är allt upplagt, och vi kan publicera appen:

förstärka publicera

Ta bort tjänster

Om du vill ta bort en tjänst från ditt projekt och ditt konto, kan du göra det genom att köra förstärka bort kommandot och sedan trycka.

förstärka ta bort auth förstärka push 

Om du är osäker på vilka tjänster du har aktiverat när som helst kan du köra förstärka status kommando:

förstärka status

förstärka status kommer att ge dig en lista över resurser som för närvarande är aktiverade i din app.

Slutsats

AWS Amplify gör det möjligt för utvecklare att enkelt bygga full stack, molnaktiverade appar än någonsin tidigare, så att utvecklare kan iterera snabbt, direkt från sin front-end-miljö.

Detta är del ett av en tvådels serie. I nästa handledning lär vi dig hur du skapar och interagerar med GraphQL och Serverless API. Så håll dig stillad.