Slik bygger du Serverless Web Apps med React og AWS Amplify

AWS Amplify er et klientbibliotek, CLI toolchain og UI-komponentbibliotek som lar utviklere raskt lage og koble til kraftige tjenester i skyen. I dette innlegget ser vi på hvordan du bygger fullt serverløse webapper med React og AWS Amplify med funksjoner som autentisering, et administrert GraphQL datalag, lagring, lambda-funksjoner og web hosting..

Amplify muliggjør funksjoner som Managed GraphQL (AWS AppSync), lagring (Amazon S3), brukerautentisering (Amazon Cognito), serverløse funksjoner (AWS Lambda), hosting (Amazon CloudFront og Amazon S3), analytics (Amazon Pinpoint) og mer.

Målet med biblioteket og CLI er å la utviklere lage fullstabile web- og mobilapplikasjoner uten å måtte bekymre seg om å administrere sin egen back-end-infrastruktur, slik at de kan bevege seg videre opp i stabelen ved hjelp av ferdighetene de allerede kjenner.

I denne serien vil jeg vise deg hvordan du oppretter et nytt AWS Amplify-prosjekt, aktiverer sky-funksjoner ved hjelp av CLI, kobler React-programmet og begynner å samhandle med skygtjenestene. I dette innlegget vil jeg vise deg hvordan du implementerer godkjenning, lagring og hosting. I den neste opplæringen lærer vi hvordan du lager og samhandler med GraphQL og Serverless APIer.

Mens denne opplæringen bruker React, vil Amplify jobbe med et hvilket som helst JavaScript-prosjekt og har ramme-spesifikke komponenter for Angular, Vue, React Native og Ionic. CLI støtter også native iOS og Android.

Starter

Opprett et nytt reaksjonsprogram

For å komme i gang må vi først opprette et nytt React-program ved hjelp av CLI for CREATE-REPAY og bytte til den nye katalogen:

npx create-react-app forsterker-web-app cd amplify-web-app

Deretter installerer vi AWS Amplify-klientavhengighetene:

garn legg til aws-amplify aws-amplify-react # eller npm installere aws-amplify aws-amplify-react

Installer og konfigurer AWS Amplify CLI

Deretter må vi installere AWS Amplify CLI.

npm installer -g @ aws-amplify / cli

Nå som AWS Amplify CLI er installert, må vi konfigurere den for å kunne opprette ressurser i vår AWS-konto. Vi gjør dette ved å kjøre forsterker configure kommandoen og sette opp en ny AWS-bruker.

forsterker configure

Du kan se en kort video gjennomgang av denne konfigurasjonen på YouTube.

Nå som AWS Amplify CLI er installert og konfigurert, kjør forsterke kommandoen fra kommandolinjen din for å se tilgjengelige alternativer og sikre at CLI ble installert riktig.

forsterke

Initialisering av et nytt AWS Amplify-prosjekt

For å initialisere et nytt AWS Amplify-prosjekt, kjører vi forsterker init kommando:

forsterker init

Når du blir bedt om det, velg ønsket tekstredigeringsprogram og hold standardinnstillingene for alle de andre alternativene.

Dette har nå initialisert et nytt AWS Amplify-prosjekt lokalt, og vi vil nå se en forsterke katalog og .amplifyrc fil opprettet i rotkatalogen av vårt React-prosjekt. Disse filene inneholder konfigurasjonsinformasjon om vårt Amplify-prosjekt, og vi trenger ikke å røre dem i det hele tatt for nå.

Implementere godkjenning

Den første funksjonen vi aktiverer, er brukerautentisering. Vi kan aktivere funksjoner når som helst ved å kjøre forsterker legg til . Kategorien for godkjenning er auth, så løp:

forsterker legg til auth

Når du blir spurt Vil du bruke standard autentisering og sikkerhetskonfigurasjon?, velge Ja.

Når dette er opprettet, må vi løpe forsterk press å opprette den nye tjenesten i vår konto:

forsterk press

Når du blir spurt Er du sikker på at du vil fortsette?, velge Ja.

Når tjenesten er opprettet, kan du når som helst se tjenesten i betjeningspanelet ved å besøke https://console.aws.amazon.com/cognito/users/ og klikk på navnet på tjenesten din.

Vi kan også vise alle aktiverte tjenester når som helst ved å kjøre forsterk status:

forsterk status

Du vil også legge merke til en ny fil som ble opprettet-AWS-exports.js-i rotmappen til React-appen. Du trenger ikke å redigere denne filen som den håndteres for deg av CLI, men vi vil bruke den i neste trinn for å konfigurere det lokale prosjektet.

Legger til godkjenning i React App

Nå som vi har opprettet autentiseringstjenesten, kan vi begynne å bruke den i vår React-app!

Det første vi må gjøre er å konfigurere React-programmet for å vite om vårt Amplify-prosjekt. Slik gjør vi det ved å ringe Amplify.configure i roten til prosjektet - for oss, vil det være src / index.js.

import Forsterk fra 'aws-amplify' importkonfigurasjon fra './aws-exports' Amplify.configure (config)

Nå er vårt prosjekt klar til å gå, og vi kan implementere godkjenning.

Bruker withAuthenticator Høyere bestillingskomponent

Vi ser på et par måter å gå om å implementere brukerautentisering, men for å sparke ting, begynner vi å bruke withAuthenticator høyere rekkefølge komponent fra AWS-forsterke reagerer bibliotek. Denne komponenten stiller ut en hel autentiseringsflyt i bare noen få linjer med kode og er en fin måte å komme seg opp med biblioteket.

I App.js, importere withAuthenticator HOC øverst på filen:

importer withAuthenticator fra 'aws-amplify-react' 

Og, nederst, oppdatere eksport uttalelse om å pakke inn app komponent med withAuthenticator.

eksporter standard medAuthenticator (App)

For å lære mer, les om tilgjengelige Amplify React-komponenter for godkjenning i den offisielle dokumentasjonen.

Testing av godkjenningsflyten

Nå kan vi kjøre appen og bør se en påloggingsskjerm:

Klikk Opprett konto å registrere deg og logge deg på appen. Når vi er logget inn, blir økten lagret, så vi kan oppdatere siden, og vi vil bli logget på.

Innloggingsalternativer

Vi kan også gjengi en sign-out-knapp ved å legge et annet argument til HOC:

eksporter standard medAuthenticator (App, includeGreetings: true)

Merk at vi også kan bruke Auth klasse direkte for å signere brukere ut:

// 1. Import klassen import Auth fra 'aws-amplify' // Signer brukeren ut avventer Auth.signOut ()

Legg merke til at når du ringer Auth.signOut direkte, må vi likevel gjenopprette komponenten på en måte for å bringe brukeren tilbake til påloggingssiden. Du kan se et eksempel på dette i en problemtråd på prosjektets GitHub repo. 

Bruker Auth Klasse

Vi kan også bruke Auth klasse for å håndtere brukere manuelt. Auth har over 30 tilgjengelige metoder, inkludert melde deg på, Logg inn, confirmSignUp, confirmSignIn, Glemt passord, og resendSignUp.

La oss se på hvordan du kan implementere brukeropplysning ved hjelp av melde deg på klassemetode:

// 1. Opprett startstatus for å holde brukerinnganger state = brukernavn: ", passord:", e-post: ", telefonnummer:", authCode: " // 2. onChange handler for endringer i brukerinngang onChange = e =>  this.setState ([e.target.name]: e.target.value) // 3. Funksjon å ringe Auth.signUp signUp = async () => const brukernavn, passord, email, phone_number = this.state venter Auth.signUp (brukernavn, passord, attributter: phone_number, email) console.log ('vellykket pålogget') // 4. Funksjon å ringe Auth.signUp confirmSignUp = async () => const brukernavn, authCode = this.state venter Auth.confirmSignUp (brukernavn, authCode) console.log ('vellykket bekreftet registrert') // 5. I gjengivelsesmetode lager du inndata med attributter for å oppdatere tilstand  // 6. Lag knapper for å ringe signUp og confirmSignUp metoder Melde deg på

Dette er en tegning for hvordan du manuelt kunne registrere en bruker med Auth-klassen.

Manuell implementering tar lengre tid å skrive, men gir deg full kontroll over ikke bare brukergrensesnittet, men også den faktiske funksjonaliteten du vil implementere.

Du kan lære mer om godkjenning med AWS forsterker i prosjektdokumentasjonen.

Lagring med Amazon S3

Amazon S3 er en populær tjeneste for lagring av medier som bilder og videoer, samt for back-end-tjenester som applikasjonshotell, sikkerhetskopiering og programvarelevering.

AWS Amplify CLI gjør det mulig for oss å opprette, konfigurere, oppdatere og slette S3-buckets. I denne delen ser vi på hvordan du lager en S3-bøtte, samt hvordan du laster opp og laster ned bilder og filer til bøtte.

For å aktivere Lagring kan vi kjøre følgende kommando:

forsterker legg til lagring

Deretter blir du bedt om å levere noen konfigurasjonsdetaljer. Velg Innhold (bilder, lyd, video, etc.) service. Deretter leverer du et prosjektspesifikt ressursnavn (brukt internt i prosjektet) og bøtte navn (S3-stedet der dataene dine skal lagres). Til slutt bør tilgang begrenses til Bare bruk brukere, og autentiserte brukere skal gis Les Skriv adgang.

Nå har lagring blitt lagt til i vår konfigurasjon, og vi løper forsterk press å opprette de nye ressursene i vår konto:

forsterk press

Dette vil skape og konfigurere en Amazon S3-bøtte som vi kan begynne å bruke til lagring av elementer.

Eksempel på bruk av S3-lagring

Hvis vi ønsket å teste dette ut, kunne vi lagre litt tekst i en fil som dette:

importere Storage fra 'aws-amplify' // lage funksjon for å jobbe med Storage addToStorage = () => Storage.put ('javascript / MyReactComponent.js', 'import React from' reagere 'const App = () = > ( 
Hei Verden
 ) eksport standard App ') .then (result => console.log (' result: ', result)) .catch (err => console.log (' error: ', err));  // legge til klikkhåndterer Legg til i lager

Dette vil opprette en mappe som heter javascript i vår S3-bøtte og lagre en fil som heter MyReactComponent.js der med koden vi angav i det andre argumentet til Storage.put.

Hvis vi vil lese alt fra denne mappen, kan vi bruke Storage.list:

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

Hvis vi bare vil lese enkeltfilen, kan vi bruke Storage.get:

readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('data fra S3:', data)) .catch (err => console.log feil '))

Hvis vi ønsket å trekke ned alt, kunne vi bruke Storage.list:

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

Arbeide med bilder

Arbeide med bilder er også enkelt. Her er et eksempel:

klasse S3ImageUpload strekker seg React.Component onChange (e) const file = e.target.files [0]; Storage.put ('example.png', fil, contentType: 'image / png') .then (resultat => console.log (result)) .catch (err => console.log (err));  gjengivelse () retur (  this.onChange (e) />)

I koden ovenfor kobler vi en filopplastingsformularinngang til onChange hendelse handler. Når brukeren forsyner en fil, Storage.put kalles for å laste opp filen til S3 med MIME-typen image / png.

hosting

For å distribuere og hoste appen din på AWS, kan vi bruke hosting kategori.

forsterker legg til hosting

Igjen blir du bedt om å levere noen konfigurasjonsalternativer:

• For miljøtype, velg DEV (S3 bare med HTTP).
• Velg et globalt unikt bøttenavn der prosjektet ditt vil bli hostet.
• Gi navnet på indeksen og feiladressene for nettstedet - vanligvis index.html.

Nå er alt satt opp, og vi kan publisere appen:

forsterk publisere

Fjerne tjenester

Hvis du til enhver tid vil slette en tjeneste fra prosjektet og kontoen din, kan du gjøre dette ved å kjøre forsterker fjerne kommandoen og trykk deretter.

forsterker fjern auth forsterker push 

Hvis du er usikker på hvilke tjenester du har aktivert når som helst, kan du kjøre forsterk status kommando:

forsterk status

forsterk status vil gi deg listen over ressurser som for øyeblikket er aktivert i appen din.

Konklusjon

AWS Amplify gjør det mulig for utviklere å bygge fullstabler, skyaktiverte programmer lettere enn noen gang før, slik at utviklere kan iterere raskt, direkte fra deres front-end-miljø.

Dette er del en av en todelt serie. I den neste opplæringen lærer vi hvordan du lager og samhandler med GraphQL og Serverless APIer. Så hold deg innstilt.