Statische Dateien speichern und bereitstellen

Anwendungen müssen über die Verarbeitung von dynamischen Anfragen hinaus häufig auch statische Dateien wie JavaScript, Bilder und CSS bereitstellen. Anwendungen in der Standardumgebung können statische Dateien aus einer Google Cloud-Option wie Cloud Storage bereitstellen, sie direkt bereitstellen oder ein Content Delivery Network (CDN) eines Drittanbieters verwenden.

Das Hosting Ihrer statischen Website in Google Cloud ist kostengünstiger als bei einem herkömmlichen Hosting-Anbieter, da Google Cloud eine kostenlose Stufe bietet.

Dateien über Cloud Storage bereitstellen

In Cloud Storage können statische Inhalte für dynamische Webanwendungen gehostet werden. Die Verwendung von Cloud Storage anstelle der direkten Bereitstellung aus der Anwendung bietet folgende Vorteile:

  • Cloud Storage funktioniert im Wesentlichen wie ein Content Delivery Network. Eine spezielle Konfiguration ist dazu nicht erforderlich, da öffentlich lesbare Objekte standardmäßig im Cache des globalen Cloud Storage-Netzwerks gespeichert werden.
  • Ihre Anwendung wird dadurch entlastet, dass die Bereitstellung statischer Inhalte an Cloud Storage übergeben wird. Je nach Umfang der statischen Inhalte und Häufigkeit der Zugriffe können sich dadurch die Kosten für die Ausführung Ihrer Anwendung erheblich reduzieren.
  • Die Bandbreitengebühren für den Zugriff auf Inhalte können bei Cloud Storage oft geringer ausfallen.

Sie können Ihre Inhalte mit der Google Cloud CLI oder der Cloud Storage API in Cloud Storage hochladen.

Die Google Cloud-Clientbibliothek stellt einen idiomatischen Client für Cloud Storage zum Speichern und Abrufen von Daten mit Cloud Storage in einer App Engine-Anwendung bereit.

Beispiel für die Bereitstellung über einen Cloud Storage-Bucket

In diesem Beispiel werden ein Cloud Storage-Bucket erstellt und statische Assets mithilfe der gcloud CLI hochgeladen:

  1. Erstellen Sie einen Bucket. Es ist üblich, aber nicht erforderlich, dass Sie Ihren Bucket nach Ihrer Projekt-ID benennen. Der Bucket-Name muss global eindeutig sein.

    gcloud storage buckets create gs://<var>your-bucket-name</var>

  2. Legen Sie in der IAM-Richtlinie öffentlichen Lesezugriff auf Elemente im Bucket fest.

    gcloud storage buckets add-iam-policy-binding gs://<var>your-bucket-name</var> --member=allUsers --role=roles/storage.objectViewer

  3. Laden Sie Elemente in den Bucket hoch. Am schnellsten und einfachsten lassen sich Inhalte in der Regel mit dem Befehl rsync hochladen und aktualisieren. Mit cp ist dies ebenfalls möglich.

    gcloud storage rsync ./static gs://<var>your-bucket-name</var>/static --recursive

Sie können jetzt über https://storage.googleapis.com/<var>your-bucket-name</var>/static/... auf Ihre statischen Inhalte zugreifen.

Weitere Informationen zur Bereitstellung statischer Inhalte über Cloud Storage, einschließlich der Bereitstellung über einen benutzerdefinierten Domainnamen, finden Sie unter Statische Website hosten.

Dateien aus anderen Google Cloud-Diensten bereitstellen

Sie können auch Cloud CDN oder andere Google Cloud-Speicherdienste verwenden.

Dateien direkt aus der Anwendung bereitstellen

Wenn Sie statische Dateien in der Standardumgebung bereitstellen möchten, definieren Sie die Handler in Ihrer app.yaml-Datei mithilfe der Elemente static_dir oder static_files.

Die Inhalte in den statischen Dateien oder statischen Verzeichnissen sind von den Skalierungseinstellungen in der Datei app.yaml nicht betroffen. Anfragen an statische Dateien oder statische Verzeichnisse werden direkt von der App Engine-Infrastruktur bearbeitet. Sie erreichen nicht die Sprachlaufzeit der Anwendung.

Handler für statische Dateien konfigurieren

Wenn Sie die Anwendung für die Bereitstellung des Verzeichnisses ./public über die URL /static konfigurieren möchten, definieren Sie einen Handler in Ihrer app.yaml-Datei.

Im Folgenden wird gezeigt, wie die statischen Dateien des Verzeichnisses ./public einer Beispielanwendung bereitgestellt werden. Die Vorlage für die Seite index.html dieser Anwendung weist den Browser an, die Datei main.css zu laden, zum Beispiel:

<link type="text/css" rel="stylesheet" href="/static/css/main.css">

Das Verzeichnis ./public ist im Element static_dir der app.yaml-Datei des Projekts definiert:

handlers:
  - url: /favicon\.ico
    static_files: favicon.ico
    upload: favicon\.ico

  - url: /static
    static_dir: public

  - url: /.*
    secure: always
    redirect_http_response_code: 301
    script: auto

Im Abschnitt handlers im obigen Beispiel werden drei URL-Muster verarbeitet:

  • Der Handler /favicon.ico ordnet eine Anforderung speziell für /favicon.ico einer Datei namens favicon.ico im Stammverzeichnis der Anwendung zu.

  • Der Handler /static ordnet Anfragen für URLs zu, die mit /static beginnen. Wenn App Engine eine Anfrage für eine URL erhält, die mit /static beginnt, wird der Rest des Pfads den Dateien im Verzeichnis ./public zugeordnet. Wird im Verzeichnis eine entsprechende Datei gefunden, wird deren Inhalt an den Client zurückgegeben.

  • Der Handler /.* stimmt mit allen anderen URLs überein und leitet sie an Ihre Anwendung weiter.

URL-Pfadmuster werden in der Reihenfolge geprüft, in der sie in app.yaml aufgeführt sind. Das Muster für Ihre statischen Dateien sollte daher vor dem Muster /.* definiert werden. Weitere Informationen finden Sie in der Referenz zu app.yaml.

Beachten Sie, dass Sie zur Verwendung von statischen Handlern entweder das Element entrypoint in app.yaml oder einen Handler angeben müssen, bei dem script auf auto gesetzt ist.

Aus einem Content Delivery Network eines Drittanbieters bereitstellen

Sie können jedes externe CDN eines Drittanbieters verwenden, um Ihre statischen Dateien bereitzustellen und dynamische Anfragen im Cache zu speichern. Dadurch erhöht sich jedoch unter Umständen die Latenz Ihrer Anwendung und es können höhere Kosten anfallen.

Zur Verbesserung der Leistung sollten Sie ein Drittanbieter-CDN verwenden, das CDN Interconnect unterstützt.