Benutzerdefinierte Header einrichten - AWS Amplify Hosten
Beispiel für benutzerdefinierte Sicherheits-HeaderBenutzerdefinierte Cache-Control-Header einrichten

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

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 Kopfzeilen bearbeiten die Informationen für Ihre benutzerdefinierten Kopfzeilen im benutzerdefinierten Header-Format ein. YAML

    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 Save (Speichern) aus.

  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 Herunterladen aus. YML

  5. Öffnen Sie die heruntergeladene customHttp.yml Datei im Code-Editor Ihrer Wahl und geben Sie die Informationen für Ihre benutzerdefinierten Header im benutzerdefinierten YAMLHeader-Format 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.

Beispiel für benutzerdefinierte Sicherheits-Header

Benutzerdefinierte Sicherheitsheader ermöglichen es, XSS Angriffe durchzusetzenHTTPS, zu verhindern und Ihren Browser vor Clickjacking zu schützen. 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 einrichten

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 bereitgestellt werden, die dieselbe Anfrage stellen.

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 (TTL) manuell erhöhen, indem Sie auf einen Wert aktualisierens-maxage, 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 Sie den Cache-Control-Header, um die Leistung der App zu erhöhen