Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.
# Erstellen Sie ein Backend für eine Gen 1-App
In diesem Tutorial richten Sie einen CI/CD Fullstack-Workflow mit Amplify ein. Sie werden eine Frontend-App für Amplify Hosting bereitstellen. Anschließend erstellen Sie mit Amplify Studio ein Backend. Schließlich verbinden Sie das Cloud-Backend mit der Frontend-App.
## Voraussetzungen
Bevor Sie mit diesem Tutorial beginnen, müssen Sie die folgenden Voraussetzungen erfüllen.
**Melden Sie sich an für eine AWS-Konto**
Wenn Sie noch kein AWS Kunde sind, müssen Sie [einen erstellen](https://portal.aws.amazon.com/billing/signup#/start/email), AWS-Konto indem Sie den Online-Anweisungen folgen. Durch die Registrierung können Sie auf Amplify und andere AWS Dienste zugreifen, die Sie mit Ihrer Anwendung verwenden können.
**Erstellen Sie ein Git-Repository**
Amplify unterstützt GitHub, Bitbucket GitLab, und. AWS CodeCommit Schieben Sie Ihre Anwendung in Ihr Git-Repository.
**Installieren Sie die Amplify Command Line Interface (CLI)**
Anweisungen finden [Sie unter Installieren der Amplify CLI](https://docs.amplify.aws/gen1/react/start/project-setup/prerequisites/#install-the-amplify-cli) in der *Amplify Framework-Dokumentation*.
## Schritt 1: Stellen Sie ein Frontend bereit
Wenn Sie eine bestehende Frontend-App in einem Git-Repository haben, die Sie für dieses Beispiel verwenden möchten, können Sie mit den Anweisungen zur Bereitstellung einer Frontend-App fortfahren.
Wenn Sie eine neue Frontend-App für dieses Beispiel erstellen müssen, können Sie den Anweisungen [Create React App in der Dokumentation *Create React* App](https://create-react-app.dev/docs/getting-started) folgen.
**Um eine Frontend-App bereitzustellen**
1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die [Amplify-Konsole](https://console.aws.amazon.com/amplify/).
1. Wählen Sie auf der Seite **Alle Apps** die Option **Neue App** und dann **Web-App hosten** in der oberen rechten Ecke aus.
1. Wähle deinen GitHub, Bitbucket- oder AWS CodeCommit Repository-Anbieter aus und wähle dann **Weiter**. GitLab
1. Amplify autorisiert den Zugriff auf Ihr Git-Repository. Für GitHub Repositorien verwendet Amplify jetzt die GitHub Apps-Funktion, um den Amplify-Zugriff zu autorisieren.
Weitere Informationen zur Installation und Autorisierung der App finden Sie unter. GitHub [Amplify-Zugriff auf Repositorys einrichten GitHub](setting-up-GitHub-access.md)
1. Gehen Sie auf der Seite **Repository-Zweig hinzufügen** wie folgt vor:
1. Wählen Sie in der Liste „**Kürzlich aktualisierte Repositorys**“ den Namen des Repositorys aus, mit dem Sie eine Verbindung herstellen möchten.
1. Wählen Sie in der **Branch-Liste** den Namen des Repository-Branches aus, zu dem Sie eine Verbindung herstellen möchten.
1. Wählen Sie **Weiter** aus.
1. Wählen Sie auf der Seite **Build-Einstellungen konfigurieren** die Option **Weiter** aus.
1. Wählen Sie auf der Seite „**Überprüfen**“ die Option **Speichern und bereitstellen** aus. Wenn die Bereitstellung abgeschlossen ist, können Sie Ihre App in der `amplifyapp.com` Standarddomäne anzeigen.
**Anmerkung**
Um die Sicherheit Ihrer Amplify-Anwendungen zu erhöhen, ist die Domain *amplifyapp.com* in der [Public Suffix](https://publicsuffix.org/) List (PSL) registriert. Aus Sicherheitsgründen empfehlen wir Ihnen, Cookies mit einem `__Host-` Präfix zu verwenden, falls Sie jemals sensible Cookies im Standard-Domainnamen für Ihre Amplify-Anwendungen einrichten müssen. Diese Vorgehensweise trägt dazu bei, Ihre Domain vor CSRF-Versuchen (Cross-Site Request Forgery Attempts, Anforderungsfälschung zwischen Websites) zu schützen. Weitere Informationen finden Sie auf der [Set-Cookie](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#cookie_prefixes)-Seite im Mozilla Developer Network.
## Schritt 2: Erstellen Sie ein Backend
Nachdem Sie eine Frontend-App für Amplify Hosting bereitgestellt haben, können Sie ein Backend erstellen. Verwenden Sie die folgenden Anweisungen, um ein Backend mit einer einfachen Datenbank und einem GraphQL-API-Endpunkt zu erstellen.
**Um ein Backend zu erstellen**
1. Melden Sie sich bei der an AWS-Managementkonsole und öffnen Sie die [Amplify-Konsole](https://console.aws.amazon.com/amplify/).
1. Wählen Sie auf der Seite **Alle Apps** die App aus, die Sie in *Schritt 1* erstellt haben.
1. Wählen Sie auf der Startseite der App den Tab **Backend-Umgebungen** und dann **Erste Schritte** aus. Dadurch wird der Einrichtungsprozess für eine **Standard-Staging-Umgebung** eingeleitet.
1. Wählen Sie nach Abschluss der Einrichtung **Launch Studio**, um auf die **Staging-Backend-Umgebung** in Amplify Studio zuzugreifen.
Amplify Studio ist eine visuelle Oberfläche, mit der Sie Ihr Backend erstellen und verwalten und die Entwicklung Ihrer Frontend-Benutzeroberfläche beschleunigen können. Weitere Informationen zu Amplify Studio finden Sie in der [Amplify Studio-Dokumentation](https://docs.amplify.aws/gen1/react/tools/console/).
Verwenden Sie die folgenden Anweisungen, um eine einfache Datenbank mit der Visual Backend Builder-Oberfläche von Amplify Studio zu erstellen.
**Erstellen Sie ein Datenmodell**
1. Wählen Sie auf der Startseite der **Staging-Umgebung** Ihrer App die Option **Datenmodell erstellen** aus. Dadurch wird der Datenmodell-Designer geöffnet.
1. Wählen Sie auf der Seite **Datenmodellierung** die Option **Modell hinzufügen** aus.
1. Geben Sie für den Titel ein**Todo**.
1. Wählen **Sie Feld hinzufügen aus**.
1. Geben Sie als **Feldname** ein**Description**.
Der folgende Screenshot ist ein Beispiel dafür, wie Ihr Datenmodell im Designer aussehen wird.
1. Wählen Sie **Speichern und Bereitstellen**.
1. Kehren Sie zur Amplify Hosting-Konsole zurück und die Bereitstellung der **Staging-Umgebung** wird fortgesetzt.
Während der Bereitstellung erstellt Amplify Studio alle erforderlichen AWS Ressourcen im Backend, einschließlich einer AWS AppSync GraphQL-API für den Datenzugriff und einer Amazon DynamoDB-Tabelle zum Hosten der Todo-Elemente. Amplify verwendet CloudFormation , um Ihr Backend bereitzustellen, sodass Sie Ihre Backend-Definition als speichern können. infrastructure-as-code
## Schritt 3: Backend mit Frontend Connect
Nachdem Sie nun ein Frontend bereitgestellt und ein Cloud-Backend erstellt haben, das ein Datenmodell enthält, müssen Sie sie verbinden. Verwenden Sie die folgenden Anweisungen, um Ihre Backend-Definition mit der Amplify CLI in Ihr lokales App-Projekt zu übertragen.
**Um ein Cloud-Backend mit einem lokalen Frontend zu verbinden**
1. Öffnen Sie ein Terminalfenster und navigieren Sie zum Stammverzeichnis Ihres lokalen Projekts.
1. Führen Sie den folgenden Befehl im Terminalfenster aus und ersetzen Sie den roten Text durch die eindeutige App-ID und den Namen der Backend-Umgebung für Ihr Projekt.
```
amplify pull --appId {{abcd1234}} --envName {{staging}}
```
1. Folgen Sie den Anweisungen im Terminalfenster, um die Einrichtung des Projekts abzuschließen.
Jetzt können Sie den Build-Prozess so konfigurieren, dass das Backend zum Workflow für die kontinuierliche Bereitstellung hinzugefügt wird. Verwenden Sie die folgenden Anweisungen, um einen Frontend-Zweig mit einem Backend in der Amplify Hosting-Konsole zu verbinden.
**Um einen Frontend-App-Branch und ein Cloud-Backend zu verbinden**
1. Wählen Sie auf der Startseite der App den Tab **Hosting-Umgebungen** aus.
1. Suchen Sie den **Hauptzweig** und wählen Sie **Bearbeiten**.
1. Wählen **Sie im Fenster Ziel-Backend bearbeiten unter **Umgebung** den Namen des Backends** aus, zu dem eine Verbindung hergestellt werden soll. *Wählen Sie in diesem Beispiel das **Staging-Backend** aus, das Sie in Schritt 2 erstellt haben.*
Standardmäßig ist Full-Stack CI/CD aktiviert. Deaktivieren Sie diese Option, um Full-Stack CI/CD für dieses Backend zu deaktivieren. *Wenn Sie Full-Stack deaktivieren, wird CI/CD die App nur im Pull-Only-Modus ausgeführt.* Zur Build-Zeit generiert Amplify automatisch nur die `aws-exports.js` Datei, ohne Ihre Backend-Umgebung zu ändern.
1. Als Nächstes müssen Sie eine Servicerolle einrichten, um Amplify die erforderlichen Berechtigungen zu erteilen, um Änderungen an Ihrem App-Backend vorzunehmen. Sie können entweder eine bestehende Servicerolle verwenden oder eine neue erstellen. Detaillierte Anweisungen finden Sie unter [Hinzufügen einer Servicerolle mit Berechtigungen zur Bereitstellung von Backend-Ressourcen](amplify-service-role.md).
1. Nachdem Sie eine Servicerolle hinzugefügt haben, kehren **Sie zum Fenster Ziel-Backend bearbeiten** zurück und wählen Sie **Speichern**.
1. Um die Verbindung des **Staging-Backends** mit dem **Hauptzweig** der Frontend-App abzuschließen, führen Sie einen neuen Build Ihres Projekts durch.
Führen Sie eine der folgenden Aktionen aus:
+ Pushen Sie aus Ihrem Git-Repository Code, um einen Build in der Amplify-Konsole zu initiieren.
+ Navigieren Sie in der Amplify-Konsole zur Seite mit den Build-Details der App und wählen Sie **Diese Version erneut bereitstellen**.
## Nächste Schritte
### Richten Sie Feature-Branch-Bereitstellungen ein
Folgen Sie unserem empfohlenen Arbeitsablauf, um [Feature-Branch-Bereitstellungen mit mehreren Backend-Umgebungen einzurichten](https://docs.aws.amazon.com/amplify/latest/userguide/multi-environments.html#team-workflows-with-amplify-cli-backend-environments).
### Erstellen Sie eine Frontend-Benutzeroberfläche in Amplify Studio
Verwenden Sie Studio, um Ihre Frontend-Benutzeroberfläche mit einer Reihe von ready-to-use UI-Komponenten zu erstellen, und verbinden Sie sie dann mit Ihrem App-Backend. Weitere Informationen und Tutorials finden Sie im Benutzerhandbuch für [Amplify Studio in der Amplify](https://docs.amplify.aws/gen1/react/tools/console/) *Framework-Dokumentation*.