Share
AWS Amplify is een clientbibliotheek, CLI-toolchain en UI-componentenbibliotheek waarmee ontwikkelaars snel krachtige services in de cloud kunnen maken en hiermee verbinding kunnen maken. In deze post bekijken we hoe je volledig serverloze web-apps kunt bouwen met React en AWS Amplify met functies zoals authenticatie, een beheerde GraphQL-gegevenslaag, opslag, lambda-functies en webhosting.
Amplify maakt functies mogelijk zoals managed GraphQL (AWS AppSync), opslag (Amazon S3), gebruikersauthenticatie (Amazon Cognito), serverloze functies (AWS Lambda), hosting (Amazon CloudFront en Amazon S3), analytics (Amazon Pinpoint) en meer.
Het doel van de bibliotheek en CLI is om ontwikkelaars volledige web- en mobiele toepassingen te laten maken zonder zich zorgen te hoeven maken over het beheer van hun eigen back-endinfrastructuur, waardoor ze verder kunnen gaan met de vaardigheden die ze al kennen.
In deze serie laat ik je zien hoe je een nieuw AWS Amplify-project maakt, cloudfuncties inschakelt met behulp van de CLI, de React-applicatie verbindt en begint te communiceren met de cloudservices. In dit bericht laat ik je zien hoe je authenticatie, opslag en hosting implementeert. In de volgende zelfstudie leren we hoe we GraphQL en Serverless API's kunnen maken en ermee kunnen werken.
Hoewel deze tutorial React gebruikt, werkt Amplify met elk JavaScript-project en heeft het framework-specifieke componenten voor Angular, Vue, React Native en Ionic. De CLI ondersteunt ook native iOS en Android.
Om aan de slag te gaan, moeten we eerst een nieuwe React-toepassing maken met behulp van de CLI voor create-react-app en deze omzetten in de nieuwe directory:
npx create-react-app amplify-web-app cd amplify-web-app
Vervolgens zullen we de AWS Amplify client afhankelijkheden installeren:
garen voeg aws-amplify toe aws-amplify-reage # of npm installeer aws-amplify aws-amplify-react
Vervolgens moeten we de AWS Amplify CLI installeren.
npm install -g @ aws-amplify / cli
Nu de AWS Amplify CLI is geïnstalleerd, moeten we deze configureren om bronnen in ons AWS-account te kunnen maken. We doen dit door het versterken configureren opdracht geven en een nieuwe AWS-gebruiker instellen.
versterken configureren
Je kunt een korte video-walkthrough van deze configuratie bekijken op YouTube.
Nu de AWS Amplify CLI is geïnstalleerd en geconfigureerd, voert u de versterken opdracht vanaf uw opdrachtregel om de beschikbare opties te bekijken en ervoor te zorgen dat de CLI correct is geïnstalleerd.
versterken
Om een nieuw AWS Amplify-project te initialiseren, zullen we het amplificeer init commando:
amplificeer init
Kies wanneer u hierom wordt gevraagd de gewenste teksteditor en blijf bij de standaardinstellingen voor alle andere opties.
Dit heeft nu een nieuw AWS Amplify-project lokaal geïnitialiseerd en we zullen nu een versterken map en .amplifyrc bestand gemaakt in de hoofdmap van ons React-project. Deze bestanden bevatten configuratiegegevens over ons Amplify-project en we hoeven ze nu helemaal niet aan te raken.
De eerste functie die we inschakelen is gebruikersauthenticatie. We kunnen functies op elk moment inschakelen door te draaien voeg toe . De categorie voor authenticatie is auth, zo rennen:
versterken add auth
Wanneer gevraagd Wilt u de standaardverificatie- en beveiligingsconfiguratie gebruiken??, Kiezen Ja.
Zodra dit is gemaakt, moeten we uitvoeren versterken push om de nieuwe service in onze account aan te maken:
versterken push
Wanneer gevraagd Weet je zeker dat je door wilt gaan?, Kiezen Ja.
Nadat de service is gemaakt, kunt u de service op elk gewenst moment in het dashboard bekijken door te bezoeken https://console.aws.amazon.com/cognito/users/ en klik op de naam van uw service.
We kunnen ook alle geactiveerde services op elk moment bekijken door te draaien versterk de status:
versterk de status
U ziet ook een nieuw bestand dat is gemaakt-AWS-exports.js-in de hoofdmap van de React-app. U hoeft dit bestand niet te bewerken omdat het door de CLI voor u is afgehandeld, maar we zullen het in de volgende stap gebruiken om het lokale project te configureren.
Nu we de authenticatieservice hebben gemaakt, kunnen we deze gaan gebruiken in onze React-app!
Het eerste wat we moeten doen, is de React-applicatie configureren om meer te weten te komen over ons Amplify-project. De manier waarop we dat doen is door te bellen Amplify.configure in de wortel van het project - dat zal voor ons zijn src / index.js.
import Amplify from 'aws-amplify' import config from './aws-exports' Amplify.configure (config)
Nu is ons project klaar voor gebruik en kunnen we authenticatie implementeren.
Accentsconagua
withAuthenticator Component met hogere bestellingWe zullen een aantal manieren bekijken om de gebruikersauthenticatie uit te voeren, maar om dingen uit te schakelen, zullen we beginnen met het gebruik van de withAuthenticator hogere orde component van de aws-amplificeren reageren bibliotheek. Dit onderdeel biedt een volledige verificatiestroom in slechts enkele regels code en is een uitstekende manier om met de bibliotheek aan de slag te gaan.
In App.js, importeer de withAuthenticator HOC bovenaan het bestand:
import withAuthenticator from 'aws-amplify-react'
En, onderaan, werk het exporteren verklaring om de App component met withAuthenticator.
export standaard metAuthenticator (App)
Lees voor meer informatie over de beschikbare Amplify React-componenten voor authenticatie in de officiële documentatie.
We kunnen de app nu uitvoeren en zien een inlogscherm:
Klik Maak een account aan om u aan te melden en vervolgens in te loggen bij de app. Nadat we zijn ingelogd, wordt de sessie opgeslagen, zodat we de pagina kunnen vernieuwen en we aangemeld blijven.
We kunnen ook een uitlogknop weergeven door een tweede argument aan het HOC toe te voegen:
standaard exporteren metAuthenticator (app, includeGreetings: true)
Merk op dat we ook de Auth klasse direct om gebruikers te tekenen:
// 1. importeer de klasse-import Auth uit 'aws-amplify' // Onderteken de gebruiker uit wacht op Auth.signOut ()
Merk op dat bij het bellen Auth.signOut direct moeten we het onderdeel nog steeds op een of andere manier doorverwijzen om de gebruiker terug te brengen naar de inlogpagina. Je kunt een voorbeeld hiervan zien in een issue thread op de GitHub-repo van het project.
Auth KlasseWe kunnen ook de Auth klasse om gebruikers handmatig te beheren. Auth heeft meer dan 30 beschikbare methoden, waaronder inschrijven, aanmelden, confirmSignUp, confirmSignIn, Wachtwoord vergeten, en resendSignUp.
Laten we eens kijken hoe u de aanmelding bij de gebruiker kunt implementeren met behulp van de inschrijven klassemethode:
// 1. Maak een initiële status om gebruikersinputs te behouden state = username: ", password:", email: ", phone_number:", authCode: " // 2. onChange handler voor gebruikersinvoerwijzigingen onChange = e => this.setState ([e.target.name]: e.target.value) // 3. Functie om te bellen Auth.signUp signUp = async () => const username, password, email, phone_number = this.state wachten op Auth.signUp (gebruikersnaam, wachtwoord, kenmerken: telefoonnummer, email) console.log ('succesvol aangemeld') // 4. Functie om te bellen Auth.signUp confirmSignUp = async () => const gebruikersnaam, authCode = this.state wacht op Auth.confirmSignUp (gebruikersnaam, authCode) console.log ('succesvol bevestigd aangemeld') // 5. Maak in de weergavemethode ingangen met kenmerken naar de status update // 6. Maak knoppen om de methoden SignUp en confirmSignUp te bellen Dit is een blauwdruk voor hoe u een gebruiker met de Auth-klasse handmatig kunt aanmelden.
Handmatige implementatie duurt langer om te schrijven, maar geeft u volledige controle over niet alleen de gebruikersinterface, maar ook de feitelijke functionaliteit die u wilt implementeren.
U kunt meer informatie over verificatie met AWS Amplify vinden in de projectdocumentatie.
Amazon S3 is een populaire service voor het opslaan van media zoals afbeeldingen en video's, maar ook voor back-endservices zoals applicatiehosting, back-ups en softwarelevering.
Met de AWS Amplify CLI kunnen we S3-buckets maken, configureren, bijwerken en verwijderen. In dit gedeelte bekijken we hoe u een S3-bucket kunt maken en hoe u afbeeldingen en bestanden naar de bucket kunt uploaden en downloaden.
Om Opslag in te schakelen, kunnen we de volgende opdracht uitvoeren:
versterken voeg opslag toe
Vervolgens wordt u gevraagd om enkele configuratiegegevens in te voeren. Selecteer de Inhoud (afbeeldingen, audio, video, etc.) service. Geef vervolgens een projectspecifieke resourcenaam op (intern gebruikt in het project) en bucketnaam (de S3-locatie waar uw gegevens worden opgeslagen). Ten slotte moet de toegang worden beperkt tot Alleen gebruikers autoriseren, en geverifieerde gebruikers moeten worden toegestaan lezen schrijven toegang.
Nu is opslag toegevoegd aan onze configuratie en we draaien versterken push om de nieuwe bronnen in ons account aan te maken:
versterken push
Hiermee wordt een Amazon S3-bucket gemaakt en geconfigureerd die we kunnen gebruiken voor het opslaan van items.
Als we dit wilden uitproberen, konden we wat tekst opslaan in een bestand als dit:
import Storage from 'aws-amplify' // create function to work with Storage addToStorage = () => Storage.put ('javascript / MyReactComponent.js', 'import Reageren vanaf' reageren 'const App = () = > ( Hallo Wereld
) export standaard App ') .then (result => console.log (' result: ', result)) .catch (err => console.log (' error: ', err)); // klik-handler toevoegen Hiermee wordt een map gemaakt met de naam javascript in onze S3-bucket en sla een bestand op met de naam MyReactComponent.js daar met de code die we hebben opgegeven in het tweede argument van Storage.put.
Als we alles uit deze map willen lezen, kunnen we gebruiken Storage.list:
readFromStorage = () => Storage.list ('javascript /') .then (data => console.log ('data from S3:', data)) .catch (err => console.log ('error') ) Als we alleen het enkele bestand willen lezen, kunnen we gebruiken Storage.get:
readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('data from S3:', data)) .catch (err => console.log (' fout')) Als we alles naar beneden wilden halen, zouden we het kunnen gebruiken Storage.list:
readFromStorage = () => Storage.list (") .then (data => console.log ('data from S3:', data)) .catch (err => console.log ('error'))Het werken met afbeeldingen is ook eenvoudig. Hier is een voorbeeld:
class S3ImageUpload breidt React.Component uit onChange (e) const file = e.target.files [0]; Storage.put ('example.png', bestand, contentType: 'image / png') .then (result => console.log (result)) .catch (err => console.log (err)); render () retourneren ( this.onChange (e) />)In de bovenstaande code koppelen we een bestandsuploadformulier ingevoerd in de onChange gebeurtenishandler. Wanneer de gebruiker een bestand levert, Storage.put wordt aangeroepen om het bestand met MIME-type naar S3 te uploaden image / png.
Als u uw app op AWS wilt implementeren en hosten, kunnen we de app gebruiken hosting categorie.
versterken toevoegen hosting
Nogmaals, u wordt gevraagd om enkele configuratieopties op te geven:
Nu is alles ingesteld en kunnen we de app publiceren:
vergroot publicatie
Als u op enig moment een service uit uw project en uw account wilt verwijderen, kunt u dit doen door de versterken verwijderen commando en dan duwen.
versterken verwijder auth versterken push
Als u niet zeker weet welke services u op welk moment hebt ingeschakeld, kunt u de versterk de status commando:
versterk de status
versterk de status geeft u de lijst met bronnen die momenteel zijn ingeschakeld in uw app.
AWS Amplify stelt ontwikkelaars in staat om volledig-stapel, cloud-enabled apps gemakkelijker dan ooit te bouwen, waardoor ontwikkelaars snel kunnen itereren, rechtstreeks vanuit hun front-end omgeving.
Dit is deel één van een tweedelige serie. In de volgende zelfstudie leren we hoe we GraphQL en Serverless API's kunnen maken en ermee kunnen werken. Blijf dus op de hoogte.
