Benutzerdefinierte Header

Mit benutzerdefinierten HTTP-Headern können Sie Header für jede HTTP-Antwort angeben. Response-Header können für Debugging-, Sicherheits- und Informationszwecke verwendet werden. Sie können Header in der Amplify-Konsole angeben oder indem Sie die customHttp.yml Datei einer App herunterladen, bearbeiten und im Stammverzeichnis des Projekts speichern. Die detaillierten Schritte finden Sie unter Benutzerdefinierte Header einrichten.

Bisher wurden benutzerdefinierte HTTP-Header für eine App angegeben, indem entweder die Build-Spezifikation (Buildspec) in der bearbeitet wurde AWS Management Console oder indem die amplify.yml Datei heruntergeladen und aktualisiert und im Stammverzeichnis des Projekts gespeichert wurde. Auf diese Weise angegebene benutzerdefinierte Header sollten aus der Buildspec und der Datei migriert werden. amplify.yml Anweisungen finden Sie unter Migrieren von benutzerdefinierten Headern.

Benutzerdefiniertes Header-YAML-Format

Geben Sie benutzerdefinierte Header im folgenden YAML-Format an:

customHeaders:
  - pattern: '*.json'
    headers:
    - key: 'custom-header-name-1'
      value: 'custom-header-value-1'
    - key: 'custom-header-name-2'
      value: 'custom-header-value-2'
  - pattern: '/path/*'
    headers:
    - key: 'custom-header-name-1'
      value: 'custom-header-value-2'

Verwenden Sie für ein Monorepo das folgende YAML-Format:

applications:
  - appRoot: app1
    customHeaders:
    - pattern: '**/*'
      headers:
      - key: 'custom-header-name-1'
        value: 'custom-header-value-1'
  - appRoot: app2
    customHeaders:
    - pattern: '/path/*.json'
      headers:
      - key: 'custom-header-name-2'
        value: 'custom-header-value-2'
    

Wenn Sie Ihrer App benutzerdefinierte Header hinzufügen, geben Sie Ihre eigenen Werte für Folgendes an:

pattern

Benutzerdefinierte Header werden auf alle URL-Dateipfade angewendet, die dem Muster entsprechen.

Header

Definiert die Header, die dem Dateimuster entsprechen.

Schlüssel

Der Name des benutzerdefinierten Headers.

Wert

Der Wert des benutzerdefinierten Headers.

Weitere Informationen zu HTTP-Headern finden Sie in Mozillas Liste der HTTP-Header.

Benutzerdefinierte Header einrichten

Es gibt zwei Möglichkeiten, benutzerdefinierte HTTP-Header für eine Amplify-App anzugeben. Sie können Header in der Amplify-Konsole angeben oder Sie können Header angeben, indem Sie die customHttp.yml Datei einer App herunterladen, bearbeiten und im Stammverzeichnis Ihres Projekts speichern.

Um benutzerdefinierte Header für eine App festzulegen und sie in der Konsole zu speichern

1. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

2. Wählen Sie die App aus, für die Sie benutzerdefinierte Header festlegen möchten.

3. Wählen Sie im Navigationsbereich Hosting und anschließend Benutzerdefinierte Header aus.

4. Wählen Sie auf der Seite Benutzerdefinierte Kopfzeilen die Option Bearbeiten aus.

5. Geben Sie im Fenster Benutzerdefinierte Header bearbeiten die Informationen für Ihre benutzerdefinierten Header im YAML-Format für benutzerdefinierte Header ein.

   1. Geben Sie für pattern das passende Muster ein.

   2. Geben Sie für key den Namen der benutzerdefinierten Kopfzeile ein.

   3. Geben Sie für value den Wert des benutzerdefinierten Headers ein.

6. Wählen Sie Speichern.

7. Stellen Sie die App erneut bereit, um die neuen benutzerdefinierten Header anzuwenden.

   • Navigieren Sie bei einer CI/CD-App zu dem Zweig, den Sie bereitstellen möchten, und wählen Sie Diese Version erneut bereitstellen aus. Sie können auch einen neuen Build von Ihrem Git-Repository aus ausführen.

   • Für eine App zur manuellen Bereitstellung stellen Sie die App erneut in der Amplify-Konsole bereit.

Um benutzerdefinierte Header für eine App festzulegen und sie im Stammverzeichnis Ihres Repositorys zu speichern

1. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

2. Wählen Sie die App aus, für die Sie benutzerdefinierte Header festlegen möchten.

3. Wählen Sie im Navigationsbereich Hosting und anschließend Benutzerdefinierte Header aus.

4. Wählen Sie auf der Seite Benutzerdefinierte Header die Option YML herunterladen aus.

5. Öffnen Sie die heruntergeladene customHttp.yml Datei im Code-Editor Ihrer Wahl und geben Sie die Informationen für Ihre benutzerdefinierten Header im YAML-Format für benutzerdefinierte Header ein.

   1. Geben Sie für pattern das passende Muster ein.

   2. Geben Sie für key den Namen der benutzerdefinierten Kopfzeile ein.

   3. Geben Sie für value den Wert des benutzerdefinierten Headers ein.

6. Speichern Sie die bearbeitete customHttp.yml Datei im Stammverzeichnis Ihres Projekts. Wenn Sie mit einem Monorepo arbeiten, speichern Sie die customHttp.yml Datei im Stammverzeichnis Ihres Repos.

7. Stellen Sie die App erneut bereit, um die neuen benutzerdefinierten Header anzuwenden.

   • Führen Sie für eine CI/CD-App einen neuen Build aus Ihrem Git-Repository aus, der die neue customHttp.yml Datei enthält.

   • Für eine App mit manueller Bereitstellung stellen Sie die App erneut in der Amplify-Konsole bereit und fügen Sie die neue customHttp.yml Datei mit den Artefakten hinzu, die Sie hochladen.

Anmerkung

Benutzerdefinierte Header, die in der customHttp.yml Datei festgelegt und im Stammverzeichnis der App bereitgestellt werden, überschreiben benutzerdefinierte Header, die im Abschnitt Benutzerdefinierte Header in der Amplify-Konsole definiert sind.

Migrieren von benutzerdefinierten Headern

Bisher wurden benutzerdefinierte HTTP-Header für eine App entweder durch Bearbeitung der Buildspec in der Amplify-Konsole oder durch Herunterladen und Aktualisieren der amplify.yml Datei und Speichern im Stammverzeichnis des Projekts angegeben. Es wird dringend empfohlen, dass Sie Ihre benutzerdefinierten Header aus der Buildspec und der Datei migrieren. amplify.yml

Geben Sie Ihre benutzerdefinierten Header im Abschnitt Benutzerdefinierte Header der Amplify-Konsole an oder indem Sie die Datei herunterladen und bearbeiten. customHttp.yml

Um benutzerdefinierte Header zu migrieren, die in der Amplify-Konsole gespeichert sind

1. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

2. Wählen Sie die App aus, für die die benutzerdefinierte Header-Migration durchgeführt werden soll.

3. Wählen Sie im Navigationsbereich Hosting, Build-Einstellungen aus. Im Abschnitt App-Build-Spezifikation können Sie die Buildspec Ihrer App überprüfen.

4. Wählen Sie Herunterladen, um eine Kopie Ihrer aktuellen Buildspec zu speichern. Sie können später auf diese Kopie verweisen, wenn Sie Einstellungen wiederherstellen müssen.

5. Wenn der Download abgeschlossen ist, wählen Sie Bearbeiten.

6. Notieren Sie sich die benutzerdefinierten Header-Informationen in der Datei, da Sie sie später in Schritt 9 verwenden werden. Löschen Sie im Bearbeitungsfenster alle benutzerdefinierten Header aus der Datei und wählen Sie Speichern.

7. Wählen Sie im Navigationsbereich Hosting, Benutzerdefinierte Header aus.

8. Wählen Sie auf der Seite Benutzerdefinierte Header die Option Bearbeiten aus.

9. Geben Sie im Fenster Benutzerdefinierte Kopfzeilen bearbeiten die Informationen für Ihre benutzerdefinierten Kopfzeilen ein, die Sie in Schritt 6 gelöscht haben.

10. Wählen Sie Speichern.

11. Stellen Sie alle Branches erneut bereit, auf die die neuen benutzerdefinierten Header angewendet werden sollen.

Um benutzerdefinierte Header von amplify.yml zu CustomHttp.yml zu migrieren

1. Navigieren Sie zu der amplify.yml Datei, die derzeit im Stammverzeichnis Ihrer App bereitgestellt ist.

2. Öffnen Sie amplify.yml im Code-Editor Ihrer Wahl.

3. Notieren Sie sich die benutzerdefinierten Header-Informationen in der Datei, da Sie sie später in Schritt 8 verwenden werden. Löschen Sie die benutzerdefinierten Header in der Datei. Speichern und schließen Sie die Datei.

4. Melden Sie sich bei der an AWS Management Console und öffnen Sie die Amplify-Konsole.

5. Wählen Sie die App aus, für die Sie benutzerdefinierte Header festlegen möchten.

6. Wählen Sie im Navigationsbereich Hosting, Benutzerdefinierte Header aus.

7. Wählen Sie auf der Seite Benutzerdefinierte Header die Option Herunterladen aus.

8. Öffnen Sie die heruntergeladene customHttp.yml Datei im Code-Editor Ihrer Wahl und geben Sie die Informationen für Ihre benutzerdefinierten Header ein, aus denen Sie amplify.yml in Schritt 3 gelöscht haben.

9. Speichern Sie die bearbeitete customHttp.yml Datei im Stammverzeichnis Ihres Projekts. Wenn Sie mit einem Monorepo arbeiten, speichern Sie die Datei im Stammverzeichnis Ihres Repos.

10. Stellen Sie die App erneut bereit, um die neuen benutzerdefinierten Header anzuwenden.

    • Führen Sie für eine CI/CD-App einen neuen Build aus Ihrem Git-Repository aus, der die neue customHttp.yml Datei enthält.

    • Für eine App mit manueller Bereitstellung stellen Sie die App erneut in der Amplify-Konsole bereit und fügen Sie die neue customHttp.yml Datei mit Artefakten hinzu, die Sie hochladen.

Anmerkung

Benutzerdefinierte Header, die in der customHttp.yml Datei festgelegt und im Stammverzeichnis der App bereitgestellt werden, überschreiben die benutzerdefinierten Header, die im Abschnitt Benutzerdefinierte Header der Amplify-Konsole definiert sind.

Benutzerdefinierte Monorepo-Header

Wenn Sie benutzerdefinierte Header für eine App in einem Monorepo angeben, beachten Sie die folgenden Einrichtungsanforderungen:

• Es gibt ein spezielles YAML-Format für ein Monorepo. Die korrekte Syntax finden Sie unter. Benutzerdefiniertes Header-YAML-Format

• Sie können benutzerdefinierte Header für eine Anwendung in einem Monorepo mithilfe des Abschnitts Benutzerdefinierte Header der Amplify-Konsole angeben. Sie müssen Ihre Anwendung erneut bereitstellen, um die neuen benutzerdefinierten Header anzuwenden.

• Als Alternative zur Verwendung der Konsole können Sie benutzerdefinierte Header für eine App in einem Monorepo in einer Datei angeben. customHttp.yml Sie müssen die customHttp.yml Datei im Stammverzeichnis Ihres Repos speichern und dann die Anwendung erneut bereitstellen, um die neuen benutzerdefinierten Header anzuwenden. In der customHttp.yml Datei angegebene benutzerdefinierte Header überschreiben alle benutzerdefinierten Header, die im Abschnitt Benutzerdefinierte Header der Amplify-Konsole angegeben wurden.

Beispiel für Sicherheitsheader

Benutzerdefinierte Sicherheitsheader ermöglichen die Durchsetzung von HTTPS, die Verhinderung von XSS-Angriffen und den Schutz Ihres Browsers vor Clickjacking. Verwenden Sie die folgende YAML-Syntax, um benutzerdefinierte Sicherheitsheader auf Ihre App anzuwenden.

customHeaders:
  - pattern: '**'
    headers:
      - key: 'Strict-Transport-Security'
        value: 'max-age=31536000; includeSubDomains'
      - key: 'X-Frame-Options'
        value: 'SAMEORIGIN'
      - key: 'X-XSS-Protection'
        value: '1; mode=block'
      - key: 'X-Content-Type-Options'
        value: 'nosniff'
      - key: 'Content-Security-Policy'
        value: "default-src 'self'"

Benutzerdefinierte Cache-Control-Header

Apps, die mit Amplify gehostet werden, berücksichtigen die vom Ursprung gesendeten Cache-Control Header, es sei denn, Sie überschreiben sie mit benutzerdefinierten Headern, die Sie definieren. Amplify wendet benutzerdefinierte Cache-Control-Header nur für erfolgreiche Antworten mit einem Statuscode an. 200 OK Dadurch wird verhindert, dass Fehlerantworten zwischengespeichert und anderen Benutzern, die dieselbe Anfrage stellen, zugestellt werden.

Sie können die s-maxage Direktive manuell anpassen, um mehr Kontrolle über die Leistung und Bereitstellungsverfügbarkeit Ihrer App zu haben. Um beispielsweise die Dauer zu verlängern, für die Ihre Inhalte am Edge zwischengespeichert bleiben, können Sie die Gültigkeitsdauer (Time to Live, TTL) manuell erhöhen, indem Sie s-maxage auf einen Wert aktualisieren, der länger als die Standardeinstellung 600 Sekunden (10 Minuten) ist.

Verwenden Sie das folgende YAML-Formats-maxage, um einen benutzerdefinierten Wert für anzugeben. In diesem Beispiel wird der zugehörige Inhalt 3600 Sekunden (eine Stunde) lang am Edge zwischengespeichert.

customHeaders:
  - pattern: '/img/*'
    headers:
      - key: 'Cache-Control' 
        value: 's-maxage=3600'

Weitere Informationen zur Steuerung der Anwendungsleistung mithilfe von Headern finden Sie unter. Verwenden von Headern zur Steuerung der Cache-Dauer