Share
AWS Amplify ist eine Clientbibliothek, eine CLI-Toolchain und eine UI-Komponentenbibliothek, mit der Entwickler schnell leistungsfähige Dienste in der Cloud erstellen und eine Verbindung herstellen können. In diesem Beitrag wird erläutert, wie vollständig serverlose Web-Apps mit React und AWS Amplify mit Funktionen wie Authentifizierung, verwalteter GraphQL-Datenschicht, Speicher, Lambda-Funktionen und Webhosting erstellt werden.
Amplify ermöglicht Funktionen wie Managed GraphQL (AWS AppSync), Speicher (Amazon S3), Benutzerauthentifizierung (Amazon Cognito), Serverless-Funktionen (AWS Lambda), Hosting (Amazon CloudFront und Amazon S3), Analysen (Amazon Pinpoint) und mehr.
Das Ziel der Bibliothek und der CLI ist es, Entwicklern die Entwicklung von voll gestapelten Web- und Mobilanwendungen zu ermöglichen, ohne sich um die Verwaltung ihrer eigenen Back-End-Infrastruktur kümmern zu müssen. So können sie sich mit den ihnen bereits bekannten Fähigkeiten weiterentwickeln.
In dieser Serie zeige ich Ihnen, wie Sie ein neues AWS Amplify-Projekt erstellen, Cloud-Funktionen mithilfe der CLI aktivieren, die React-Anwendung verbinden und mit den Cloud-Services interagieren. In diesem Beitrag zeige ich Ihnen, wie Sie Authentifizierung, Speicher und Hosting implementieren. Im nächsten Lernprogramm erfahren Sie, wie Sie GraphQL- und Serverless-APIs erstellen und mit ihnen interagieren.
Während dieses Lernprogramm React verwendet, funktioniert Amplify mit jedem JavaScript-Projekt und enthält rahmenspezifische Komponenten für Angular, Vue, React Native und Ionic. Die CLI unterstützt auch native iOS und Android.
Zunächst müssen Sie eine neue React-Anwendung mit der CLI create -react-app erstellen und in das neue Verzeichnis wechseln:
npx create -reade-app amplify-web-app cd amplify-web-app
Als Nächstes installieren wir die AWS Amplify-Clientabhängigkeiten:
Garn hinzufügen aws-amplify aws-verstärken-reagieren # oder npm installieren aws-verstärken aws-verstärken-reagieren
Als Nächstes müssen wir die AWS Amplify-CLI installieren.
npm install -g @ aws-amplify / cli
Nach der Installation der AWS Amplify-CLI müssen wir sie so konfigurieren, dass Ressourcen in unserem AWS-Konto erstellt werden können. Wir machen das, indem wir das ausführen verstärken konfigurieren Befehl und Einrichten eines neuen AWS-Benutzers.
verstärken konfigurieren
Eine kurze Video-Anleitung dieser Konfiguration finden Sie auf YouTube.
Nun, da die AWS Amplify-CLI installiert und konfiguriert ist, führen Sie das aus verstärken Befehl von Ihrer Befehlszeile aus, um die verfügbaren Optionen anzuzeigen und sicherzustellen, dass die CLI ordnungsgemäß installiert wurde.
verstärken
Um ein neues AWS Amplify-Projekt zu initialisieren, führen Sie das aus init verstärken Befehl:
init verstärken
Wenn Sie dazu aufgefordert werden, wählen Sie Ihren bevorzugten Texteditor und behalten Sie die Standardeinstellungen für alle anderen Optionen bei.
Dies hat jetzt ein neues AWS Amplify-Projekt vor Ort initialisiert, und wir werden jetzt ein sehen verstärken Verzeichnis und .Amplifyrc Datei, die im Stammverzeichnis des React-Projekts erstellt wurde. Diese Dateien enthalten Konfigurationsinformationen zu unserem Amplify-Projekt, und wir müssen sie vorerst nicht anfassen.
Die erste Funktion, die wir aktivieren, ist die Benutzerauthentifizierung. Wir können Funktionen jederzeit durch Ausführen aktivieren verstärken add . Die Kategorie für die Authentifizierung lautet Auth, also laufe:
addiere auth
Wenn gefragt Möchten Sie die Standard-Authentifizierungs- und Sicherheitskonfiguration verwenden??, wählen Ja.
Sobald dies erstellt ist, müssen wir laufen Push verstärken So erstellen Sie den neuen Dienst in unserem Konto:
Push verstärken
Wenn gefragt Sind Sie sicher, dass Sie fortfahren möchten?, wählen Ja.
Nachdem der Dienst erstellt wurde, können Sie den Dienst jederzeit im Dashboard anzeigen https://console.aws.amazon.com/cognito/users/ und klicken Sie auf den Namen Ihres Dienstes.
Wir können auch alle aktivierten Dienste jederzeit durch Ausführen anzeigen Status verstärken:
Status verstärken
Sie werden auch eine neue Datei sehen, die erstellt wurde-aws-exports.js-im Stammordner der React-App. Sie müssen diese Datei nicht bearbeiten, da sie von der CLI für Sie behandelt wird. Wir werden sie jedoch im nächsten Schritt verwenden, um das lokale Projekt zu konfigurieren.
Nachdem wir nun den Authentifizierungsdienst erstellt haben, können wir ihn in unserer React-App verwenden!
Als Erstes müssen Sie die React-Anwendung so konfigurieren, dass sie über unser Amplify-Projekt informiert ist. Die Art und Weise, wie wir das tun, ist das Anrufen Amplify.configure in der Wurzel des Projekts - für uns wird das sein src / index.js.
importiere Amplify von 'aws-amplify' importiere config von './aws-exports' Amplify.configure (config)
Jetzt ist unser Projekt einsatzbereit und wir können die Authentifizierung implementieren.
Accentsconagua
withAuthenticator Komponente höherer OrdnungWir werden uns einige Möglichkeiten ansehen, wie man die Benutzerauthentifizierung implementieren kann, aber um loszulegen, verwenden wir die withAuthenticator Komponente höherer Ordnung aus der aws-amplify-reagieren Bibliothek. Diese Komponente zeigt den gesamten Authentifizierungsfluss in nur wenigen Codezeilen und ist eine großartige Möglichkeit, die Bibliothek in Betrieb zu nehmen.
Im App.js, importiere das withAuthenticator HOC am Anfang der Datei:
importieren withAuthenticator aus 'aws-amplify-reagieren'
Und unten aktualisieren Sie die Export Anweisung, die zu verpacken App Komponente mit withAuthenticator.
Standard mit withAuthenticator (App) exportieren
Weitere Informationen finden Sie in der offiziellen Dokumentation zu den verfügbaren Amplify React-Komponenten für die Authentifizierung.
Jetzt können wir die App ausführen und sollten einen Anmeldebildschirm sehen:
Klicken Benutzerkonto anlegen um sich anzumelden und dann bei der App anzumelden. Sobald wir angemeldet sind, wird die Sitzung gespeichert, sodass wir die Seite aktualisieren können und wir bleiben angemeldet.
Wir können auch eine Abmeldeschaltfläche rendern, indem Sie dem HOC ein zweites Argument hinzufügen:
Standardwert withAuthenticator exportieren (App, includeGreetings: true)
Beachten Sie, dass wir auch die verwenden können Auth Klasse direkt zum Abmelden von Benutzern:
// 1. importiere die Klasse import Auth von 'aws-amplify' // Melde den Benutzer ab und erwarte Auth.signOut ()
Beachten Sie dies beim Anrufen Auth.signOut Direkt müssen wir die Komponente dennoch irgendwie neu rendern, um den Benutzer wieder auf die Anmeldeseite zu bringen. Ein Beispiel dafür finden Sie in einem Issue-Thread im GitHub-Repo des Projekts.
Auth KlasseWir können auch die verwenden Auth Klasse, um Benutzer manuell zu verwalten. Auth hat über 30 verfügbare Methoden einschließlich Anmelden, Einloggen, confirmSignUp, confirmSignIn, Passwort vergessen, und resendSignUp.
Sehen wir uns an, wie Sie die Benutzeranmeldung mit Hilfe von implementieren können Anmelden Klassenmethode:
// 1. Erzeuge den Anfangsstatus für Benutzereingaben state = Benutzername: ", Kennwort:", E-Mail: ", Telefonnummer:", AuthCode: " // 2. onChange-Handler für Benutzereingabenänderungen onChange = e => this.setState ([e.target.name]: e.target.value) // 3. Funktion zum Aufruf von Auth.signUp signUp = async () => const Benutzername, Passwort, E-Mail, Telefonnummer = Dieser.Status wartet auf Auth.signUp (Benutzername, Kennwort, Attribute: Telefonnummer, E-Mail) console.log ('wurde erfolgreich angemeldet') // 4. Funktion zum Aufruf von Auth.signUp confirmSignUp = async () => const username, authCode = this.state wartet auf Auth.confirmSignUp (Benutzername, AuthCode) console.log ('erfolgreich bestätigt angemeldet') // 5. Erstellen Sie in der Rendermethode Eingaben mit Attributen, deren Status aktualisiert werden soll // 6. Erstellen Sie Schaltflächen, um die Methoden signUp und confirmSignUp aufzurufen Dies ist ein Entwurf, wie Sie einen Benutzer mit der Auth-Klasse manuell anmelden können.
Die manuelle Implementierung dauert länger, aber Sie haben nicht nur die Benutzeroberfläche, sondern auch die Funktionalität, die Sie implementieren möchten, vollständig im Griff.
Weitere Informationen zur Authentifizierung mit AWS Amplify finden Sie in der Projektdokumentation.
Amazon S3 ist ein beliebter Dienst zum Speichern von Medien wie Bildern und Videos sowie für Back-End-Dienste wie Anwendungshosting, Backups und Software Delivery.
Die AWS Amplify-CLI ermöglicht das Erstellen, Konfigurieren, Aktualisieren und Löschen von S3-Buckets. In diesem Abschnitt wird beschrieben, wie Sie einen S3-Bucket erstellen und wie Sie Bilder und Dateien in den Bucket hochladen und herunterladen.
Um Speicher zu aktivieren, können wir den folgenden Befehl ausführen:
vergrößern Sie den Speicherplatz
Als Nächstes werden Sie aufgefordert, einige Konfigurationsdetails anzugeben. Wähle aus Inhalt (Bilder, Audio, Video usw.) Bedienung. Geben Sie als Nächstes einen projektspezifischen Ressourcennamen (intern im Projekt verwendet) und einen Bucket-Namen (den S3-Speicherort, an dem Ihre Daten gespeichert werden) an. Schließlich sollte der Zugriff auf beschränkt sein Nur Benutzer autorisieren, und authentifizierte Benutzer sollten gewährt werden lesen Schreiben Zugriff.
Jetzt wurde unserer Konfiguration Speicher hinzugefügt, und wir arbeiten Push verstärken So erstellen Sie die neuen Ressourcen in unserem Konto:
Push verstärken
Dadurch wird ein Amazon S3-Bucket erstellt und konfiguriert, den wir zum Speichern von Elementen verwenden können.
Wenn wir das testen wollen, könnten wir Text in einer Datei wie folgt speichern:
Storage aus 'aws-amplify' importieren // Funktion erstellen, um mit Storage zu arbeiten addToStorage = () => Storage.put ('javascript / MyReactComponent.js'), 'React from' reagieren 'const App = () = > ( Hallo Welt
) Standard-App exportieren ') .then (Ergebnis => console.log (' Ergebnis: ', Ergebnis)) .catch (err => console.log (' error: ', err)); // Klick-Handler hinzufügen Dadurch wird ein Ordner mit dem Namen erstellt Javascript in unserem S3-Bucket und speichern Sie eine Datei namens MyReactComponent.js dort mit dem Code, den wir im zweiten Argument von angegeben haben Speicherplatz.
Wenn wir alles aus diesem Ordner lesen möchten, können wir verwenden Speicherliste:
readFromStorage = () => Storage.list ('javascript /') .then (data => console.log ('data from S3:', data)) .catch (err => console.log ('error') ) Wenn wir nur die einzelne Datei lesen wollen, können wir verwenden Storage.get:
readFromStorage = () => Storage.get ('javascript / MyReactComponent.js') .then (data => console.log ('data from S3:', data)) .catch (err => console.log (' Error')) Wenn wir alles runterziehen wollten, könnten wir verwenden Speicherliste:
readFromStorage = () => Storage.list (") .then (data => console.log ('data from S3:', data)) .catch (err => console.log ('error'))Das Arbeiten mit Bildern ist ebenfalls einfach. Hier ist ein Beispiel:
Klasse S3ImageUpload erweitert React.Component onChange (e) const file = e.target.files [0]; Storage.put ('example.png', Datei, contentType: 'image / png') .then (Ergebnis => console.log (Ergebnis)) .catch (err => console.log (err)); render () return ( this.onChange (e) />)Im obigen Code verknüpfen wir ein Datei-Upload-Formular mit dem bei Änderung Eventhandler. Wenn der Benutzer eine Datei bereitstellt, Speicherplatz wird aufgerufen, um die Datei mit MIME-Typ in S3 hochzuladen image / png.
Um Ihre App auf AWS bereitzustellen und zu hosten, können Sie die Hosting Kategorie.
Add Hosting verstärken
Sie werden erneut aufgefordert, einige Konfigurationsoptionen anzugeben:
Jetzt ist alles eingerichtet und wir können die App veröffentlichen:
Veröffentlichen erweitern
Wenn Sie zu irgendeinem Zeitpunkt einen Dienst aus Ihrem Projekt und Ihrem Konto löschen möchten, können Sie dies durch Ausführen von verstärken entfernen Befehl und dann drücken.
amplify entfernen auth amplify push
Wenn Sie sich nicht sicher sind, welche Dienste Sie zu einem beliebigen Zeitpunkt aktiviert haben, können Sie das ausführen Status verstärken Befehl:
Status verstärken
Status verstärken erhalten Sie eine Liste der Ressourcen, die aktuell in Ihrer App aktiviert sind.
Mit AWS Amplify können Entwickler Cloud-fähige Full-Stack-Apps einfacher als je zuvor erstellen, sodass Entwickler direkt in ihrer Front-End-Umgebung schnell durchlaufen können.
Dies ist der erste Teil einer zweiteiligen Serie. Im nächsten Lernprogramm erfahren Sie, wie Sie GraphQL- und Serverless-APIs erstellen und mit ihnen interagieren. Also bleibt gespannt.
