AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com

 
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify
                              Console User Guide

AWS Amplify: Console User Guide
Copyright © 2019 Amazon Web Services, Inc. and/or its affiliates. All rights reserved.
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

Amazon's trademarks and trade dress may not be used in connection with any product or service that is not Amazon's,
in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits
Amazon. All other trademarks not owned by Amazon are the property of their respective owners, who may or may not
be affiliated with, connected to, or sponsored by Amazon.
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

Table of Contents
  Was ist die AWS Amplify Console? ....................................................................................................... 1
        Was sind moderne Webanwendungen? ......................................................................................... 1
        Funktionen der Amplify Console ................................................................................................... 1
        Nächster Schritt .......................................................................................................................... 2
  Erste Schritte ..................................................................................................................................... 3
        Schritt 1: Verbinden von Repositorys ............................................................................................. 3
        Schritt 2: Bestätigen der Build-Einstellungen für das Frontend ............................................................ 4
        Schritt 3: Bestätigen der Build-Einstellungen für das Backend (Beta) ................................................... 5
        Schritt 4: Hinzufügen von Umgebungsvariablen (optional) ................................................................. 6
        Schritt 5: Speichern und Bereitstellen ............................................................................................. 6
        Nächste Schritte ......................................................................................................................... 7
  Einrichten von benutzerdefinierten Domänen .......................................................................................... 8
        Hinzufügen einer in Amazon Route 53 verwalteten benutzerdefinierten Domäne ................................... 8
        Hinzufügen einer benutzerdefinierten Domäne, die von einem DNS-Drittanbieter verwaltet wird ............... 9
        Verwalten von Unterdomänen ..................................................................................................... 11
        Verknüpfen einer Domäne .......................................................................................................... 12
  Bereitstellen von serverlosen Backends ................................................................................................ 13
  Verwalten mehrerer Umgebungen ....................................................................................................... 15
        Verwenden von verzweigungsbasierten Umgebungen ..................................................................... 15
        Verwenden von Teamworkflows .................................................................................................. 16
              Verwenden eines zentralen Workflows ................................................................................. 16
              Verwendung eines Workflows für Funktionsverzweigungen ...................................................... 17
              Verwenden des GitFlow-Workflows ...................................................................................... 18
  Verwenden von Umleitungen .............................................................................................................. 19
        Arten von Umleitungen .............................................................................................................. 19
        Bestandteile einer Umleitung ...................................................................................................... 20
        Reihenfolge von Umleitungen ..................................................................................................... 20
        Einfache Umleitungen und Umschreibungen ................................................................................. 21
        Umleitungen für Single Page Web Apps (SPA) .............................................................................. 22
        Reverseproxy-Umschreibung ...................................................................................................... 22
        Nachstehende Schrägstriche und bereinigte URLs ......................................................................... 22
        Platzhalter ................................................................................................................................ 23
        Abfragezeichenfolgen und Pfadparameter ..................................................................................... 23
        Regionsbasierte Umleitungen ...................................................................................................... 24
  Beschränken des Zugriffs ................................................................................................................... 25
  Konfigurieren der Build-Einstellungen ................................................................................................... 26
        Syntax der YML-Spezifikation ..................................................................................................... 26
        Build-Szenarien ........................................................................................................................ 27
              Verwenden von verzweigungsspezifischen Build-Einstellungen ................................................. 27
              Navigieren zu einem Unterordner ........................................................................................ 27
              Bereitstellen des Backends mit Ihrem Frontend ..................................................................... 28
              Festlegen des Ausgabeordners ........................................................................................... 28
              Installieren von Paketen als Teil Ihres Builds ......................................................................... 28
              Verwenden einer privaten npm-Registrierung ........................................................................ 29
              Installieren von OS-Paketen ............................................................................................... 29
  Umgebungsvariablen ......................................................................................................................... 30
        Festlegen von Umgebungsvariablen ............................................................................................ 30
        Zugreifen auf Umgebungsvariablen .............................................................................................. 30
  Herstellen einer Verbindung mit benutzerdefinierten Domänen von Drittanbietern ........................................ 32
        Herstellen einer Verbindung mit einer GoDaddy-Domäne ................................................................ 32
        Herstellen einer Verbindung mit einer Google-Domäne ................................................................... 33
  Erstellen einer Servicerolle ................................................................................................................. 35
        Schritt 1: Erstellen einer Servicerolle ............................................................................................ 35
        Schritt 2: Akzeptieren aller Standardeinstellungen in der AWS CloudFormation-Konsole ....................... 35

                                                                         iii
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide

     Schritt 3: Rückkehr zur Amplify-Konsole ....................................................................................... 35
Verwalten Ihrer App-Leistung .............................................................................................................. 37

                                                                   iv
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                 Was sind moderne Webanwendungen?

Was ist die AWS Amplify Console?
    Die AWS Amplify Console ist ein Service für fortlaufende Bereitstellung und Hosting für moderne
    Webanwendungen. Die AWS Amplify Console vereinfacht die Bereitstellung Ihrer Anwendung am
    Frontend und am Backend. Verbinden Sie Ihr Code-Repository, sodass Frontend und Backend bei
    jeder Code-Übertragung in einem einzigen Workflow bereitgestellt werden. Damit wird gewährleistet,
    dass die Webanwendung erst aktualisiert wird, nachdem der Einsatz erfolgreich abgeschlossen ist.
    Abstimmungsschwierigkeiten zwischen dem Frontend und dem Backend werden somit ausgeschlossen.
    AWS Amplify Console erleichtert Ihnen das Erstellen, Bereitstellen und Hosten Ihrer mobilen
    Webanwendungen, mit denen Sie schnell auf Feedback reagieren und die neuen Funktionen den
    Benutzern schneller bereitstellen können.

Was sind moderne Webanwendungen?
    Moderne Webanwendungen werden als einseitige Webanwendungen entwickelt, bei denen alle
    Anwendungskomponenten in statischen Dateien enthalten sind. Herkömmliche Client-Server-Web-
    Architekturen führten zu schlechten Erfahrungen: jeder Schaltflächenklick oder jede Suchanfrage erforderte
    eine Anfrage und Antwort des Servers und verlangsamte damit die gesamte Anwendung. Moderne Web-
    Apps bieten eine native, App-ähnliche Benutzererfahrung, denn sie binden das App-Frontend oder die
    Benutzeroberfläche effizient als vorkonfigurierte HTML/JavaScript-Dateien in Browser ein. Diese Dateien
    können dann die Backend-Funktion ohne einen Neustart der Seite aufrufen.

    Die Funktionalität moderner Webanwendungen wird häufig über mehrere Orte verteilt – wie z. B.
    Datenbanken, Authentifizierungs-Services, Frontend-Codeausführung im Browser und Backend-
    Geschäftslogik oder AWS Lambda-Funktionen, die in der Cloud ausgeführt werden. Dadurch wird die
    Bereitstellung von Anwendungen komplex und zeitaufwendig, da Entwickler Bereitstellungen sorgfältig
    über Frontend und Backend hinweg koordinieren müssen, um unvollständige oder fehlgeschlagene
    Bereitstellungen zu vermeiden. Die AWS Amplify Console vereinfacht die Bereitstellung von Frontend und
    Backend in einem einzigen Workflow.

    AWS Amplify Console unterstützt gängige Single Page App (SPA)-Frontend-Frameworks (z. B. React,
    Angular, Vue.js, Ionic, Ember) sowie Generatoren von statischen Seiten wie Gatsby, Eleventy, Hugo,
    VuePress und Jekyll.

Funktionen der Amplify Console
    Mit der Amplify Console können Sie Folgendes ausführen:

    • Verbinden Sie Ihr Repository (GitHub, BitBucket, GitLab und AWS CodeCommit), damit die Amplify
      Console die Frontend-Build-Einstellungen zusammen mit jeglicher Backend-Funktionalität automatisch
      erkennt, die mit der Amplify-CLI (Befehlszeilen-Toolkette zum Erstellen serverloser Backends)
      bereitgestellt wurde.
    • Verwalten Sie Produktions- und Staging-Umgebungen für Ihr Frontend und Ihr Backend, indem Sie neue
      Verzweigungen vernetzen.
    • Atomare Bereitstellungen eliminieren das Wartungsfenster, indem sie sicherstellen, dass die Web-App
      erst aktualisiert wird, wenn die Bereitstellung vollständig abgeschlossen ist. Dadurch entfallen Szenarien,
      in denen Dateien nicht korrekt hochgeladen werden.
    • Verbinden Sie Ihre benutzerdefinierte Domäne. Wenn Sie Ihre Domäne in Amazon Route 53
      verwalten, verbindet die Amplify Console den Stamm (yourdomain.com), www-Subdomänen
      (www.yourdomain.com) und Verzweigungen von Subdomänen (https://dev.yourdomain.com).

                                                    1
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                           Nächster Schritt

     • Laden Sie Screenshots Ihrer App auf verschiedenen mobilen Geräten herunter, um Probleme mit dem
       Layout zu ermitteln.
     • Richten Sie Umschreibungen und Umleitungen ein, um SEO-Rankings zu verwalten.
     • Schützen Sie Ihre Web-App mit einem Passwort, damit Sie an neuen Funktionen arbeiten können, ohne
       sie öffentlich zugänglich zu machen.

Nächster Schritt
     Erste Schritte (p. 3) mit der Amplify Console.

                                                      2
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                  Schritt 1: Verbinden von Repositorys

Erste Schritte
     In dieser schrittweisen Anleitung erfahren Sie, wie eine moderne Web-App kontinuierlich erstellt,
     bereitgestellt und gehostet wird. Zu modernen Web-Apps gehören Single Page App (SPA)-Frameworks
     (z. B. React, Angular oder Vue) sowie Generatoren von statischen Seiten (Static-site Generators, SSGs)
     (z. B. Hugo, Jekyll oder Gatsby).

     Zuerst melden Sie sich bei der Amplify-Konsole an und wählen unter Bereitstellen die Option Erste Schritte
     aus.

Schritt 1: Verbinden von Repositorys
     Verbinden Sie Ihre GitHub-, Bitbucket-, GitLab- oder AWS CodeCommit-Repositorys. Nachdem Sie
     die Amplify-Konsole autorisiert haben, fordert Amplify ein Zugriffstoken vom Repository-Anbieter
     an, speichert das Token aber nicht auf den AWS-Severn. Amplify greift auf Ihr Repository nur mit
     Bereitstellungsschlüsseln zu, die in einem bestimmten Repository installiert sind.

     Wählen Sie nach dem Verbinden des Repository-Serviceanbieters ein Repository aus und wählen Sie dann
     eine entsprechende Verzweigung zum Erstellen und Bereitstellen.

                                                   3
AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
AWS Amplify Console User Guide
                                     Schritt 2: Bestätigen der Build-
                                     Einstellungen für das Frontend

Schritt 2: Bestätigen der Build-Einstellungen für das
Frontend
     Amplify überprüft Ihr Repository für die ausgewählte Verzweigung, um die Abfolge der auszuführenden
     Build-Befehle automatisch zu erkennen.

     Wichtig: Überprüfen Sie die Build-Befehle und das Build-Ausgabeverzeichnis (d. h. „artifactsbaseDirectory“)
     auf ihre Richtigkeit. Wenn Sie diese Informationen ändern müssen, wählen Sie Bearbeiten, um den YML-
     Editor zu öffnen. Sie können Ihre Build-Einstellungen auf unseren Servern speichern oder die YML-Datei
     herunterladen und dem Stammverzeichnis des Repositorys hinzufügen (für Monorepositorys speichern Sie
     die YML-Datei im Stammverzeichnis der App).

                                                    4
AWS Amplify Console User Guide
                                      Schritt 3: Bestätigen der Build-
                                   Einstellungen für das Backend (Beta)

     Weitere Informationen finden Sie unter YML-Struktur (p. 26).

Schritt 3: Bestätigen der Build-Einstellungen für das
Backend (Beta)
     Die Amplify-Konsole erkennt Apps, die das Amplify-Framework verwenden und Backend-Ressourcen im
     selben Workflow mit dem Frontend-Build bereitstellen können. Dies ermöglicht Ihnen die Verwaltung von
     Produktions- und Testumgebungen mit Ihrem Git-Workflow.

     Zum Bereitstellen von Backend-Funktionalität mithilfe der Amplify-CLI während Ihres Builds erstellen
     Sie eine IAM-Servicerolle oder nutzen eine vorhandene. IAM-Rollen sind eine sichere Methode, um der
     Amplify-Konsole Berechtigungen zum Verarbeiten von Ressourcen in Ihrem Konto zu gewähren.

     Hinweis: Die Amplify-CLI wird nur ausgeführt, wenn eine IAM-Servicerolle aktiviert ist.

     Weitere Informationen finden Sie unter Bereitstellen eines serverlosen Backends mit der Amplify-
     Konsole (p. 13).

                                                     5
AWS Amplify Console User Guide
                         Schritt 4: Hinzufügen von Umgebungsvariablen (optional)

Schritt 4: Hinzufügen von Umgebungsvariablen
(optional)
     Fast jede App muss zur Laufzeit Konfigurationsinformationen abrufen. Bei diesen Konfigurationen
     kann es sich um Datenbank-Verbindungsdetails, API-Schlüssel oder andere Parameter handeln.
     Umgebungsvariablen bieten eine Möglichkeit, diese Konfigurationen zur Erstellungszeit verfügbar zu
     machen.

Schritt 5: Speichern und Bereitstellen
     Überprüfen Sie alle Ihre Einstellungen, um sicherzustellen, dass alles korrekt eingerichtet ist. Klicken Sie
     auf Save and deploy (Speichern und bereitstellen), um Ihre Web-App in einem globalen Netzwerk zur
     Bereitstellung von Inhalten (Content Delivery Network, CDN) bereitzustellen. Der Frontend-Build dauert in
     der Regel 1 bis 2 Minuten, je nach Größe der App kann die Dauer jedoch variieren.

     Wählen Sie eine Fortschrittsanzeige auf der Verzweigungskachel aus, um auf den Bildschirm mit Build-
     Protokollen zuzugreifen. Ein Build umfasst die folgenden Phasen:

     1. Bereitstellung: Ihre Build-Umgebung wird mithilfe eines Docker-Images auf einem Host mit 4 vCPU und
        7 GB Arbeitsspeicher eingerichtet. Jeder Build erhält eine eigene Host-Instance, um sicherzustellen,
        dass alle Ressourcen auf sichere Weise isoliert sind. Der Inhalt der Docker-Datei wird angezeigt, um
        sicherzustellen, dass das Standard-Image Ihre Anforderungen unterstützt.
     2. Build: Die Build-Phase umfasst drei Stufen: Einrichtung (Klonen des Repositorys in den Container),
        Backend-Bereitstellung (Ausführung der Amplify-CLI zum Bereitstellen von Backend-Ressourcen) und
        Frontend-Erstellung (Erstellung Ihrer Frontend-Artefakte).
     3. Bereitstellen: Wenn der Build abgeschlossen ist, sind Artefakte in einer von Amplify verwalteten Hosting-
        Umgebung bereitgestellt. Jede Bereitstellung ist atomar. Bei atomaren Bereitstellungen sind keine
        Wartungsfenster erforderlich, da sichergestellt ist, dass die Web-App erst aktualisiert wird, nachdem die
        Bereitstellung vollständig abgeschlossen ist.
     4. Überprüfen: Zum Überprüfen, ob Ihre App ordnungsgemäß funktioniert, rendert Amplify Screenshots der
        Datei „index.html“ mithilfe von Headless Chrome in mehreren Geräteauflösungen.

                                                     6
AWS Amplify Console User Guide
                                       Nächste Schritte

Nächste Schritte
    • Hinzufügen einer benutzerdefinierten Domäne zur App (p. 8)
    • Verwalten mehrerer Umgebungen (p. 15)

                                                 7
AWS Amplify Console User Guide
                                 Hinzufügen einer in Amazon Route 53
                                verwalteten benutzerdefinierten Domäne

Einrichten von benutzerdefinierten
Domänen
    Sie können Ihrer App eine benutzerdefinierte Domäne hinzufügen, die über eine Domänenvergabestelle
    (z B. Amazon Route 53, GoDaddy oder Google Domains) erworben wurde. Wenn Sie Ihre Web-App mit der
    Amplify-Konsole bereitstellen, wird sie unter folgender Adresse gehostet:

    https://branch-name.d1m7bkiki6tdw1.amplifyapp.com

    Wenn Sie eine benutzerdefinierte Domäne verwenden, sehen Benutzer, dass Ihre App unter einer URL wie
    beispielsweise der folgenden gehostet wird:

    https://www.awesomedomain.com

    Die Amplify-Konsole gibt ein SSL-Zertifikat für alle mit Ihrer App verbundenen Domänen aus, sodass der
    gesamte Datenverkehr über HTTPS/2 gesichert ist. Das von Amazon Certificate Manager generierte SSL-
    Zertifikat ist 30 Tage lang gültig und wird automatisch erneuert, solange Ihre App bei Amplify gehostet ist.

    Themen
     • Hinzufügen einer in Amazon Route 53 verwalteten benutzerdefinierten Domäne (p. 8)
     • Hinzufügen einer benutzerdefinierten Domäne, die von einem DNS-Drittanbieter verwaltet
       wird (p. 9)
     • Verwalten von Unterdomänen (p. 11)
     • Verknüpfen einer Domäne (p. 12)

Hinzufügen einer in Amazon Route 53 verwalteten
benutzerdefinierten Domäne
    Nach dem Bereitstellen Ihrer App können Sie eine benutzerdefinierte Domäne hinzufügen, die Sie mit
    Amazon Route 53 verwalten.

    1. Wählen Sie im linken Navigationsbereich App Settings (App-Einstellungen), Domain management
       (Domänenverwaltung) und dann Add domain (Domäne hinzufügen).

                                                    8
AWS Amplify Console User Guide
                             Hinzufügen einer benutzerdefinierten Domäne,
                             die von einem DNS-Drittanbieter verwaltet wird

    2. Geben Sie unter Enter your root domain (Stammdomäne eingeben) Ihre Stammdomäne (https://
       awesomedomain.com) ein. Wenn Sie mit der Eingabe beginnen, werden in der Liste die von Ihnen in
       Amazon Route 53 verwalteten Stammdomänen (https://awesomedomain.com) angezeigt.
    3. Wählen Sie die gewünschte Domäne aus und wählen Sie dann Find Domain (Domäne suchen) und
       Save (Speichern).

    Die Amplify-Konsole aktualisiert automatisch die DNS-Datensätze für Ihre Stammdomäne (https://
    awesomedomain.com) und www-Unterdomäne (https://www.awesomedomain.com) in Amazon Route
    53. Außerdem wird eine Umleitung für https://www.awesomedomain.com eingerichtet, die auf https://
    awesomedomain.com verweist. (Sie können diese Einstellung durch Auswählen von Rewrites and redirects
    (Umschreibungen und Umleitungen) im linken Menü ändern).

    Hinweis: In der Regel dauert es 10 bis 30 Minuten, bis das SSL-Zertifikat von DNS verteilt und ausgegeben
    wird, der Vorgang kann jedoch bis zu 24 Stunden dauern. Weitere Informationen zu den Statusmeldungen
    finden Sie unter Verknüpfen einer Domäne (p. 12).

Hinzufügen einer benutzerdefinierten Domäne, die
von einem DNS-Drittanbieter verwaltet wird
    Nach der Bereitstellung Ihrer App können Sie eine benutzerdefinierte Domäne hinzufügen, die Sie über
    einen DNS-Drittanbieter verwalten, wenn Sie Amazon Route 53 nicht verwenden.

    1. Wählen Sie im linken Navigationsbereich App Settings (App-Einstellungen), Domain management
       (Domänenverwaltung) und dann Add domain (Domäne hinzufügen).
    2. Geben Sie unter Enter your root domain (Stammdomäne eingeben) Ihre Stammdomäne (https://
       awesomedomain.com) ein und wählen Sie dann Find domain (Domäne suchen). Wenn die Domäne
       registriert ist, wird eine grüne Meldung angezeigt, die angibt, dass Sie fortfahren können, sofern Sie die
       Domäne besitzen. Wenn die Domäne verfügbar ist, kaufen Sie eine Domäne unter Amazon Route 53.

                                                    9
AWS Amplify Console User Guide
                       Hinzufügen einer benutzerdefinierten Domäne,
                       die von einem DNS-Drittanbieter verwaltet wird

3. Wählen Sie Save aus. Die Amplify-Konsole fügt zwei Einträge für https://www.awesomedomain.com und
   https://awesomedomain.com hinzu. Eine Umleitung von der www-Unterdomäne an die Stammdomäne
   ist eingerichtet. Da die Domäne extern verwaltet wird, müssen Sie Ihren DNS-Anbieter (z. B. GoDaddy
   oder Google Domains) manuell konfigurieren.
4. Um Ihrer App-Entwicklung eine Domäne zuzuweisen, wählen Sie im Benachrichtigungsbanner die
   Option View DNS records (DNS-Datensätze anzeigen).

5. Aktualisieren Sie die CNAME- und ALIAS-Datensätze für Ihren DNS-Anbieter wie folgt. Für GoDaddy
   und Google Domains folgen Sie den schrittweisen Anweisungen in Herstellen einer Verbindung mit
   benutzerdefinierten Domänen von Drittanbietern (p. 32).
  a. Konfigurieren Sie den CNAME-Datensatz so, dass alle Unterdomänen (https://
     *.awesomedomain.com) auf die amplifyapp-Domäne verweisen.
  b. Konfigurieren Sie den ANAME/ALIAS-Datensatz so, dass die Stammdomäne (https://
     awesomedomain.com) auf Ihre amplifyapp-Domäne verweist. ANAME-Datensätze ermöglichen, dass
     der Stamm Ihrer Domäne auf einen Hostnamen verweist. Für DNS-Anbieter ohne ANAME/ALIAS-
     Unterstützung wird dringend empfohlen, Ihr DNS zu Amazon Route 53 zu migrieren.
  c. Zum Generieren eines SSL-Zertifikats für Ihre Domäne muss Amazon Certificate Manager (ACM)
     die Eigentümerschaft überprüfen. Konfigurieren Sie einen CNAME-Eintrag so, dass er auf den
     Validierungsserver von ACM verweist. Sobald ACM die Eigentümerschaft Ihrer Domäne überprüft hat,
     wird für den gesamten Datenverkehr HTTPS/2 verwendet.

                                            10
AWS Amplify Console User Guide
                                    Verwalten von Unterdomänen

    Wichtig: Die Überprüfung der Domäneneigentümerschaft und DNS-Verteilung für Drittanbieterdomänen
    kann bis zu 48 Stunden dauern. Weitere Informationen zu Statusmeldungen finden Sie unter Verknüpfen
    einer Domäne (p. 12).

Verwalten von Unterdomänen
    Eine Unterdomäne ist der Teil Ihrer URL vor dem Domänennamen (z B. www.amazon.com oder
    aws.amazon.com). Für Domänen, die mit Route 53 verwaltet werden, erstellt die Amplify-Konsole
    automatisch Unterdomänen für alle verbundenen Verzweigungen. Wenn Sie beispielsweise eine dev-
    Verzweigung verbinden, erstellt die Amplify-Konsole ohne zusätzliche Konfiguration eine Bereitstellung
    unter https://dev..amplifyapp.com. Wenn Sie die gleiche Funktionalität für Drittanbieter möchten,
    müssen Sie das DNS konfigurieren. Wenn Sie die gleiche Funktionalität für Drittanbieter möchten,
    konfigurieren Sie das DNS so, dass der Platzhalter (*) der Amplify-Konsole Zugriff auf alle Unterdomänen
    hat.

                                                  11
AWS Amplify Console User Guide
                                     Verknüpfen einer Domäne

Verknüpfen einer Domäne
    Beim Verknüpfen einer Domäne mit Ihrer Amplify-App-Bereitstellung werden die folgenden
    Statusmeldungen angezeigt:

    1. In Bearbeitung: Erster Versuch, Ihren DNS-Datensatz zu aktualisieren. Dieser Status gibt an, dass
       Amplify in Route 53 verwaltete Datensätze aktualisieren kann, die Aktualisierung für DNS-Drittanbieter
       jedoch nicht möglich ist.
    2. Pending verification (Ausstehende Verifizierung): Vor der Ausstellung eines SSL-Zertifikats muss
       Amazon Certificate Manager (ACM) überprüfen, dass Sie der Eigentümer der Domäne sind. Das
       Überprüfen von Domänen, die außerhalb von Amazon Route 53 verwaltetet werden, dauert in der Regel
       am längsten.
    3. Pending deployment (Ausstehende Bereitstellung): Nach der Domänenverifizierung wird das DNS global
       an alle 144 Points of Presence unseres CDN verteilt.
    4. Verfügbar: Die Domäne wurde erfolgreich mit Ihrer App verknüpft.

                                                  12
AWS Amplify Console User Guide

Bereitstellen von serverlosen
Backends mit Ihrem Frontend (Beta)
   Hinweis: Diese Funktion ist derzeit nur für Benutzer der Beta-Version der Amplify CLI verfügbar, die
   mehrere Umgebungen unterstützt. Führen Sie erste Schritte mit der Funktion durch, indem Sie die Amplify-
   CLI installieren.

   npm install -g @aws-amplify/cli@multienv

   Die Amplify-Konsole ermöglicht Entwicklern das Erstellen von Apps mit dem Amplify Framework, um bei
   jedem Codecommit kontinuierlich Aktualisierungen ihres Back- und Frontends bereitzustellen. Mit der
   Amplify-Konsole können Sie serverlose Backends mit GraphQL-APIs, Authentifizierung, Analyse und
   Speicher bereitstellen, die von der Amplify-CLI erstellt werden.

   1. Verbinden Sie ein Repository und eine Verzweigung, die von der Amplify-CLI initialisiert wurde (Hinweis:
      Installieren Sie die Beta-Version der CLI: npm install -g @aws-amplify/cli@multienv).
   2. Die Amplify-Konsole erkennt mit der Amplify-CLI bereitgestellte Backends automatisch und fügt der
      YML-Datei des Builds eine Backendstufe hinzu, die wie folgt aussieht:

     version: 1.0
     env:
          variables:
              key: value
     backend:
          phases:
              build:
                  - export STACKINFO="$(envCache --get stackInfo)"
                  - amplifyPush --environment $AWS_BRANCH
                  - envCache --set stackInfo "$(amplify env get --json --name $AWS_BRANCH)"

     amplifyPush: Das amplifyPush-Skript ist ein Hilfsskript, mit dem Benutzer einen Umgebungsnamen
     als Eingabe angeben können, und das die Amplify-CLI zum Erstellen oder Aktualisieren einer
     Umgebung ausführt. Im ersten Build erstellen wir eine Backend-Umgebung, die dem Namen der
     verbundenen Verzweigung entspricht. („$AWS_BRANCH“ ist eine systemdefinierte Umgebungsvariable.)
     Wenn Sie eine vorhandene Amplify-Umgebung wiederverwenden möchten, ändern Sie die Variable
     „$AWS_BRANCH“ so, dass sie auf den env-Namen verweist.

     Beispielverwendung:

     amplifyPush --environment ENV_NAME

     envCache: Das envCache-Element stellt Schlüsselwertspeicher zur Erstellungszeit bereit. Das
     envCache-Element kann nur während eines Builds geändert werden und kann beim nächsten
     Build wiederverwendet werden. Mithilfe des envCache-Elements können wir Informationen zur
     bereitgestellten Umgebung speichern und in nachfolgenden Builds im Build-Container verfügbar
     machen. Umgebungsvariablen können dagegen nicht während eines Builds geändert werden.

     Beispielverwendung:

     envCache --set  
     envCache --get  

                                                 13
AWS Amplify Console User Guide

3. Wählen Sie Next (Weiter) und Save and deploy (Speichern und bereitstellen). Ihr App-Build wird durch
   Bereitstellung des Backends gefolgt vom Frontend gestartet.

                                             14
AWS Amplify Console User Guide
                         Verwenden von verzweigungsbasierten Umgebungen

Verwalten mehrerer Umgebungen
und Teamworkflows
Verwenden von verzweigungsbasierten
Umgebungen
    Die Amplify-Konsole erstellt mithilfe von Git-Verzweigungen jedes Mal neue Umgebungen, wenn ein
    Entwickler eine Verbindung mit einer neuen Verzweigung in seinem Repository verbindet. Nach dem
    Verbinden Ihrer ersten Verzweigung können Sie eine neue Umgebung erstellen, indem Sie wie folgt eine
    Verzweigung hinzufügen:

    1. Wählen Sie auf der Seite mit der Verzweigungsliste die Option Connect branch (Verzweigung
       verbinden).
    2. Wählen Sie in Ihrem Repository eine Verzweigung aus.
    3. Akzeptieren Sie die automatisch erkannten Einstellungen oder ändern Sie sie Ihren App-Anforderungen
       entsprechend.
    4. Speichern Sie Ihre App und stellen Sie sie dann bereit.

    Ihre App verfügt jetzt über zwei Frontend-Umgebungen unter https://master.appid.amplifyapp.com
    und https://dev.appid.amplifyapp.com. Wenn für Ihre App ein Backend mit der Amplify-CLI (Beta)
    bereitgestellt ist, stellt die Amplify-Konsole separate Backends pro Verzweigung bereit. Beim Verbinden
    einer Verzweigung werden Frontend- und Backend-Umgebungen erstellt. Dies ermöglicht Entwicklern das
    Arbeiten in Sandbox-Umgebungen und das Verwenden von Git als Mechanismus zum Zusammenführen
    von Code und zum Beheben von Konflikten.

                                                   15
AWS Amplify Console User Guide
                                    Verwenden von Teamworkflows

Verwenden von Teamworkflows
    Für Teams, die serverlose Apps mit der Amplify-CLI erstellen, wird Folgendes empfohlen:

    • Jeder Entwickler in einem Team erstellt eine Sandbox-Umgebung in der Cloud, die vom lokalen
      Computer unabhängig ist. So können Entwickler isoliert voneinander arbeiten, ohne dass Änderungen
      anderer Teammitglieder überschrieben werden.
    • Ihr Team verbindet Produktions-, Test- und Funktionsverzweigungen mit der Amplify-Konsole. So
      wird sichergestellt, dass die Amplify-Konsole das Git-Repository als einzige Informationsquelle beim
      Bereitstellen von Änderungen verwendet, anstatt sich darauf zu verlassen, dass Entwickler im Team ihr
      Back- oder Frontend manuell von ihren lokalen Computern in die Produktionsumgebung übertragen.

    Die Amplify-Konsole funktioniert mit allen Teamworkflows, z. B. zentralen Workflows sowie
    Funktionsverzweigungs- und GitFlow-Workflows.

    Verwenden eines zentralen Workflows
    Teams, die von SVN zu Git wechseln, wenden diesen Workflow an. Mit diesem Workflow überträgt jeder
    Entwickler im Team Code direkt an die Standardverzweigung mit dem Namen master. Jeder Entwickler
    klont eine lokale Kopie des Repositorys, arbeitet unabhängig und überträgt dann Code, um ihn in der
    master-Verzweigung zusammenzuführen. Beispiel:

    1. Verbinden Sie „master“ zur kontinuierlichen Bereitstellung mit der Amplify-Konsole.
    2. Sowohl Kita als auch Cody überprüfen die master-Verzweigung lokal und richten dann mit dem Befehl
       amplify init ein Cloud-Backend ein, um über ihre lokalen Computer Änderungen am Front- und Backend
       vorzunehmen.
    3. Nachdem der Code lokal getestet wurde, überträgt Kita den Code an die master-Verzweigung. Dadurch
       wird in der Amplify-Konsole ein Build ausgelöst, mit dem geänderte Front- oder Backend-Inhalte
       aktualisiert werden.

    Die folgenden Befehlszeilenbeispiele und das Diagramm stellen den Workflow dar.

    > git fetch && git checkout master
    > amplify init
            ? Do you want to use an existing environment? false
            ? Enter a name for the environment kita-sandbox
            // Provide AWS Profile info
    // Test feature locally
    > npm run start
    > git commit -m "New feature" && git push origin master

                                                  16
AWS Amplify Console User Guide
                  Verwendung eines Workflows für Funktionsverzweigungen

Verwendung eines Workflows für
Funktionsverzweigungen
Der Grundgedanke hinter dem Workflow für Funktionsverzweigungen das Ausführen von Funktionsarbeit
in einer anderen Verzweigung als der master-Verzweigung. Dadurch können Entwickler isoliert von der
Produktionsumgebung an neuen Funktionen arbeiten. Wenn die Funktion bereit ist, wird sie in der master-
Verzweigung zusammengeführt. Ähnlich wie beim zentralen Workflow arbeiten alle Teammitglieder
in der Funktionsverzweigung und übertragen Aktualisierungen an diese Verzweigung, bis sie für die
Zusammenführung mit der master-Verzweigung bereit ist. Die Funktionsverzweigung wird für die
kontinuierliche Bereitstellung auch mit der Amplify-Konsole (passwortgeschützt) verbunden, damit
Entwickler Aktualisierungen für andere Beteiligte freigeben können.

                                             17
AWS Amplify Console User Guide
                             Verwenden des GitFlow-Workflows

Verwenden des GitFlow-Workflows
GitFlow nutzt zwei Verzweigungen, um den Verlauf des Projekts zu erfassen. Die master-
Verzweigung verfolgt nur Versionscode nach und die Verzweigung develop (entwickeln) dient nur
als Integrationsverzweigung für neue Funktionen. GitFlow vereinfacht die parallele Entwicklung
durch die Isolierung neuer Entwicklungen von abgeschlossener Arbeit. Neue Entwicklungen (z. B.
Funktionen normale Fehlerbehebungen) erfolgen in Funktionsverzweigungen. Wenn der Entwickler
den Code zur Veröffentlichung freigeben möchte, wird die Funktionsverzweigung wieder mit der
Entwicklungsverzweigung zur Integration zusammengeführt. Die einzigen Commits an den master-Branch
sind Zusammenführungen aus Versionsverzweigungen und Hotfix-Verzweigungen (zur Notfallbehebung
von Fehlern). Das folgende Diagramm zeigt, welche Verzweigungen in diesem Modell in der Regel mit der
Amplify-Konsole verbunden sind.

                                            18
AWS Amplify Console User Guide
                                       Arten von Umleitungen

Verwenden von Umleitungen
    Umleitungen ermöglichen einem Webserver das Umleiten der Navigation von einer URL zu einer anderen.
    Häufige Gründe für die Verwendung von Umleitungen: Anpassen der URL-Darstellung, Vermeiden
    fehlerhafter Links, Verschieben des Hostingstandorts einer App oder Website ohne Änderung deren
    Adresse und Ändern einer angeforderten URL in das für eine Web-App erforderliche Format.

Arten von Umleitungen
    Es gibt mehrere Arten von Umleitungen, die bestimmte Szenarien unterstützen.

    Dauerhafte Umleitung (301)

    301-Umleitungen sind für dauerhafte Änderungen am Ziel einer Webadresse vorgesehen. Der Verlauf des
    Suchmaschinenrankings der ursprünglichen Adresse gilt für die neue Zieladresse. Die Umleitung erfolgt
    auf der Clientseite, daher wird in einer Browser-Navigationsleiste nach der Umleitung die Zieladresse
    angezeigt. Häufige Gründe für die Verwendung von 301-Umleitungen:

    • Vermeiden eines fehlerhaften Links beim Ändern der Adresse einer Seite
    • Vermeiden eines fehlerhaften Links, wenn ein Benutzer einen vorhersehbare Tippfehler in einer Adresse
      macht

    Temporäre Umleitung (302)

    302-Umleitungen sind für temporäre Änderungen am Ziel einer Webadresse vorgesehen. Der Verlauf des
    Suchmaschinenrankings der ursprünglichen Adresse gilt nicht für die neue Zieladresse. Die Umleitung
    erfolgt auf der Clientseite, daher wird in einer Browser-Navigationsleiste nach der Umleitung die
    Zieladresse angezeigt. Häufige Gründe für die Verwendung von 302-Umleitungen:

    • Bereitstellen eines Umleitungsziels, während an einer ursprünglichen Adresse Reparaturen
      vorgenommen werden
    • Bereitstellen von Testseiten für einen A/B-Vergleich der Benutzeroberfläche

    Umschreibung (200)

    200-Umleitungen (Umschreibungen) dienen zum Anzeigen von Inhalt an der Zieladresse, als würde er
    von der ursprünglichen Adresse bereitgestellt. Der Verlauf des Suchmaschinenrankings gilt weiterhin
    für die ursprüngliche Adresse. Die Umleitung erfolgt auf der Serverseite, daher wird in einer Browser-
    Navigationsleiste nach der Umleitung die ursprüngliche Adresse angezeigt. Häufige Gründe für die
    Verwendung von 200-Umleitungen:

    • Umleiten einer gesamten Website an einen neuen Hostingstandort, ohne die Adresse der Website zu
      ändern
    • Umleiten des gesamten Datenverkehrs an die Seite „index.html“ einer Single Page Web App (SPA) zur
      Verarbeitung durch eine clientseitige Routerfunktion

    Nicht gefunden (404)

    404-Umleitungen treten auf, wenn eine Anforderung auf eine nicht vorhandene Adresse verweist. Die
    Zielseite einer 404-Umleitung wird anstatt der angeforderten Seite angezeigt. Häufige Gründe für 404-
    Umleitungen:

                                                  19
AWS Amplify Console User Guide
                                      Bestandteile einer Umleitung

     • Vermeiden einer Meldung vom Typ „Fehlerhafter Link“, wenn ein Benutzer eine ungültige URL eingibt
     • Verweisen von Anforderungen an nicht vorhandene Seiten einer Web-App an die Seite „index.html“ zur
       Verarbeitung durch eine clientseitige Routerfunktion

Bestandteile einer Umleitung
     Umleitungen weisen folgende Bestandteile auf:

     • Ursprüngliche Adresse: Die vom Benutzer angeforderte Adresse.
     • Zieladresse: Adresse, die den Inhalt, der dem Benutzer angezeigt wird, tatsächlich bereitstellt.
     • Umleitungsart: Es gibt dauerhafte Umleitungen (301), temporäre Umleitungen (302), Umschreibungen
       (200) und Umleitungen vom Typ „Nicht gefunden“ (404).
     • Ländercode aus zwei Buchstaben (optional): Ein Wert, den Sie zum Segmentieren der
       Benutzererfahrung Ihrer App nach Region angeben können.

     Zum Erstellen und Bearbeiten von Umleitungen wählen Sie im linken Navigationsbereich die Option
     Rewrites and redirects settings (Einstellungen für Umschreibungen und Umleitungen).

     Zur Massenbearbeitung von Umleitungen in einem JSON-Editor wählen Sie Open text editor (Text-Editor
     öffnen).

Reihenfolge von Umleitungen
     Umleitungen werden in der Reihenfolge der Liste von oben nach unten ausgeführt. Stellen Sie sicher, dass
     Ihre Reihenfolge das vorgesehene Ergebnis erzielt. Beispiel: Die folgende Reihenfolge von Umleitungen
     bewirkt, dass alle Anforderungen für einen bestimmten Pfad unter /docs/ an denselben Pfad unter /
     documents/ umgeleitet werden, mit Ausnahme von /docs/bestimmter-dateiname.html, das an /documents/
     anderer-dateiname.html umgeleitet wird:

     /docs/specific-filename.html /documents/diferent-filename.html 301

                                                    20
AWS Amplify Console User Guide
                                          Einfache Umleitungen und Umschreibungen

    /docs/ /documents/

    Bei der folgenden Umleitungsreihenfolge wird die Umleitung von bestimmter-dateiname.html an anderer-
    dateiname.html ignoriert:

    /docs/ /documents/
    /docs/specific-filename.html /documents/diferent-filename.html 301

Einfache Umleitungen und Umschreibungen
    In diesem Abschnitt schließen wir Beispielcode für gängige Umleitungsszenarien ein.

    Sie können den folgenden Beispielcode verwenden, um eine bestimmte Seite dauerhaft an eine neue
    Adresse umzuleiten.

     Ursprüngliche Adresse                  Zieladresse                            Umleitungsart              Landesvorwahl

     /original.html                         /destination.html                      permanent redirect
                                                                                   (301)

    JSON: [{"source": "/original.html", "status": "301", "target": "/destination.html", "condition": null}]

    Sie können den folgenden Beispielcode verwenden, um einen beliebigen Pfad in einem Ordner an den
    gleichen Pfad in einem anderen Ordner umzuleiten.

     Ursprüngliche Adresse                  Zieladresse                            Umleitungsart              Landesvorwahl

     docs/                               /documents/                         permanent redirect
                                                                                   (301)

    JSON [{"source": "/docs/", "status": "301", "target": "/documents/", "condition": null}]

    Sie können den folgenden Beispielcode verwenden, um den gesamten Datenverkehr als Umschreibung an
    „index.html“ umzuleiten. In diesem Szenario wird die Seite dem Benutzer so angezeigt, als befände er sich
    an der ursprünglichen Adresse.

     Ursprüngliche Adresse                  Zieladresse                            Umleitungsart              Landesvorwahl

                                         index.html                             rewrite (200)

    JSON [{"source": "/", "status": "200", "target": "/index.html", "condition": null}]

    Sie können den folgenden Beispielcode verwenden, um mithilfe einer Umschreibung die Unterdomäne zu
    ändern, die dem Benutzer angezeigt wird.

     Ursprüngliche Adresse                  Zieladresse                            Umleitungsart              Landesvorwahl

     https://                               https://                               rewrite (200)
     mydomain.com                           www.mydomain.com

                                                                        21
AWS Amplify Console User Guide
                                         Umleitungen für Single Page Web Apps (SPA)

    JSON [{"source": "https://mydomain.com", "status": "200", "target": "https://www.mydomain.com", "condition": null}]

    Sie können den folgenden Beispielcode verwenden, um Pfade in einem Ordner, die nicht gefunden werden,
    an eine benutzerdefinierte 404-Seite umzuleiten.

     Ursprüngliche Adresse                   Zieladresse                            Umleitungsart                           Landesvorwahl

     /                                    /404.html                              not found (404)

    JSON [{"source": "/", "status": "404", "target": "/404.html", "condition": null}]

Umleitungen für Single Page Web Apps (SPA)
    Die meisten SPA-Frameworks unterstützen die HTML5-Methode „history.pushState()“ zum Ändern des
    Browserstandorts, ohne eine Serveranforderung auszulösen. Diese Methode funktioniert für Benutzer,
    die an der Stamm-URL (oder /index.html) beginnen, aber nicht für Benutzer, die direkt zu einer anderen
    Seite navigieren. Im folgenden Beispiel wird mithilfe von regulären Ausdrücken eine 200-Umschreibung
    zu „index.html“ für alle Dateien mit Ausnahme der im regulären Ausdruck festgelegten bestimmten
    Dateierweiterungen eingerichtet.

     Ursprüngliche Adresse                   Zieladresse                            Umleitungsart                           Landesvorwahl

    JSON [{"source": "", "status": "200", "target": "index.html", "condition": null}]

Reverseproxy-Umschreibung
    Im folgenden Beispiel wird Inhalt mithilfe einer Umschreibung per Proxy von einer anderen Adresse
    umgeleitet, sodass die Domäne für den Benutzer unverändert erscheint:

     Ursprüngliche Adresse                   Zieladresse                            Umleitungsart                           Landesvorwahl

     /images                                 https://            rewrite (200)
                                             images.otherdomain.com

    JSON [{"source": "/images", "status": "200", "target": "https://images.otherdomain.com", "condition": null}]

Nachstehende Schrägstriche und bereinigte URLs
    Zum Erstellen bereinigter URL-Strukturen wie about anstelle von about.html generieren Generatoren
    von statischen Seiten wie z. B. Hugo Verzeichnisse für Seiten mit „index.html“ (/about/index.html). Die

                                                                        22
AWS Amplify Console User Guide
                                                         Platzhalter

     Amplify-Konsole erstellt automatisch bereinigte URLs, indem bei Bedarf ein nachstehender Schrägstrich
     hinzugefügt wird. In der folgenden Tabelle sind verschiedene Szenarien hervorgehoben:

      Benutzereingaben im Browser                      URL in der Adressleiste                         Bereitgestelltes Dokument

      /about                                           /about                                          /about.html

      /about (when about.html                          /about/                                         /about/index.html
      returns 404)

      /about/                                          /about/                                         /about/index.html

Platzhalter
     Sie können den folgenden Beispielcode verwenden, um Pfade in einer Ordnerstruktur an eine
     entsprechende Struktur in einem anderen Ordner umzuleiten.

      Ursprüngliche Adresse               Zieladresse                          Umleitungsart                       Landesvorwahl

      /docs//                       /documents//                   permanent redirect
      //                     //                      (301)
                                  
     JSON [{"source": "/docs////", "status": "301", "target": "/documents////",
     "condition": null}]

Abfragezeichenfolgen und Pfadparameter
     Sie können den folgenden Beispielcode verwenden, um einen Pfad an einen Ordner mit einem Namen
     umzuleiten, der dem Wert eines Abfragezeichenfolgenelements in der ursprünglichen Adresse entspricht:

      Ursprüngliche Adresse               Zieladresse                          Umleitungsart                       Landesvorwahl

      /docs?id=
AWS Amplify Console User Guide
                                               Regionsbasierte Umleitungen

    JSON [{"source": "/documents///", "status": "404", "target": "/documents/index.html", "condition": null}]

Regionsbasierte Umleitungen
    Sie können den folgenden Beispielcode verwenden, um Anforderungen basierend auf der Region
    umzuleiten.

     Ursprüngliche Adresse                Zieladresse                         Umleitungsart                        Landesvorwahl

     /documents                           /documents/us/                      302                                  

    JSON [{"source": "/documents", "status": "302", "target": "/documents/us/", "condition": ""}]

                                                                   24
AWS Amplify Console User Guide

Beschränken des Zugriffs
   Passwortschutz für Funktionsverzweigungen, die nicht für den öffentlichen Zugriff bereit sind

   1. Wählen Sie App settings (App-Einstellungen) und wählen Sie dann Access control (Zugriffskontrolle).
   2. Wählen Sie in der Liste der verbundenen Verzweigungen rechts oben Manage access (Zugriff
      verwalten).

   3. Führen Sie einen der folgenden Schritte aus:
     • Sie können ein globales Passwort für alle verbundenen Verzweigungen festlegen. Wenn
       beispielsweise master, dev und feature verbunden sind, können Sie ein globales Passwort verwenden,
       um für alle Verzweigungen denselben Benutzernamen und dasselbe Passwort festzulegen.
     • Das Passwort kann auf Verzweigungsebene festgelegt werden.

                                                  25
AWS Amplify Console User Guide
                                     Syntax der YML-Spezifikation

Konfigurieren der Build-Einstellungen
    Die Amplify-Konsole erkennt durch Überprüfen der Datei „package.json“ in Ihrem Repository automatisch
    das Frontend-Framework und zugehörige Build-Einstellungen. Ihnen stehen folgende Optionen zur
    Verfügung:

    • Speichern der Build-Einstellungen in der Amplify-Konsole: Die Amplify-Konsole erkennt automatisch
      Build-Einstellungen und speichert sie, sodass über die Amplify-Konsole darauf zugegriffen werden kann.
      Diese Einstellungen gelten für alle Ihre Verzweigungen, es sei denn, in Ihrem Repository ist eine YML-
      Datei vorhanden.
    • Speichern der Build-Einstellungen in Ihrem Repository: Laden Sie die Datei „amplify.yml“ herunter und
      fügen Sie sie dem Stammverzeichnis Ihres Repositorys (oder dem Stammverzeichnis des App-Ordners
      für Monorepositorys) hinzu.

    Sie können diese Einstellungen in der Amplify-Konsole durch Auswählen von App Settings (App
    Einstellungen) > Build settings (Build-Einstellungen) bearbeiten. Diese Build-Einstellungen gelten für alle
    Verzweigungen in Ihrer App, mit Ausnahme der Verzweigungen, für die eine YML-Datei im Repository
    gespeichert ist.

Syntax der YML-Spezifikation
    Die YML-Datei mit der Build-Spezifikation enthält eine Sammlung von Build-Befehlen und zugehörige
    Einstellungen, die von der Amplify-Konsole zum Ausführen Ihres Builds verwendet werden. Die YML-Datei
    ist folgendermaßen strukturiert:

    version: 1.0
    env:
      variables:
           key: value
    backend:
      phases:
         preBuild:
           commands:
             - *enter command*
         build:
           commands:
             - *enter command*
         postBuild:
             commands:
             - *enter command*
    frontend:
      phases:
         preBuild:
           commands:
             - cd react-app
             - npm ci
         build:
           commands:
             - npm run build
      artifacts:
         files:
             - location
             - location
         discard-paths: yes
         baseDirectory: location

                                                   26
AWS Amplify Console User Guide
                                          Build-Szenarien

      cache:
        paths:
             - path
             - path

    • version: Dies ist die YML-Versionsnummer der Amplify-Konsole.
    • env: Fügen Sie diesem Abschnitt Umgebungsvariablen hinzu. Sie können Umgebungsvariablen auch
      mithilfe der Konsole hinzufügen.
    • backend: Führen Sie Amplify-CLI-Befehle aus, um ein Backend bereitzustellen und Lambda-Funktionen
      oder GraphQL-Schemata im Rahmen der kontinuierlichen Bereitstellung zu aktualisieren. Erfahren Sie,
      wie Sie ein Backend mit Ihrem Frontend bereitstellen (p. 13).
    • frontend: Führen Sie Build-Befehle für das Frontend aus.
    • Sowohl das Frontend als auch das Backend umfassen drei Phasen, welche jeweils die während der
      einzelnen Build-Sequenzen ausgeführten Befehle darstellen.
           • preBuild: Das preBuild-Skript wird vor dem Starten des tatsächlichen Builds, aber nach der
             Installation von Abhängigkeiten ausgeführt.
           • Build: Ihre Build-Befehle.
           • postBuild: Das postBuild-Skript wird ausgeführt, nachdem der Build abgeschlossen wurde und wir
             alle erforderlichen Artefakte in das Ausgabeverzeichnis kopiert haben.
    • artifacts > Basisverzeichnis: Das Verzeichnis, in dem sich Ihre Build-Artefakte befinden.
    • artifacts>files: Geben Sie Dateien aus Ihrem Artefakt an, das bereitgestellt werden soll. **/* steht für alle
      Dateien.

Build-Szenarien
    In den folgenden Szenarien wird beschrieben, wie Sie die YML-Datei für den Build schreiben.

    Verwenden von verzweigungsspezifischen Build-
    Einstellungen
    Zum Festlegen von verzweigungsspezifischen Build-Einstellungen, fügen Sie die Datei „buildspec.yml“ dem
    Stammverzeichnis Ihres Repositorys hinzu. Dazu haben Sie folgende Möglichkeiten:

    • Klicken Sie beim Verbinden einer neuen Verzweigung auf Bearbeiten. Nehmen Sie die gewünschten
      Änderungen vor und wählen Sie dann Save and add to my repo (Speichern und meinem Repository
      hinzufügen). Die Amplify-Konsole fügt die YML-Datei Ihrem Repository automatisch hinzu, wenn Sie die
      Verzweigung bereitstellen. Hinweis: Wenn diese Einstellungen nicht für alle Verzweigungen gelten sollen,
      achten Sie darauf, diese Datei nicht mit den anderen Verzweigungen zusammenzuführen.
    • Wählen Sie in der Amplify-Konsole App settings (App-Einstellungen), Build settings (Build-Einstellungen)
      und dann Download (Herunterladen). Nehmen Sie die gewünschten Änderungen vor und fügen Sie diese
      Datei dann dem Stammverzeichnis Ihres Repositorys hinzu.

    Navigieren zu einem Unterordner
    Für Monorepositorys möchten Benutzer in der Lage sein, einen Ordner zum Ausführen des Builds per
    Kommandozeilenbefehl zu öffnen. Nachdem Sie den Kommandozeilenbefehl ausgeführt haben, gilt er für
    alle Phasen Ihres Builds, sodass Sie ihn nicht in jeder einzelnen Phase wiederholen müssen.

    version: 1.0
    env:

                                                    27
AWS Amplify Console User Guide
                        Bereitstellen des Backends mit Ihrem Frontend

  variables:
      key: value
frontend:
  phases:
    preBuild:
      commands:
        - cd react-app
        - npm ci
    build:
      commands:
        - npm run build

Bereitstellen des Backends mit Ihrem Frontend
Verwenden Sie die Amplify-CLI zur Bereitstellung eines Backends mit Ihrem Frontend. Erfahren Sie
mehr (p. 13) über die bei Backend-Bereitstellungen hilfreichen envCache- und amplifyPush-Befehle.
„$AWS_BRANCH“ ist eine systemdefinierte Umgebungsvariable, welche die aktuelle Verzweigung abruft.
Mit den folgenden Build-Einstellungen wird eine neue Backend-Umgebung bereitgestellt, die mit jeder
Funktionsverzweigung verknüpft ist.

version: 1.0
env:
  variables:
       key: value
backend:
  phases:
     build:
       commands:
         - export STACKINFO="$(envCache --get stackInfo)"
         - amplifyPush --environment $AWS_BRANCH
         - envCache --set stackInfo "$(amplify env get --json --name $AWS_BRANCH)"

Festlegen des Ausgabeordners
Mit den folgenden Build-Einstellungen wird der öffentliche Ordner als Ausgabeordner festgelegt.

frontend:
  phases:
    commands:
      build:
        - yarn run build
  artifacts:
    baseDirectory: public

Installieren von Paketen als Teil Ihres Builds
Verwenden Sie npm oder Yarn zum Installieren von Paketen während der Build-Ausführung.

frontend:
  phases:
    build:
      commands:
        - npm install -g pkg-foo
        - pkg-foo deploy
        - yarn run build
  artifacts:
    baseDirectory: public

                                              28
AWS Amplify Console User Guide
                         Verwenden einer privaten npm-Registrierung

Verwenden einer privaten npm-Registrierung
Sie können eine private Registrierung als Umgebungsvariable hinzufügen oder Verweise darauf in Ihren
Build-Einstellungen hinzufügen.

build:
  phases:
    preBuild:
       commands:
         - npm config set    
         - npm config set   registry https://registry.npmjs.org
         - npm config set   always-auth true
         - npm config set   email hello@amplifyapp.com
         - yarn install

Installieren von OS-Paketen
Sie können OS-Pakete für fehlende Abhängigkeiten installieren.

build:
  phases:
    preBuild:
       commands:
         - yum install -y 

                                             29
AWS Amplify Console User Guide
                                 Festlegen von Umgebungsvariablen

Umgebungsvariablen
    Umgebungsvariablen sind Schlüsselwertpaare, die zur Erstellungszeit verfügbar sind. Bei diesen
    Konfigurationen kann es sich um beliebige Informationen handeln, einschließlich:

    • Datenbank-Verbindungsdetails
    • API-Schlüssel von Drittanbietern
    • Unterschiedliche Anpassungsparameter
    • Secrets

    Die Verwendung von Umgebungsvariablen ist eine bewährte Methode, um diese Konfigurationen verfügbar
    zu machen. Alle Umgebungsvariablen, die Sie hinzufügen, sind verschlüsselt, um unbefugten Zugriff zu
    verhindern. Daher können sie zum Speichern geheimer Informationen verwendet werden.

Festlegen von Umgebungsvariablen
    1. Wählen Sie in der Amplify-Konsole App settings (App-Einstellungen) und dann Environment Variables
       (Umgebungsvariablen).
    2. Geben Sie in den Feldern Schlüssel und Wert alle Umgebungsvariablen für Ihre App ein. Die Amplify-
       Konsole wendet die Umgebungsvariablen standardmäßig auf alle Verzweigungen an, daher müssen Sie
       Variablen beim Verbinden einer neuen Verzweigung nicht erneut eingeben.
    3. Wählen Sie Save aus.

    Wenn Sie eine Variable speziell für eine Verzweigung anpassen müssen, können Sie eine Überschreibung
    für diese Verzweigung hinzufügen. Dazu wählen Sie Actions (Aktionen) und dann Add variable
    override (Variablenüberschreibung hinzufügen). Sie verfügen jetzt über einen spezifischen Satz von
    Umgebungsvariablen für Ihre Verzweigung.

Zugreifen auf Umgebungsvariablen
    Für den Zugriff auf eine Umgebungsvariable während eines Builds bearbeiten Sie Ihre Build-Einstellungen
    so, dass die Umgebungsvariable in Ihren Build-Befehlen enthalten ist.

                                                 30
Sie können auch lesen
NÄCHSTE FOLIEN ... Stornieren