= Hosten Sie Ihre React-Anwendung mit AWS in 30 Minuten =
Dieses Tutorial ist sehr bildlastig und richtet sich an komplette Anfänger. Es erklärt, wie Sie Ihre React-Anwendung auf einer Website mit einem vollständigen Autorisierungssystem hosten können. Es ruft die Leistung von AWS MobileHub über die Mobilehub CLI (Command Line Interface) auf. Das Tutorial erfordert keine Kenntnisse mit AWS-Services und zeigt Ihnen auch, wie Sie eine React-Boilerplate-Anwendung einrichten.
Wenn Sie bereits eine React-Anwendung haben,
**Sie können zu Abschnitt 2 springen, wo wir awsmobile-cli installieren und zu unserer Anwendung hinzufügen
= Bevor wir anfangen, müssen wir ein paar Dinge auf Ihrem Computer einrichten =
**Node 8.x-Umgebung auf Ihrem Computer installiert**
- Dies ist die Laufzeitumgebung für Javascript-Anwendungsserver. Es folgt mit dem Node Package Manager (NPM).
- NPM wird verwendet, um Node-Pakete wie React, AWS Amplify, ein AWS-JS-Connector-Paket zu installieren, und das war es im Grunde.
- httpsnodejs.org/en/download/
**Ein kostenloses Kontingent für AWS
- Sie erhalten kostenlosen Zugriff auf AWS-Services über das kostenlose Kontingent. Für dieses Tutorial sollte das mehr als genug sein. Beachten Sie jedoch, dass jeder Dienst jeden Monat ein Nutzungslimit hat und dies Sie echtes Geld kosten kann.
- httpsaws.amazon.com/free/
**Installieren Sie die AWS CLI (Befehlszeilenschnittstelle), um AWS-Services direkt von Ihrer Konsole aus aufzurufen** **Für diesen Kurs verwenden wir die gepflegte Boilerplate von Facebook, den Entwicklern von React **Ein Editor Ihrer Wahl
- Ich schlage vor, mit Visual Studio Code zu beginnen, einem stark modifizierbaren, leichten Editor, der die meisten Programmiersprachen und Frameworks ausführen kann.
Profi-Tipp: Stellen Sie beim Installationsprozess von VS Code sicher, dass das Kontrollkästchen aktiviert ist, das es zu Ihren Umgebungspfadnamen hinzufügt. Auf diese Weise können Sie vom Terminal aus auf VS Code zugreifen, indem Sie „Code Dateiname.js“ oder „Ä“ eingeben ÂCode .âÃÂà für das gesamte Projekt, in dem Sie sich befinden. **Ein Terminal, in dem Sie sich befinden Sie fühlen sich wohl darin
- Die meisten Entwickler sollten Git auf ihrem Computer installiert haben. Dadurch erhalten Sie Zugriff auf Git Bash, das für viele Entwickler das Einstiegsterminal ist.
Lass uns anfangen!
**1. Erstellen Sie die React-Anwendung und rufen Sie den Projektordner über das Terminal auf**
Geben Sie das Terminal ein und suchen Sie Ihren Ordner, in dem Sie Anwendungen speichern. Ich schlage einen Ordner mit dem Namen âÃÂÃÂdevâÃÂàvor.
npx create-react-app Projektname&& cd Projektname
oder
npm -g install create-react-app create-react-app Projektname
Hier erstellen wir eine React-Anwendung basierend auf der Boilerplate. âÃÂÃÂnpxâÃÂàist ein Node-Tool, das den npm-Server zum Aufrufen entfernter Pakete verwendet. Das zweite Code-Snippet installiert create-react-app lokal mit
*npm -g install create-react-app* **und erstellt dann die Anwendung. Ich schlage vor, npx zu verwenden, um mit create-react-app immer auf dem neuesten Stand zu sein, und erstellt dann die Anwendung. Ich schlage vor, npx zu verwenden, um mit create-react-app immer auf dem neuesten Stand zu sein. **2. Installieren Sie awsmobile CLI auf Ihrem Computer und führen Sie es im Projekt aus**
Ab diesem Punkt sollten Sie auf Ihre React-Anwendung in Ihrem Code-Editor achten. Es werden Ordner wie /awsmobile und einige Ergänzungen zur Datei „package.json“ hinzugefügt.
Geben Sie in einem Terminalfenster ein
npm install -g awsmobile-cli
um awsmobile-cli global zu installieren. Wir werden dies verwenden, nachdem wir einige Arbeiten in der AWS Mobile Hub-Konsole ausgeführt haben.
Stellen Sie sicher, dass Sie sich in Ihrem Projekt befinden und tippen Sie
awsmobile init
Sie werden mit einer Reihe von Fragen aufgefordert, bei denen die Standardwerte gut sind. Drücken Sie also die Eingabetaste für jede Einstellung, bis AWS automatisch in Ihrem Standardbrowser geöffnet wird. Melden Sie sich mit Ihrem Free-Tier-Konto an, falls Sie dies noch nicht getan haben.
Dadurch wird awsmobile-cli sichergestellt, dass wir mit dem richtigen AWS-Konto verbunden sind. Gehen Sie zurück zu Ihrem Terminal und drücken Sie die Eingabetaste, um fortzufahren.
AWS muss einen Benutzer einrichten, um die Anwendung zu steuern. Dies wird automatisch von awsmobile-cli durchgeführt, wenn Sie weiterhin die Eingabetaste drücken.
Nachdem Sie dies abgeschlossen haben, werden Sie zu AWS IAM weitergeleitet, wo Sie einfach auf „Weiter“ klicken ¢ÃÂà Ihr Weg zur Vollständigkeit! Im zweiten Schritt sollte es automatisch "Administratorzugriff"aktiviert haben, wodurch der Benutzer Zugriff auf alle Funktionen von AWS erhält, die wir benötigen.
Wenn Sie fertig sind, ist es sehr wichtig, dass Sie die .csv-Datei mit Ihren geheimen Zugangsdaten herunterladen, da diese nur einmal in AWS angezeigt werden. Diese Schlüssel sind in den nächsten Schritten Ihres Terminalfensters zu verwenden.
Dadurch wird Ihre AWS MobileHub-Anwendung erfolgreich erstellt und aws-amplify automatisch installiert& aws-amplify-react in Ihr lokales React-Projekt
Wenn dieser Vorgang abgeschlossen ist (ca. 1 Minute), können Sie tippen
awsmobile-Konsole
um Ihre Mobile Hub-Anwendung in Ihrem Standardbrowser anzuzeigen. Sie können auch „awsmobile“ eingeben, um eine Liste mit verschiedenen Aktionen anzuzeigen. Von hier aus fügen wir Cognito Login mit dem Browser hinzu, aber Sie könnten dies über die awsmobile CLI tun.
**3. Cognito-Anmeldung und -Hosting tatsächlich hinzufügen**
Als letzten Schritt fügen wir unserem Projekt AWS Cognito über die AWS MobileHub-Konsole hinzu. Sie können auch Hosting ausprobieren, das bereits standardmäßig aktiviert ist.
Klicken Sie zum Testen des Hostings auf die Funktion in Ihrer Konsole und dann auf die URL, die Sie erhalten haben. Der Inhalt hier ist eine Vorlage von AWS, aber Sie werden ihn bald mit der React-Anwendung überschreiben.
**Um die Cognito-Benutzeranmeldung hinzuzufügen, scrollen Sie nach unten, um „Benutzeranmeldung“ zu finden, und klicken Sie darauf. **Dies aktiviert Cognito-Benutzerpools mit einem Authentifizierungssystem. Verwenden Sie „E-Mail“ von E-Mail-Adresse oder Telefonnummer, um E-Mail als Benutzernamen in Ihrem Login zu erzwingen. Oder Sie können den Benutzernamen verwenden und „E-Mail“ + „Benutzername“ aktivieren ÂÃÂ, um dem Benutzer die Wahl zu lassen. Den Bestätigungscode erhalten Sie so oder so per E-Mail.
Wir akzeptieren E-Mail, da AWS für das Versenden von Registrierungsbestätigungscodes per E-Mail keine Gebühren erhebt, während das Versenden von SMS echtes Geld kostet.
Was dazu führt:
Wenn Sie in Cognito auf Aktion >Bearbeiten klicken, wird die Cognito-Konsole zum Verwalten Ihrer Benutzer und erweiterten Sicherheitsfunktionen angezeigt. Einige Einstellungen, die Sie in diesem Schritt vorgenommen haben, können nicht rückgängig gemacht werden, aber Sie können Ihren Benutzerpool jederzeit löschen und einen neuen erstellen.
Damit ist die Konfiguration von AWS Cognito in MobileHub abgeschlossen. Es ist an der Zeit, Code hinzuzufügen. Wie viel? 5 Zeilen! Und 3 davon sind nur Importe in React.
= Hinzufügen Ihrer Einstellungen zum React-Projekt und Veröffentlichen auf Ihrer Website =
In Ihrem Terminal können Sie jederzeit awsmobile pull oder awsmobile push verwenden, um Ihre Änderungen von der AWS MobileHub-Konsole online in Ihre Anwendung zu ziehen, oder Ihre lokalen Änderungen, die über die awsmobile-CLI im Terminal vorgenommen wurden, übertragen.
Für diesen Anwendungsfall möchten wir die von uns vorgenommenen Änderungen abrufen. Gehen Sie zurück zu Ihrem Terminal und geben Sie ein
Zurück in VS Code sehen Sie, dass Ihr Projekt jetzt geändert wurde. Sie können Ihre lokalen Konfigurationen in ./awsmobile/backend/mobile-hub-project.yml überprüfen
Außerdem finden Sie in ./package.json die zwei hervorgehobenen Bibliotheken, die von awsmobile init hinzugefügt wurden, was wir zuvor getan haben.
Wir verwenden diese jetzt, um unsere Anwendung in ein Cognito-Anmeldefenster einzuschließen. Öffnen Sie ./src/index.js und ändern Sie dies:
dazu:
Reagieren von 'Reagieren'importieren;
importiere ReactDOM aus 'react-dom';
index.css importieren';
App aus App importieren';
importiere registerServiceWorker aus registerServiceWorker';
awsMobile aus aws-exports importieren';
Amplify aus „aws-amplify“ importieren;
import { withAuthenticator } from „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
