Statische Website in App Engine hosten

Regions-ID

REGION_ID ist ein abgekürzter Code, den Google anhand der Region zuweist, die Sie beim Erstellen Ihrer Anwendung ausgewählt haben. Der Code bezieht sich nicht auf ein Land oder eine Provinz, auch wenn einige Regions-IDs häufig verwendeten Länder- und Provinzcodes ähneln können. Bei Anwendungen, die nach Februar 2020 erstellt wurden, ist REGION_ID.r in den App Engine-URLs enthalten. Bei Anwendungen, die vor diesem Datum erstellt wurden, ist die Regions-ID in der URL optional.

Hier finden Sie weitere Informationen zu Regions-IDs.

Sie können App Engine zum Hosten einer statischen Website verwenden. Statische Webseiten können clientseitige Technologien wie HTML, CSS und JavaScript enthalten, Das Hosten Ihrer statischen Website in App Engine kann weniger kosten als die Verwendung eines herkömmlichen Hosting-Anbieters, da die App Engine-Standardumgebung eine kostenlose Stufe bereitstellt.

In App Engine gehostete Websites werden unter der Subdomain REGION_ID.r.appspot.com gehostet, z. B. [my-project-id].uc.r.appspot.com. Nachdem Sie Ihre Website erstellt haben, können Sie Ihren eigenen Domainnamen der von App Engine gehosteten Website zuordnen.

Hinweis

Führen Sie folgende Schritte aus, bevor Sie Ihre Website in App Engine hosten:

  1. Erstellen Sie ein neues Google Cloud Console-Projekt oder rufen Sie die Projekt-ID eines vorhandenen Projekts ab:

    Zur Seite "Projekte"

  2. Installieren Sie die Google Cloud CLI und initialisieren Sie sie:

    SDK herunterladen

Website zum Hosten in Google App Engine erstellen

Grundstruktur des Projekts

In dieser Anleitung wird für das Projekt die folgende Struktur verwendet:

  • app.yaml: Konfigurationsdatei für die Einstellungen der App Engine-Anwendung
  • www/: Verzeichnis zum Speichern aller statischen Dateien, z. B. HTML, CSS, Bilder und JavaScript
    • css/: Verzeichnis zum Speichern von Stylesheets
      • style.css: einfaches Stylesheet zur Gestaltung Ihrer Website
    • images/: optionales Verzeichnis zum Speichern von Bildern
    • index.html: eine HTML-Datei, die die Inhalte der Website anzeigt
    • js/: optionales Verzeichnis zum Speichern von JavaScript-Dateien
    • Andere Anlagenverzeichnisse

app.yaml-Datei erstellen

Die Datei app.yaml ist eine Konfigurationsdatei, die App Engine mitteilt, wie URLs Ihren statischen Dateien zugeordnet werden. In den folgenden Schritten fügen Sie Handler hinzu, die www/index.html laden, sobald jemand Ihre Website besucht. Alle statischen Dateien werden im Verzeichnis www gespeichert und aufgerufen.

Erstellen Sie die Datei app.yaml im Stammverzeichnis Ihrer Anwendung:

  1. Erstellen Sie ein Verzeichnis mit dem Namen Ihrer Projekt-ID. Sie finden Ihre Projekt-ID in der Console.
  2. Erstellen Sie in dem Verzeichnis, das Sie gerade erstellt haben, eine Datei namens app.yaml.

  3. Bearbeiten Sie die Datei app.yaml und fügen Sie das Handler-Element entsprechend Ihren Websiteanforderungen hinzu. Die Datei app.yaml für die Python-Laufzeit kann beispielsweise so erstellt werden:

    runtime: python39

handlers:
- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /(.*)
  static_files: www/\1
  upload: www/(.*)

Weitere Informationen zur Datei app.yaml finden Sie in der app.yaml-Referenzdokumentation.

index.html-Datei erstellen

Erstellen Sie eine HTML-Datei, die bereitgestellt wird, sobald jemand zur Stammseite Ihrer Website navigiert. Speichern Sie diese Datei in Ihrem www-Verzeichnis.

<html>
  <head>
    <title>Hello, world!</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>
      This is a simple static HTML file that will be served from Google App
      Engine.
    </p>
  </body>
</html>

Anwendung in App Engine erstellen

Wenn Sie Ihre Anwendungsdateien erstellen, wird Ihre Website in App Engine hochgeladen. Führen Sie im Stammverzeichnis der Anwendung, in dem sich die app.yaml-Datei befindet, folgenden Befehl aus, um die Anwendung in App Engine bereitzustellen:

gcloud app deploy

Optionale Flags:

  • Verwenden Sie das Flag --project, um eine andere Google Cloud Console-Projekt-ID als jene anzugeben, die Sie in der gcloud CLI als Standard initialisiert haben. Beispiel: --project [YOUR_PROJECT_ID]
  • Verwenden Sie das Flag -v, um eine Versions-ID festzulegen, andernfalls wird eine neue erstellt. Beispiel: -v [YOUR_VERSION_ID]

Weitere Informationen zum Bereitstellen der Anwendung über die Befehlszeile finden Sie unter Anwendung bereitstellen.

App ansehen

Führen Sie den folgenden Befehl aus, um Ihren Browser zu starten und sich die Anwendung unter https://PROJECT_ID.REGION_ID.r.appspot.com anzeigen zu lassen:

gcloud app browse

Nächste Schritte

Benutzerdefinierte Domains zuordnen