Amazon CodeCatalyst ist nicht mehr offen für Neukunden. Bestandskunden können den Service weiterhin wie gewohnt nutzen. Weitere Informationen finden Sie unter [Wie migriert man von CodeCatalyst](migration.md).
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.
# Tutorial: Erstellen eines Projekts mit dem Blueprint für moderne dreistufige Webanwendungen
Sie können schneller mit der Softwareentwicklung beginnen, indem Sie ein Projekt mit einem Blueprint erstellen. Ein mit einem Blueprint erstelltes Projekt umfasst die Ressourcen, die Sie benötigen, einschließlich eines Quell-Repositorys zur Verwaltung Ihres Codes und eines Workflows zum Erstellen und Bereitstellen der Anwendung. In diesem Tutorial zeigen wir Ihnen, wie Sie mithilfe des Blueprints für **moderne dreistufige Webanwendungen** ein Projekt in Amazon erstellen. CodeCatalyst Das Tutorial beinhaltet auch das Anzeigen des bereitgestellten Beispiels, das Einladen anderer Benutzer, daran zu arbeiten, und das Vornehmen von Änderungen am Code mit Pull-Requests, die automatisch erstellt und für Ressourcen im verbundenen Netzwerk bereitgestellt werden, AWS-Konto wenn der Pull-Request zusammengeführt wird. Wo Ihr Projekt mit Berichten, Aktivitätsfeeds und anderen Tools CodeCatalyst erstellt wird, erstellt Ihr Blueprint AWS Ressourcen in den mit Ihrem Projekt AWS-Konto verknüpften Bereichen. Ihre Blueprint-Dateien ermöglichen es Ihnen, eine moderne Beispielanwendung zu erstellen und zu testen und sie in der Infrastruktur in der bereitzustellen. AWS Cloud
Die folgende Abbildung zeigt, wie Tools in verwendet CodeCatalyst werden, um ein Problem für die Nachverfolgung zu erstellen, die Änderung zusammenzuführen und automatisch zu erstellen und dann einen Workflow im CodeCatalyst Projekt zu starten, der Aktionen ausführt, um Ihre Infrastruktur CloudFormation zu ermöglichen AWS CDK und bereitzustellen.
Die Aktionen generieren Ressourcen in den zugehörigen Dateien AWS-Konto und stellen Ihre Anwendung für eine serverlose AWS Lambda Funktion mit einem API-Gateway-Endpunkt bereit. Die AWS Cloud Development Kit (AWS CDK) Aktion konvertiert einen oder mehrere AWS CDK Stapel in CloudFormation Vorlagen und stellt Stapel in Ihren bereit. AWS-Konto Zu den Ressourcen in Ihren Stacks gehören CloudFront Amazon-Ressourcen zur Verteilung dynamischer Webinhalte, eine Amazon DynamoDB-Instance für Ihre Anwendungsdaten sowie die Rollen und Richtlinien, die die bereitgestellte Anwendung unterstützen.
![\[Eine Codeänderung, von der Entstehung eines Problems bis hin zur Änderung im Quell-Repository, das dann automatisch erstellt und für Ressourcen bereitgestellt wird AWS\]](http://docs.aws.amazon.com/de_de/codecatalyst/latest/userguide/images/modern-app-overview.png)
Wenn Sie ein Projekt mit dem Blueprint für **moderne dreistufige Webanwendungen** erstellen, wird Ihr Projekt mit den folgenden Ressourcen erstellt:
**Im Projekt**: CodeCatalyst
+ Ein [Quell-Repository](source.md) mit Beispielcode und Workflow-YAML
+ Ein [Workflow](workflow.md), der den Beispielcode erstellt und bereitstellt, wenn eine Änderung am Standardzweig vorgenommen wird
+ Ein Issue-Board und ein Backlog, das Sie zur Planung und Nachverfolgung der Arbeit verwenden können
+ Eine Testberichts-Suite mit automatisierten Berichten, die im Beispielcode enthalten sind
**Im zugehörigen AWS-Konto**:
+ Drei AWS CloudFormation Stapel, die die für die Anwendung benötigten Ressourcen erstellen.
Ausführlichere Informationen zu den Ressourcen, die in AWS und CodeCatalyst als Teil dieses Tutorials erstellt werden, finden Sie unter[Referenz](#getting-started-template-project-reference).
**Anmerkung**
Welche Ressourcen und Beispiele in einem Projekt enthalten sind, hängt davon ab, welchen Blueprint Sie auswählen. Amazon CodeCatalyst bietet mehrere Projekt-Blueprints an, die Ressourcen in Bezug auf ihre definierte Sprache oder ihr Framework definieren. Weitere Informationen zu Blueprints finden Sie unter. [Erstellung eines umfassenden Projekts mit CodeCatalyst BlueprintsErstellung eines umfassenden Projekts mit Blueprints](project-blueprints.md)
**Topics**
+ [Voraussetzungen](#getting-started-template-project-prerequisites)
+ [Schritt 1: Erstellen Sie das moderne dreistufige Webanwendungsprojekt](#getting-started-template-project-proj-create)
+ [Schritt 2: Laden Sie jemanden zu Ihrem Projekt ein](#getting-started-template-project-ipa-user)
+ [Schritt 3: Erstelle Aufgaben, an denen du gemeinsam arbeiten kannst, und verfolge die Arbeit](#getting-started-template-project-issue)
+ [Schritt 4: Sehen Sie sich Ihr Quell-Repository an](#getting-started-template-project-source)
+ [Schritt 5: Erstellen Sie eine Entwicklungsumgebung mit einem Testzweig und nehmen Sie eine schnelle Codeänderung vor](#getting-started-template-project-create-devenvironment)
+ [Schritt 6: Sehen Sie sich den Workflow an, der die moderne Anwendung erstellt](#getting-started-template-project-view-workflow)
+ [Schritt 7: Bitten Sie andere, Ihre Änderungen zu überprüfen](#getting-started-template-project-pull-request)
+ [Schritt 8: Schließen Sie das Problem](#getting-started-template-project-close-issue)
+ [Bereinigen von Ressourcen](#getting-started-template-project-clean-up)
+ [Referenz](#getting-started-template-project-reference)
## Voraussetzungen
Um in diesem Tutorial ein modernes Anwendungsprojekt zu erstellen, müssen Sie die folgenden Aufgaben erledigt haben: [Richten Sie ein und melden Sie sich an CodeCatalystRichten Sie ein und melden Sie sich an bei CodeCatalyst](setting-up-topnode.md)
+ Sie müssen über eine AWS Builder-ID für die Anmeldung verfügen CodeCatalyst.
+ Gehören Sie einem Bereich an und lassen Sie sich in diesem **Bereich die Rolle Space-Administrator** oder **Poweruser** zuweisen. Weitere Informationen finden Sie unter [Erstellen einer Umgebung](spaces-create.md), [Benutzern Speicherberechtigungen gewähren](spaces-members.md) und [Umgebungsadministrator-Rolle](ipa-role-types.md#ipa-role-space-admin).
+ Ordnen Sie Ihrem AWS-Konto Bereich eine zu und lassen Sie sich die IAM-Rolle zuweisen, die Sie bei der Registrierung erstellt haben. Bei der Registrierung haben Sie beispielsweise die Möglichkeit, eine Servicerolle mit einer Rollenrichtlinie zu erstellen, die **CodeCatalystWorkflowDevelopmentRole-*spaceName***als Rollenrichtlinie bezeichnet wird. Der Rolle wird ein Name `CodeCatalystWorkflowDevelopmentRole-spaceName` mit einer angehängten eindeutigen Kennung zugewiesen. Weitere Informationen zur Rolle und zur Rollenrichtlinie finden Sie unter[Grundlegendes zur **CodeCatalystWorkflowDevelopmentRole-*spaceName***Servicerolle](ipa-iam-roles.md#ipa-iam-roles-service-role). Die Schritte zum Erstellen der Rolle finden Sie unter[Die **CodeCatalystWorkflowDevelopmentRole-*spaceName***Rolle für Ihr Konto und Ihren Bereich erstellen](ipa-iam-roles.md#ipa-iam-roles-service-create).
## Schritt 1: Erstellen Sie das moderne dreistufige Webanwendungsprojekt
Nachdem Sie es erstellt haben, werden Sie in Ihrem Projekt Code entwickeln und testen, Entwicklungsaufgaben koordinieren und Projektmetriken einsehen. Ihr Projekt enthält auch Ihre Entwicklungstools und Ressourcen.
In diesem Tutorial verwenden Sie den Blueprint für **moderne dreistufige Webanwendungen, um eine interaktive Anwendung** zu erstellen. Der Workflow, der im Rahmen Ihres Projekts automatisch erstellt und ausgeführt wird, dient der Erstellung und Bereitstellung der Anwendung. Der Workflow wird erst erfolgreich ausgeführt, nachdem alle Rollen und Kontoinformationen für Ihren Bereich konfiguriert wurden. Nachdem der Workflow erfolgreich ausgeführt wurde, können Sie die Endpunkt-URL aufrufen, um die Anwendung zu sehen.
**Um ein Projekt mit einem Blueprint zu erstellen**
1. Öffnen Sie die CodeCatalyst Konsole unter [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Navigieren Sie in der CodeCatalyst Konsole zu dem Bereich, in dem Sie ein Projekt erstellen möchten.
1. Wählen Sie **Create project** (Projekt erstellen) aus.
1. Wählen Sie **Mit einem Blueprint beginnen** aus.
1. Geben Sie im Suchfeld **modern** ein.
1. **Wählen Sie den Blueprint „**Moderne dreistufige Webanwendung**“ und dann „Weiter“ aus.**
1. Geben Sie im Feld **Name Ihres Projekts** einen Projektnamen ein. Beispiel:
**MyExampleProject**.
**Anmerkung**
Der Name muss in Ihrem Bereich eindeutig sein.
1. Wählen Sie unter **Konto** den aus, den AWS-Konto Sie bei der Registrierung hinzugefügt haben. Der Blueprint installiert Ressourcen in diesem Konto.
1. Wählen Sie unter **Deployment Role** die Rolle aus, die Sie bei der Registrierung hinzugefügt haben. Wählen Sie zum Beispiel aus `CodeCatalystWorkflowDevelopmentRole-spaceName`.
Wenn keine Rollen aufgeführt sind, fügen Sie eine hinzu. Um eine Rolle hinzuzufügen, wählen Sie **IAM-Rolle hinzufügen** und fügen Sie die Rolle zu Ihrer AWS-Konto hinzu. Weitere Informationen finden Sie unter [Ermöglichen des Zugriffs auf AWS Ressourcen mit verbundenen AWS-Konten](ipa-connect-account.md).
1. Wählen **Sie unter Compute Platform** die Option **Lambda** aus.
1. Wählen Sie unter **Frontend Hosting Option** **Amplify** Hosting aus. Weitere Informationen dazu finden Sie AWS Amplify unter [Was ist AWS Amplify Hosting?](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html) im *AWS Amplify Benutzerhandbuch*.
1. Geben Sie **unter Bereitstellungsregion** den Regionalcode der Region ein, AWS-Region in der der Blueprint die Mysfits-Anwendung und die unterstützenden Ressourcen bereitstellen soll. Eine Liste der Regionscodes finden Sie unter [Regionale Endpunkte](https://docs.aws.amazon.com/general/latest/gr/rande.html#regional-endpoints) in der. *Allgemeine AWS-Referenz*
1. Behalten Sie im **Feld Anwendungsname** den Standardwert von bei. `mysfitsstring`
1. (Optional) Wählen Sie unter **Projektvorschau generieren** die Option **Code anzeigen** aus, um eine Vorschau der Quelldateien anzuzeigen, die mit dem Blueprint installiert werden. Wählen Sie **Workflow anzeigen** aus, um eine Vorschau der CI/CD Workflow-Definitionsdateien anzuzeigen, die der Blueprint installieren wird. Die Vorschau wird basierend auf Ihrer Auswahl dynamisch aktualisiert.
1. Wählen Sie **Create project** (Projekt erstellen) aus.
Der Projekt-Workflow beginnt, sobald Sie das Projekt erstellen. Es wird einige Zeit dauern, bis der Code fertig erstellt und bereitgestellt ist. Laden Sie in der Zwischenzeit eine andere Person zu Ihrem Projekt ein.
## Schritt 2: Laden Sie jemanden zu Ihrem Projekt ein
Nachdem Sie Ihr Projekt eingerichtet haben, laden Sie andere ein, mit Ihnen zu arbeiten.
**Um jemanden zu Ihrem Projekt einzuladen**
1. Navigieren Sie zu dem Projekt, zu dem Sie Benutzer einladen möchten.
1. Wählen Sie im Navigationsbereich **Projekteinstellungen** aus.
1. Wählen Sie auf der Registerkarte **Mitglieder** die Option **Einladen** aus.
1. Geben Sie die E-Mail-Adressen der Personen ein, die Sie als Benutzer für Ihr Projekt einladen möchten. Sie können mehrere E-Mail-Adressen eingeben, die durch ein Leerzeichen oder ein Komma getrennt sind. Sie können auch Mitglieder Ihres Bereichs auswählen, die nicht Mitglieder des Projekts sind.
1. Wählen Sie die Rolle für den Benutzer aus.
Wenn Sie mit dem Hinzufügen von Benutzern fertig sind, wählen Sie **Einladen**.
## Schritt 3: Erstelle Aufgaben, an denen du gemeinsam arbeiten kannst, und verfolge die Arbeit
CodeCatalyst hilft Ihnen dabei, Funktionen, Aufgaben, Fehler und alle anderen Arbeiten im Zusammenhang mit Problemen im Zusammenhang mit Ihrem Projekt nachzuverfolgen. Sie können Probleme erstellen, um die benötigte Arbeit und Ideen nachzuverfolgen. Wenn du ein Problem erstellst, wird es standardmäßig zu deinem Backlog hinzugefügt. Du kannst Probleme in ein Board verschieben, in dem du die laufenden Arbeiten nachverfolgen kannst. Du kannst ein Problem auch einem bestimmten Projektmitglied zuweisen.
**Um ein Problem für ein Projekt zu erstellen**
1. Wählen Sie im Navigationsbereich **Probleme** aus.
1. Wählen Sie **Problem erstellen** aus.
1. Geben Sie im **Titel der Ausgabe** einen Namen für das Problem ein. Geben Sie optional eine Beschreibung des Problems an. Verwenden Sie in diesem Beispiel **make a change in the `src/mysfit_data.json` file.**
1. Wählen Sie die Priorität, die Schätzung, den Status und die Bezeichnungen aus. Wählen Sie unter **Beauftragter** die Option **\$1Add me** aus, um das Problem Ihnen selbst zuzuweisen.
1. **Wählen Sie „Problem erstellen“.** Das Problem ist jetzt auf der Pinnwand sichtbar. Wähle die Karte aus, um das Problem **in die Spalte In Bearbeitung** zu verschieben.
Weitere Informationen finden Sie unter [Verfolge und organisiere die Arbeit mit Problemen in CodeCatalystVerfolge und organisiere die Arbeit mit Problemen](issues.md).
## Schritt 4: Sehen Sie sich Ihr Quell-Repository an
Ihr Blueprint installiert ein Quell-Repository, das Dateien zur Definition und Unterstützung Ihrer Anwendung oder Ihres Dienstes enthält. Einige bemerkenswerte Verzeichnisse und Dateien im Quell-Repository sind:
+ **.cloud9-Verzeichnis** — Enthält unterstützende Dateien für die AWS Cloud9 Entwicklungsumgebung.
+ **.codecatalyst-Verzeichnis** — Enthält die `YAML` Workflow-Definitionsdatei für jeden im Blueprint enthaltenen Workflow.
+ **.idea-Verzeichnis** — Enthält unterstützende Dateien für die Entwicklungsumgebungen. JetBrains
+ **.vscode-Verzeichnis** — Enthält unterstützende Dateien für die Visual Studio Code-Entwicklungsumgebung.
+ Verzeichnis **cdkStacks** — Enthält die AWS CDK Stack-Dateien, die die Infrastruktur in der definieren. AWS Cloud
+ Verzeichnis **src** — Enthält den Quellcode der Anwendung.
+ **Testverzeichnis** — Enthält Dateien für die Integ- und Unit-Tests, die als Teil des automatisierten CI/CD Workflows ausgeführt werden, der beim Erstellen und Testen Ihrer Anwendung ausgeführt wird.
+ **Webverzeichnis** — Enthält den Frontend-Quellcode. Andere Dateien enthalten Projektdateien wie die `package.json` Datei, die wichtige Metadaten zu Ihrem Projekt enthält, die `index.html` Seite für die Website, die `.eslintrc.cjs` Datei für den Lint-Code und die `tsconfig.json` Datei zur Angabe von Stammdateien und Compileroptionen.
+ `Dockerfile`Datei — Beschreibt den Container der Anwendung.
+ `README.md`Datei — Enthält Konfigurationsinformationen für das Projekt.
**Um zu den Quell-Repositorys für ein Projekt zu navigieren**
1. Navigieren Sie zu Ihrem Projekt und führen Sie einen der folgenden Schritte aus:
+ Wählen Sie auf der Übersichtsseite für Ihr Projekt das gewünschte Repository aus der Liste aus und klicken Sie dann **auf Repository anzeigen**.
+ Wählen Sie im Navigationsbereich **Code** und dann **Quell-Repositorys** aus. Wählen Sie unter **Quell-Repositorys** den Namen des Repositorys aus der Liste aus. Sie können die Liste der Repositorys filtern, indem Sie einen Teil des Repository-Namens in die Filterleiste eingeben.
1. Sehen Sie sich auf der Startseite des Repositorys den Inhalt des Repositorys und Informationen zu den zugehörigen Ressourcen an, z. B. die Anzahl der Pull-Requests und Workflows. Standardmäßig werden die Inhalte für den Standard-Branch angezeigt. Sie können die Ansicht ändern, indem Sie einen anderen Zweig aus der Dropdownliste auswählen.
## Schritt 5: Erstellen Sie eine Entwicklungsumgebung mit einem Testzweig und nehmen Sie eine schnelle Codeänderung vor
Sie können schnell am Code in Ihrem Quell-Repository arbeiten, indem Sie eine Entwicklungsumgebung erstellen. Für dieses Tutorial gehen wir davon aus, dass Sie:
+ Erstellen Sie eine AWS Cloud9 Entwicklungsumgebung.
+ Wählen Sie beim Erstellen der Entwicklungsumgebung die Option, in einem neuen Zweig des **Hauptzweigs** zu arbeiten.
+ Verwenden Sie den Namen `test` für diesen neuen Zweig.
In einem späteren Schritt werden Sie die Entwicklungsumgebung verwenden, um eine Codeänderung vorzunehmen und eine Pull-Anfrage zu erstellen.
**Um eine Entwicklungsumgebung mit einem neuen Branch zu erstellen**
1. Öffnen Sie die CodeCatalyst Konsole unter [https://codecatalyst.aws/](https://codecatalyst.aws/).
1. Navigieren Sie zu dem Projekt, in dem Sie eine Entwicklungsumgebung erstellen möchten.
1. Wählen Sie den Namen des Repositorys aus der Liste der Quell-Repositorys für das Projekt aus. Sie können auch im Navigationsbereich **Code**, dann **Quell-Repositories** und dann das Repository auswählen, für das Sie eine Entwicklungsumgebung erstellen möchten.
1. Wählen Sie auf der Repository-Startseite die Option **Create Dev Environment** aus.
1. Wählen Sie eine unterstützte IDE aus dem Drop-down-Menü aus. Weitere Informationen finden Sie unter [Unterstützte integrierte Entwicklungsumgebungen für Entwicklungsumgebungen](devenvironment-create.md#devenvironment-supported-ide).
1. Wählen Sie das zu klonende Repository aus, wählen Sie **In neuem Zweig arbeiten** aus, geben Sie einen Branch-Namen in das Feld **Branch-Name** ein und wählen Sie im Drop-down-Menü Branch erstellen einen Branch aus, aus dem der neue **Branch erstellt** werden soll.
1. Fügen Sie optional einen Alias für die Entwicklungsumgebung hinzu.
1. Wählen Sie optional die Schaltfläche „**Konfiguration der Entwicklungsumgebung** bearbeiten“, um die Rechen-, Speicher- oder Timeout-Konfiguration der Entwicklungsumgebung zu bearbeiten.
1. Wählen Sie **Erstellen** aus. Während Ihre Entwicklungsumgebung erstellt wird, zeigt die Statusspalte der Entwicklungsumgebung den Wert Wird **gestartet** und in der Statusspalte wird nach Erstellung der Entwicklungsumgebung **ausgeführt** angezeigt. Es öffnet sich ein neuer Tab mit Ihrer Entwicklungsumgebung in der IDE Ihrer Wahl. Sie können Code bearbeiten und Ihre Änderungen übernehmen und pushen.
In diesem Abschnitt arbeiten Sie mit Ihrer generierten Beispielanwendung, CodeCatalyst indem Sie Änderungen am Code mit Pull-Requests vornehmen, die AWS-Konto beim Zusammenführen des Pull-Requests automatisch erstellt und für Ressourcen im verbundenen Netzwerk bereitgestellt werden.
**Um eine Änderung an Ihrer `src/mysfit_data.json` Datei vorzunehmen**
1. Navigieren Sie zu Ihrem Projekt Dev Environment. Erweitern Sie AWS Cloud9 darin das seitliche Navigationsmenü, um die Dateien zu durchsuchen. Erweitern Sie `mysfits``src`, und öffnen Sie`src/mysfit_data.json`.
1. Ändern Sie in der Datei den Wert für das `"Age":` Feld von 6 auf 12. Ihre Zeile sollte wie folgt aussehen:
```
{
"Age": 12,
"Description": "Twilight's personality sparkles like the night sky and is looking for a forever home with a Greek hero or God. While on the smaller side at 14 hands, he is quite adept at accepting riders and can fly to 15,000 feet. Twilight needs a large area to run around in and will need to be registered with the FAA if you plan to fly him above 500 feet. His favorite activities include playing with chimeras, going on epic adventures into battle, and playing with a large inflatable ball around the paddock. If you bring him home, he'll quickly become your favorite little Pegasus.",
"GoodEvil": "Good",
"LawChaos": "Lawful",
"Name": "Twilight Glitter",
"ProfileImageUri": "https://www.mythicalmysfits.com/images/pegasus_hover.png",
"Species": "Pegasus",
"ThumbImageUri": "https://www.mythicalmysfits.com/images/pegasus_thumb.png"
},
```
1. Speichern Sie die Datei.
1. Wechseln Sie mit dem **cd /projects/mysfits** Befehl zum Mysfits-Repository.
1. Füge deine Änderungen mit den Befehlen **git add, git **commit** und git push hinzu**, bestätige sie und **übertrage** sie.
```
git add .
git commit -m "make an example change"
git push
```
## Schritt 6: Sehen Sie sich den Workflow an, der die moderne Anwendung erstellt
CodeCatalyst Generiert nach der Erstellung des modernen Anwendungsprojekts in Ihrem Namen mehrere Ressourcen, einschließlich eines Workflows. Ein *Workflow* ist ein automatisiertes Verfahren, das in einer .yaml-Datei definiert ist und beschreibt, wie Sie Ihren Code erstellen, testen und bereitstellen.
In diesem Tutorial haben Sie einen Workflow CodeCatalyst erstellt und ihn automatisch gestartet, als Sie Ihr Projekt erstellt haben. (Der Workflow läuft möglicherweise noch, je nachdem, wie lange es her ist, dass Sie Ihr Projekt erstellt haben.) Verwenden Sie die folgenden Verfahren, um den Fortschritt des Workflows zu überprüfen, die generierten Protokolle und Testberichte zu überprüfen und schließlich zur URL der bereitgestellten Anwendung zu navigieren.
**Um den Fortschritt des Workflows zu überprüfen**
1. **Wählen Sie in der CodeCatalyst Konsole im Navigationsbereich **CI/CD** und dann Workflows aus.**
Eine Liste von Workflows wird angezeigt. Dies sind die Workflows, die der CodeCatalyst Blueprint generiert und gestartet hat, als Sie Ihr Projekt erstellt haben.
1. Beachten Sie die Liste der Workflows. Sie sollten vier sehen:
+ Die beiden Workflows oben entsprechen dem `test` Zweig, den Sie zuvor erstellt haben[Schritt 5: Erstellen Sie eine Entwicklungsumgebung mit einem Testzweig und nehmen Sie eine schnelle Codeänderung vor](#getting-started-template-project-create-devenvironment). Bei diesen Workflows handelt es sich um Klone der Workflows in der `main` Filiale. Der **ApplicationDeploymentPipeline**ist nicht aktiv, da er für die Verwendung mit der `main` Filiale konfiguriert ist. Der **OnPullRequest**Workflow wurde nicht ausgeführt, da keine Pull-Anfrage gestellt wurde.
+ Die beiden Workflows unten entsprechen dem `main` Branch, der erstellt wurde, als Sie den Blueprint zuvor ausgeführt haben. Der **ApplicationDeploymentPipeline**Workflow ist aktiv und die Ausführung läuft (oder ist abgeschlossen).
**Anmerkung**
Wenn die **ApplicationDeploymentPipeline**Ausführung mit einem **Build @cdk\$1bootstrap** oder einem **DeployBackend**Fehler fehlschlägt, liegt das möglicherweise daran, dass Sie zuvor die moderne dreistufige Webanwendung ausgeführt haben und dabei alte Ressourcen zurückgelassen haben, die zu einem Konflikt mit dem aktuellen Blueprint führen. Sie müssen diese alten Ressourcen löschen und dann den Workflow erneut ausführen. Weitere Informationen finden Sie unter [Bereinigen von Ressourcen](#getting-started-template-project-clean-up).
1. Wählen Sie unten den **ApplicationDeploymentPipeline**Workflow aus, der dem `main` Zweig zugeordnet ist. Dieser Workflow wurde unter Verwendung des Quellcodes für den `main` Zweig ausgeführt.
Ein Workflow-Diagramm wird angezeigt. Das Diagramm zeigt mehrere Blöcke, von denen jeder eine Aufgabe oder *Aktion* darstellt. Die meisten Aktionen sind vertikal angeordnet, wobei die Aktionen oben vor den Aktionen unten ausgeführt werden. Aktionen, die nebeneinander angeordnet sind, laufen parallel ab. Aktionen, die zusammen gruppiert sind, müssen alle erfolgreich ausgeführt werden, bevor die Aktion unter ihnen gestartet werden kann.
Die Hauptblöcke sind:
+ **WorkflowSource**— Dieser Block steht für Ihr Quell-Repository. Er zeigt unter anderem den Namen des Quell-Repositorys (**mysfits**) und den Commit, der den Workflow-Lauf automatisch gestartet hat. CodeCatalyst hat diesen Commit generiert, als Sie Ihr Projekt erstellt haben.
+ **Build** — Dieser Block stellt eine Gruppierung von zwei Aktionen dar, die beide erfolgreich abgeschlossen werden müssen, damit die nächste Aktion gestartet werden kann.
+ **DeployBackend**— Dieser Block stellt eine Aktion dar, die die Backend-Komponenten der Anwendung in der Cloud bereitstellt. AWS
+ **Tests** — Dieser Block stellt eine Gruppierung von zwei Testaktionen dar, die beide erfolgreich abgeschlossen werden müssen, damit die nächste Aktion gestartet werden kann.
+ **DeployFrontend**— Dieser Block stellt eine Aktion dar, die die Frontend-Komponenten der Anwendung in der Cloud bereitstellt. AWS
1. Wählen Sie die Registerkarte **Definition** (ganz oben). Die [Workflow-Definitionsdatei](workflow-reference.md) wird auf der rechten Seite angezeigt. Die Datei enthält die folgenden wichtigen Abschnitte:
+ Ein `Triggers` Abschnitt oben. In diesem Abschnitt wird angegeben, dass der Workflow immer dann beginnen muss, wenn Code in den `main` Branch des Quell-Repositorys übertragen wird. Durch Pushs in andere Zweige (z. B.`test`) wird dieser Workflow nicht gestartet. Der Workflow wird mithilfe der Dateien in der `main` Filiale ausgeführt.
+ Ein `Actions` Abschnitt, unter`Triggers`. In diesem Abschnitt werden die Aktionen definiert, die Sie im Workflow-Diagramm sehen.
1. Wählen Sie die Registerkarte **Neuester Status** (ganz oben) und wählen Sie eine beliebige Aktion im Workflow-Diagramm aus.
1. Wählen Sie auf der rechten Seite die Registerkarte **Konfiguration** aus, um die Konfigurationseinstellungen zu sehen, die von der Aktion während der letzten Ausführung verwendet wurden. Jede Konfigurationseinstellung hat eine passende Eigenschaft in der Workflow-Definitionsdatei.
1. Lassen Sie die Konsole geöffnet und fahren Sie mit dem nächsten Verfahren fort.
**Um die Build-Logs und Testberichte zu überprüfen**
1. Wählen Sie die Registerkarte **Neuester Status**.
1. Wählen Sie im Workflow-Diagramm die **DeployFrontend**Aktion aus.
1. Warten Sie, bis die Aktion abgeschlossen ist. Achten Sie darauf, dass das Symbol „In Bearbeitung“ (![\[Workflow in progress.\]](http://docs.aws.amazon.com/de_de/codecatalyst/latest/userguide/images/flows/run-in-progress.png)) zu einem Symbol für „Erfolg“ (![\[Workflow success.\]](http://docs.aws.amazon.com/de_de/codecatalyst/latest/userguide/images/flows/run-success.png)) wechselt.
1. Wählen Sie die Aktion **build\$1backend**.
1. Wählen Sie die Registerkarte **Protokolle** und erweitern Sie einige Abschnitte, um die Protokollnachrichten für diese Schritte anzuzeigen. Sie können Meldungen sehen, die sich auf das Backend-Setup beziehen.
1. Wählen Sie die Registerkarte **Berichte** und dann den `backend-coverage.xml` Bericht aus. CodeCatalyst zeigt den zugehörigen Bericht an. Der Bericht zeigt die Codeabdeckungstests, die ausgeführt wurden, und gibt den Anteil der Codezeilen an, die durch Tests erfolgreich validiert wurden, z. B. 80%.
Weitere Informationen zu Testberichten finden Sie unter[Testen mit WorkflowsTesten mit Workflows](test-workflow-actions.md).
**Tipp**
Sie können Ihre Testberichte auch anzeigen, indem Sie im Navigationsbereich **Berichte** auswählen.
1. Lassen Sie die CodeCatalyst Konsole geöffnet und fahren Sie mit dem nächsten Verfahren fort.
**Um zu bestätigen, dass die moderne Anwendung erfolgreich bereitgestellt wurde**
1. Kehren Sie zum **ApplicationDeploymentPipeline**Workflow zurück und wählen Sie den ***string*Link Ausführen** der letzten Ausführung aus.
1. Suchen Sie im Workflow-Diagramm nach der **DeployFrontend**Aktion und wählen Sie den Link **App anzeigen** aus. Die Mysfit-Website wird angezeigt.
**Anmerkung**
Wenn Sie den Link **App anzeigen** in der **DeployFrontend**Aktion nicht sehen, stellen Sie sicher, dass Sie den Link Run-ID ausgewählt haben.
1. Suchen Sie nach dem Pegasus Mysfit namens **Twilight** Glitter. Notieren Sie sich den Wert für das Alter. Ist es`6`. Sie werden eine Codeänderung vornehmen, um das Alter zu aktualisieren.
## Schritt 7: Bitten Sie andere, Ihre Änderungen zu überprüfen
Da du nun Änderungen in einem Branch mit dem Namen hast`test`, kannst du andere bitten, sie zu überprüfen, indem du eine Pull-Anfrage erstellst. Führen Sie die folgenden Schritte aus, um eine Pull-Anfrage zu erstellen, um die Änderungen aus dem `test` Branch in den `main` Branch zusammenzuführen.
**So erstellen Sie eine Pull-Anforderung**
1. Navigiere zu deinem Projekt.
1. Führen Sie eine der folgenden Aktionen aus:
+ Wählen Sie im Navigationsbereich **Code**, dann **Pull Requests** und dann **Create Pull Request** aus.
+ Wählen Sie auf der Repository-Startseite die Option **Mehr** und dann **Pull-Request erstellen** aus.
+ Wähle auf der Projektseite die Option **Pull-Request erstellen** aus.
1. Stellen Sie im **Quell-Repository** sicher, dass das angegebene Quell-Repository das ist, das den festgeschriebenen Code enthält. Diese Option wird nur angezeigt, wenn Sie den Pull-Request nicht von der Hauptseite des Repositorys aus erstellt haben.
1. Wählen Sie im **Ziel-Branch** den Branch aus, in den der Code nach der Überprüfung zusammengeführt werden soll.
1. Wählen Sie im **Quellzweig** den Zweig aus, der den festgeschriebenen Code enthält.
1. Geben **Sie im Feld Titel der Pull-Anfrage** einen Titel ein, der anderen Benutzern hilft zu verstehen, was überprüft werden muss und warum.
1. (Optional) Geben Sie unter **Beschreibung des Pull-Requests** Informationen wie einen Link zu Problemen oder eine Beschreibung Ihrer Änderungen ein.
**Tipp**
Du kannst **Beschreibung für mich schreiben** wählen, damit CodeCatalyst automatisch eine Beschreibung der in der Pull-Anfrage enthaltenen Änderungen generiert wird. Sie können Änderungen an der automatisch generierten Beschreibung vornehmen, nachdem Sie sie dem Pull Request hinzugefügt haben.
Diese Funktionalität setzt voraus, dass generative KI-Funktionen für den Space aktiviert sind und ist nicht für Pull-Requests in verknüpften Repositorys verfügbar. Weitere Informationen finden Sie unter [Generative KI-Funktionen verwalten](https://docs.aws.amazon.com/codecatalyst/latest/adminguide/managing-generative-ai-features.html).
1. (Optional) Wählen Sie **unter Probleme** die Option **Probleme verknüpfen** aus und wählen Sie dann entweder ein Problem aus der Liste aus oder geben Sie dessen ID ein. Um die Verknüpfung eines Problems aufzuheben, wählen Sie das Symbol „Verknüpfung aufheben“.
1. (Optional) Wählen Sie unter **Erforderliche Prüfer die Option Erforderliche Prüfer** **hinzufügen** aus. Wählen Sie aus der Liste der Projektmitglieder aus, um sie hinzuzufügen. Erforderliche Prüfer müssen die Änderungen genehmigen, bevor der Pull-Request mit dem Ziel-Branch zusammengeführt werden kann.
**Anmerkung**
Sie können einen Prüfer nicht gleichzeitig als erforderlichen Prüfer und als optionalen Prüfer hinzufügen. Sie können sich nicht selbst als Prüfer hinzufügen.
1. (Optional) Wählen Sie unter **Optionale Prüfer** die Option **Optionale Prüfer hinzufügen** aus. Wählen Sie aus der Liste der Projektmitglieder aus, um sie hinzuzufügen. Optionale Prüfer müssen die Änderungen nicht als Anforderung genehmigen, bevor der Pull-Request mit dem Ziel-Branch zusammengeführt werden kann.
1. Überprüfe die Unterschiede zwischen den Branches. Der Unterschied, der in einem Pull Request angezeigt wird, besteht in den Änderungen zwischen der Revision im Quell-Branch und der Merge-Base, bei der es sich um den Head-Commit des Ziel-Branches zum Zeitpunkt der Erstellung des Pull-Requests handelt. Wenn keine Änderungen angezeigt werden, sind die Branches möglicherweise identisch, oder Sie haben denselben Branch sowohl für die Quelle als auch für das Ziel ausgewählt.
1. Wenn Sie überzeugt sind, dass der Pull Request den Code und die Änderungen enthält, die Sie überprüfen möchten, wählen Sie **Create** aus.
**Anmerkung**
Nachdem Sie den Pull Request erstellt haben, können Sie Kommentare hinzufügen. Kommentare können zum Pull-Request oder zu einzelnen Zeilen in Dateien sowie zum gesamten Pull-Request hinzugefügt werden. Du kannst Links zu Ressourcen wie Dateien hinzufügen, indem du das @-Zeichen gefolgt vom Namen der Datei verwendest.
Wenn Sie den Pull Request erstellen, verwendet der **OnPullRequest**Workflow zunächst die Quelldateien im `test` Branch. Während Ihre Prüfer Ihre Codeänderung genehmigen, können Sie die Ergebnisse beobachten, indem Sie den Workflow auswählen und sich die Testausgabe ansehen.
Nachdem Sie die Änderung überprüft haben, können Sie den Code zusammenführen. Wenn Sie den Code mit dem Standardzweig zusammenführen, wird automatisch der Workflow gestartet, mit dem Ihre Änderungen erstellt und bereitgestellt werden.
**Um eine Pull-Anfrage von der CodeCatalyst Konsole aus zusammenzuführen**
1. Navigieren Sie zu Ihrem modernen Anwendungsprojekt.
1. Wählen Sie auf der Projektseite unter **Open Pull Requests** den Pull Request aus, den Sie zusammenführen möchten. Wenn du den Pull Request nicht siehst, wähle **Alle anzeigen** und wähle ihn dann aus der Liste aus. Wählen Sie **Merge (Zusammenführen)**.
1. Wählen Sie aus den verfügbaren Merge-Strategien für den Pull Request. **Aktiviere oder deaktiviere optional die Option, den Quell-Branch nach dem Zusammenführen des Pull-Requests zu löschen, oder deaktiviere sie und wähle dann Merge.**
**Anmerkung**
Wenn die Schaltfläche **Zusammenführen** nicht aktiv ist oder die Bezeichnung **Nicht zusammenführbar** angezeigt wird, haben entweder ein oder mehrere erforderliche Reviewer den Pull Request noch nicht genehmigt, oder der Pull Request kann nicht in der Konsole zusammengeführt werden. CodeCatalyst Ein Prüfer, der eine Pull-Anfrage nicht genehmigt hat, wird in der **Übersicht** im Bereich **Pull-Request-Details** durch ein Uhrsymbol gekennzeichnet. Wenn alle erforderlichen Reviewer den Pull Request genehmigt haben, die Schaltfläche **Zusammenführen** aber immer noch nicht aktiv ist, liegt möglicherweise ein Merge-Konflikt vor. Sie können Mergekonflikte für den Ziel-Branch in der CodeCatalyst Konsole lösen und dann den Pull Request zusammenführen, oder Sie können Konflikte lösen und lokal zusammenführen und dann den Commit, der den Merge enthält, per Push übertragen. CodeCatalyst Weitere Informationen finden Sie unter [Eine Pull-Anfrage zusammenführen (Git)](pull-requests-merge.md#pull-requests-merge-git) und in Ihrer Git-Dokumentation.
Sobald du die Änderungen aus dem Branch mit dem `test` Branch zusammengeführt hast, startet die Änderung automatisch den **ApplicationDeploymentPipeline**Workflow, der deine Änderung erstellt und bereitstellt. **main**
**Um zu sehen, wie der zusammengeführte Commit durch den ApplicationDeploymentPipeline Workflow läuft**
1. **Wählen Sie im Navigationsbereich **CI/CD** und dann Workflows aus.**
1. Erweitern Sie **unter Workflows** in den **ApplicationDeploymentPipeline**Bereich **Letzte** Ausführungen. Sie können die Workflow-Ausführung sehen, die durch den Merge-Commit gestartet wurde. Wählen Sie diese Option optional aus, um den Fortschritt der Ausführung zu verfolgen.
1. Wenn der Lauf abgeschlossen ist, laden Sie die URL, die Sie zuvor besucht haben, erneut. Sehen Sie sich den Pegasus an, um zu überprüfen, ob sich das Alter geändert hat.
![\[Die Codeänderung wurde zusammengeführt, erstellt und bereitgestellt und ist in der Anwendung sichtbar\]](http://docs.aws.amazon.com/de_de/codecatalyst/latest/userguide/images/modified-mysfits.png)
## Schritt 8: Schließen Sie das Problem
Wenn ein Problem behoben ist, kann es auf der CodeCatalyst Konsole geschlossen werden.
**Um ein Problem für ein Projekt zu schließen**
1. Navigieren Sie zu Ihrem Projekt.
1. Wählen Sie im Navigationsbereich **Probleme** aus.
1. Drag-and-drop das Problem in der Spalte **Erledigt**.
Weitere Informationen finden Sie unter [Verfolge und organisiere die Arbeit mit Problemen in CodeCatalystVerfolge und organisiere die Arbeit mit Problemen](issues.md).
## Bereinigen von Ressourcen
Räumen Sie in Ihrer Umgebung AWS auf CodeCatalyst und entfernen Sie Spuren dieses Tutorials aus Ihrer Umgebung.
Sie können wählen, ob Sie das Projekt, das Sie für dieses Tutorial verwendet haben, weiterhin verwenden möchten, oder Sie können das Projekt und die zugehörigen Ressourcen löschen.
**Anmerkung**
Wenn Sie dieses Projekt löschen, werden alle Repositorys, Probleme und Artefakte im Projekt für alle Mitglieder gelöscht.
**So löschen Sie ein Projekt**
1. Navigieren Sie zu Ihrem Projekt und wählen Sie dann **Projekteinstellungen**.
1. Wählen Sie die Registerkarte **Allgemein**.
1. Wählen Sie unter dem Projektnamen die Option **Projekt löschen** aus.
**So löschen Sie Ressourcen in CloudFormation Amazon S3**
1. Melden Sie sich AWS-Managementkonsole mit demselben Konto an, das Sie Ihrem CodeCatalyst Bereich hinzugefügt haben.
1. Gehe zum **CloudFormation**Service.
1. Lösche den ***string*Mysfits-Stapel**.
1. Löschen Sie den ***string*Development-Mysfits-Stack**.
1. Wählen Sie den Stack aus (löschen Sie ihn aber nicht). **CDKToolkit** Wählen Sie die Registerkarte **Resources (Ressourcen)** aus. Wählen Sie den **StagingBucket**Link und löschen Sie den Bucket und den Bucket-Inhalt in Amazon S3.
**Anmerkung**
Wenn Sie diesen Bucket nicht manuell löschen, wird möglicherweise ein Fehler angezeigt, wenn Sie den Blueprint für moderne dreistufige Webanwendungen erneut ausführen.
1. (Optional) Löschen Sie den Stack. **CDKToolkit**
## Referenz
Der Blueprint für moderne dreistufige Webanwendungen stellt Ressourcen in Ihrem CodeCatalyst Bereich und in Ihrem AWS Konto in der Cloud bereit. AWS Diese Ressourcen sind:
+ **In deinem CodeCatalyst Raum**:
+ Ein CodeCatalyst Projekt, das die folgenden Ressourcen umfasst:
+ Ein [Quell-Repository](source.md) — Dieses Repository enthält Beispielcode für eine „Mysfits“ -Webanwendung.
+ Ein [Workflow](workflow.md) — Dieser Workflow erstellt den Mysfits-Anwendungscode und stellt ihn bereit, wenn eine Änderung am Standardzweig vorgenommen wird
+ Ein [Forum und ein Backlog für Probleme](issues.md) — Dieses Board und das Backlog können zur Planung und Nachverfolgung der Arbeit verwendet werden.
+ Eine [Suite für Testberichte](test-workflow-actions.md) — Diese Suite enthält automatisierte Berichte, die im Beispielcode enthalten sind.
+ **Im zugehörigen AWS-Konto**:
+ Ein **CDKToolkit**Stapel — Dieser Stack stellt die folgenden Ressourcen bereit:
+ Ein Amazon S3 S3-Staging-Bucket, eine Bucket-Richtlinie und der AWS KMS Schlüssel, mit dem der Bucket verschlüsselt wurde.
+ Eine IAM-Bereitstellungsrolle für die Bereitstellungsaktion.
+ AWS IAM-Rollen und -Richtlinien zur Unterstützung der Ressourcen im Stack.
**Anmerkung**
Das **CDKToolkit**wird nicht für jede Bereitstellung abgerissen und neu erstellt. Dies ist ein Stack, der in jedem Konto initiiert wird, um das AWS CDK zu unterstützen.
+ Ein ***string*BackEndDevelopment-Mysfits-Stack** — Dieser Stack stellt die folgenden Backend-Ressourcen bereit:
+ Ein Amazon API Gateway Gateway-Endpunkt.
+ AWS IAM-Rollen und -Richtlinien zur Unterstützung der Ressourcen im Stack.
+ Eine AWS Lambda Funktion und eine Ebene stellen die serverlose Rechenplattform für moderne Anwendungen bereit.
+ Eine IAM-Richtlinie und -Rolle für die Bucket-Bereitstellung und die Lambda-Funktion.
+ Ein ***string*Mysfits-Stack** — Dieser Stack stellt die Frontend-Anwendung bereit. AWS Amplify
### Weitere Informationen finden Sie auch unter
Weitere Informationen zu den AWS Diensten, bei denen Ressourcen im Rahmen dieses Tutorials erstellt werden, finden Sie im Folgenden:
+ **Amazon S3** — Ein Service zum Speichern Ihrer Frontend-Ressourcen auf einem Objektspeicherservice, der branchenführende Skalierbarkeit, hohe Datenverfügbarkeit, Sicherheit und Leistung bietet. Weitere Informationen finden Sie im [Amazon S3 S3-Benutzerhandbuch](https://docs.aws.amazon.com/AmazonS3/latest/userguide/).
+ **Amazon API Gateway** — Ein Service für die Erstellung, Veröffentlichung, Wartung, Überwachung und Sicherung von REST, HTTP und WebSocket APIs in jeder Größenordnung Weitere Informationen finden Sie im [API Gateway Developer Guide](https://docs.aws.amazon.com/apigateway/latest/developerguide/).
+ **Amplify** — Ein Service zum Hosten Ihrer Frontend-Anwendung. Weitere Informationen finden Sie im [AWS Amplify Hosting-Benutzerhandbuch](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html).
+ **AWS Cloud Development Kit (AWS CDK)**— Ein Framework für die Definition der Cloud-Infrastruktur im Code und deren Bereitstellung. AWS CloudFormation AWS CDK Dazu gehört das AWS CDK Toolkit, ein Befehlszeilentool für die Interaktion mit AWS CDK Apps und Stacks. Weitere Informationen finden Sie im [AWS Cloud Development Kit (AWS CDK) -Entwicklerhandbuch](https://docs.aws.amazon.com/cdk/latest/guide/).
+ **Amazon DynamoDB** — Ein vollständig verwalteter NoSQL-Datenbankservice zum Speichern von Daten. Weitere Informationen finden Sie im [Amazon DynamoDB DynamoDB-Entwicklerhandbuch](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html).
+ **AWS Lambda**— Ein Service, mit dem Sie Ihren Code in einer hochverfügbaren Recheninfrastruktur aufrufen können, ohne Server bereitzustellen oder zu verwalten. Weitere Informationen finden Sie im [AWS Lambda -Entwicklerhandbuch](https://docs.aws.amazon.com/lambda/latest/dg/).
+ **AWS IAM** — Ein Dienst zur sicheren Steuerung des Zugriffs auf AWS und die zugehörigen Ressourcen. Weitere Informationen finden Sie im [IAM-Benutzerhandbuch](https://docs.aws.amazon.com/IAM/latest/UserGuide/).