Erste Schritte mit AWS

Erstellen einer React-Anwendung

Erstellen Sie eine einfache Web-Anwendung mit AWS Amplify

Einleitung: Erstellen einer React-Anwendung

Folgen Sie der schrittweisen Anleitung, um Ihre erste React-Webanwendung zu erstellen.

Übersicht

In diesem Tutorial erstellen Sie eine einfache Web-Anwendung mit AWS Amplify, einer Reihe von Tools und Services, einschließlich eines Web-Hosting-Services. Im ersten Modul erstellen und hosten Sie eine Anwendung von React auf AWS. Mit den restlichen 4 Modulen initialisieren Sie eine lokale Anwendung unter Verwendung der CLI, fügen eine Authentifizierung hinzu, fügen eine GraphQL-API und eine Datenbank hinzu und aktualisieren Ihre Anwendung, um Bilder zu speichern.

Lerninhalte

In diesem Tutorial erläutern wir Ihnen die Schritte zum Erstellen der o. g. Beispielwebanwendung. Sie lernen Folgendes:

  • Hosten: Erstellung und Hosting einer React-Anwendung auf dem AWS Global Content Delivery Network (CDN)
  • Authentifizierung: Fügen Sie Authentisierung zu Ihrer Anwendung hinzu, um An- und Abmeldung zu ermöglichen
  • Datenbank und Speicherung: Hinzufügen einer GraphQL-API, einer Datenbank und einer Speicherlösung

 Erfahrung mit AWS

Einsteiger

 Veranschlagte Zeit

50 Minuten

 Veranschlagte Kosten

 Tutorial – Voraussetzungen

[*] Innerhalb der letzten 24 Stunden erstellte Konten haben möglicherweise noch keinen Zugriff auf alle für dieses Tutorial erforderlichen Services.
[**] Nicht anwendbar für iOS-Benutzer, da Git standardmäßig geliefert wird

Module

Dieses Tutorial teilt sich in 5 kurze Module auf. Sie müssen jedes Modul abschließen, damit Sie mit dem nächsten fortfahren können.

  1. Bereitstellung und Hosting einer React-App (10 Minuten): Erstellen Sie eine React-Anwendung und stellen Sie sie über AWS Amplify bereit und hosten Sie sie.
  2. Eine lokale Anwendung initialisieren (5 Minuten): Initialisieren einer lokalen Anwendung mit AWS Amplify.
  3. Authentifizierung hinzufügen (10 Minuten): Authentisierung zu Ihrer Anwendung hinzufügen.
  4. Fügen Sie eine GraphQL-API und eine Datenbank hinzu (15 Minuten): Erstellen Sie eine GraphQL-API.
  5. Hinzufügen der Fähigkeit, Bilder zu speichern (10 Minuten): Fügen Sie Ihrer App Speicherplatz hinzu.

Sie werden diese React-Anwendung mit Hilfe der Eingabeaufforderung/des Terminals, des Test-Editors und der AWS-Web-Konsole erstellen.

Bereitstellung der React-App