So nutzen Sie React und AWS, um stabile und zuverlässige Cloud-Anwendungen zu erstellen

So nutzen Sie React und AWS, um stabile und zuverlässige Cloud-Anwendungen zu erstellen

Die rasante Entwicklung der Cloud-Computing-Technologie bietet Entwicklern mehr Möglichkeiten, stabile und zuverlässige Cloud-Anwendungen zu erstellen. Als beliebtes Front-End-Framework kann React uns in Kombination mit Cloud-Dienstanbietern wie AWS (Amazon Web Services) dabei helfen, leistungsstarke, elastische und sichere Cloud-Anwendungen einfacher zu erstellen. In diesem Artikel untersuchen wir, wie man mit React und AWS stabile und zuverlässige Cloud-Anwendungen erstellt, und stellen spezifische Codebeispiele bereit.

1. AWS-Konto und Umgebung einrichten

Bevor Sie beginnen, müssen Sie über ein AWS-Konto verfügen, einen neuen IAM-Benutzer in der AWS-Konsole einrichten und entsprechende Berechtigungen zuweisen. In der IAM-Konsole können Sie einen neuen Benutzer erstellen und ihm die entsprechenden Berechtigungen zuweisen, z. B. AWS-Verwaltungszugriff, EC2-Berechtigungen usw.

Installieren Sie die AWS CLI und konfigurieren Sie die AWS CLI mit dem Zugriffsschlüssel Ihres IAM-Benutzers. Führen Sie in Ihrem Terminal den folgenden Befehl aus:

aws configureaws configure

接下来，您需要安装Node.js和NPM（Node Package Manager）。

二、创建React应用

在终端中，运行以下命令来创建一个新的React应用：

npx create-react-app my-app
cd my-app

运行成功后，您将在当前目录下看到一个名为my-app

Als nächstes müssen Sie Node.js und NPM (Node Package Manager) installieren.

2. Erstellen Sie eine React-Anwendung

Führen Sie im Terminal den folgenden Befehl aus, um eine neue React-Anwendung zu erstellen:

npm install -g @aws-amplify/cli

Nach erfolgreichem Vorgang sehen Sie eine Datei mit dem Namen my-app im aktuellen Verzeichnis code>-Ordner, der die anfängliche Struktur der React-Anwendung enthält. <p></p>3. Konfigurieren Sie das Projekt mit AWS Amplify<p></p>AWS Amplify ist ein Full-Stack-Framework zum Erstellen und Bereitstellen moderner JavaScript-Anwendungen. Führen Sie im Terminal den folgenden Befehl aus, um die AWS Amplify CLI zu installieren: <p><pre class='brush:bash;toolbar:false;'>amplify configure</pre></p> Sobald die Installation abgeschlossen ist, führen Sie den folgenden Befehl aus, um AWS Amplify zu konfigurieren: <p><pre class='brush:bash;toolbar:false;'>amplify init</pre></p> Folgen Sie den Anweisungen und geben Sie Ihren AWS-Zugriffsschlüssel und Ihre Standardzone ein. Nach erfolgreicher Konfiguration können Sie AWS Amplify zum Einrichten und Bereitstellen Ihrer Cloud-Anwendungen verwenden. <p></p>Führen Sie im Terminal den folgenden Befehl aus, um AWS Amplify zu initialisieren: <p><pre class='brush:bash;toolbar:false;'>amplify add auth</pre></p>Geben Sie nach Aufforderung den Projektnamen, den Umgebungsnamen und den Standardeditor ein. Wählen Sie dann den AWS-Cloud-Service zum Speichern und Bereitstellen Ihrer Anwendung aus. In diesem Beispiel wählen wir AWS Cloud Storage (S3) und Cloud Hosting (Hosting). <p></p>4. Verwenden Sie AWS Cognito, um die Authentifizierung zu implementieren. <p></p>AWS Cognito ist ein Dienst zur Authentifizierung, Autorisierung und Benutzerverwaltung. Mit AWS Cognito können wir Funktionen wie Benutzerregistrierung, Anmeldung und Passwortzurücksetzung implementieren. <p></p>Führen Sie im Terminal den folgenden Befehl aus, um die Authentifizierungsfunktion hinzuzufügen: <p><pre class='brush:bash;toolbar:false;'>amplify add codegen</pre></p>Folgen Sie den Anweisungen, um die Standardkonfiguration auszuwählen. AWS Amplify unterstützt Sie automatisch beim Erstellen eines Cognito-Benutzerpools und Identitätsanbieters. <p></p>Führen Sie als Nächstes den folgenden Befehl aus, um eine Codevorlage mit Benutzerauthentifizierungsfunktionen für Ihre React-App zu generieren: <p><pre class='brush:bash;toolbar:false;'>npm install npm start</pre></p>Führen Sie im Terminal den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren und Ihre React-App zu starten: <p><pre class='brush:bash;toolbar:false;'>amplify add api</pre></p>Jetzt Ihr React Die Anwendung verfügt über Funktionen wie Benutzerregistrierung, Anmeldung und Abmeldung. <p></p>5. Verwenden Sie AWS AppSync, um Datensynchronisierung zu erreichen. <p></p>AWS AppSync ist eine Technologie zum Aufbau flexibler Echtzeit-Anwendungsdatensynchronisierungsdienste. Wir können AWS AppSync verwenden, um Funktionen wie Datenabfrage, -änderung und -abonnement zu implementieren. <p></p>Führen Sie im Terminal den folgenden Befehl aus, um AppSync-Funktionalität hinzuzufügen: <p><pre class='brush:bash;toolbar:false;'>amplify codegen</pre></p> Folgen Sie den Anweisungen, um den GraphQL-Modus auszuwählen, und wählen Sie dann AWS AppSync verwenden aus, um Echtzeit-Datenaktualisierungen in der Datenbank zu aktivieren. <p></p>Führen Sie dann die folgenden Befehle aus, um Codevorlagen für Abfrage-, Änderungs- und Abonnementvorgänge für Ihre App zu generieren: <p><pre class='brush:bash;toolbar:false;'>amplify push</pre></p>Führen Sie die folgenden Befehle aus, um Ihre App und Ihren AppSync-Dienst bereitzustellen: <p><pre class='brush:bash;toolbar:false;'>amplify publish</pre></p>Jetzt verfügt Ihre React-App über The Möglichkeit, Daten mit dem AppSync-Dienst zu synchronisieren. <p></p> 6. In der AWS Cloud bereitstellen <p></p>Führen Sie im Terminal den folgenden Befehl aus, um Ihre Anwendung in der AWS Cloud bereitzustellen: <p>rrreee</p>AWS Amplify erstellt einen S3-Bucket für Ihre Anwendung und fügt Ihre Anwendung zur Cloud hinzu . <p></p>In der Konsole finden Sie die URL Ihrer Anwendung, über die auf Ihre Cloud-Anwendung zugegriffen werden kann. <ul> <li>Zusammenfassung</li> <li>In diesem Artikel wird erläutert, wie Sie mit React und AWS stabile und zuverlässige Cloud-Anwendungen erstellen. Durch die Verwendung von AWS Amplify können Sie Ihre Anwendung einfach konfigurieren und bereitstellen sowie Benutzerauthentifizierungs- und Datensynchronisierungsfunktionen mithilfe von AWS Cognito und AWS AppSync implementieren. Ich hoffe, dieser Artikel hilft Ihnen beim Erstellen von Cloud-Anwendungen und wünsche Ihnen viel Erfolg bei Ihrem Entwicklungsprozess! </li> </ul>Referenzlink: 🎜🎜🎜Offizielle Dokumentation zu AWS Amplify: https://aws.amazon.com/amplify/🎜🎜Offizielle Dokumentation zu AWS Amplify CLI: https://docs.amplify.aws/cli/start/install🎜🎜

Das obige ist der detaillierte Inhalt vonSo nutzen Sie React und AWS, um stabile und zuverlässige Cloud-Anwendungen zu erstellen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!