AWS Amplify Console User Guide - AWS Amplify: Console User Guide - Amazon.com
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
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 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
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
Schritt 3: Rückkehr zur Amplify-Konsole ....................................................................................... 35
Verwalten Ihrer App-Leistung .............................................................................................................. 37
iv
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
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
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
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).
4AWS 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).
5AWS 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.
6AWS 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)
7AWS 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).
8AWS 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.
9AWS 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.
10AWS 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.
11AWS 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.
12AWS 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
13AWS 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.
14AWS 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.
15AWS 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
16AWS 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.
17AWS 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.
18AWS 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:
19AWS 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
20AWS 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
21AWS 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
22AWS 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": ""}]
24AWS 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.
25AWS 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
26AWS 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:
27AWS 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
28AWS 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
29AWS 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.
30Sie können auch lesen
