Einfachen Webdienst für App Engine schreiben

Hier erfahren Sie, wie Sie einen Webdienst, der eine statische HTML-Datei mithilfe von Flask bereitstellt, schreiben und lokal testen. Anschließend erstellen Sie die Konfigurationsdateien, die zum Bereitstellen des Webdienstes in App Engine erforderlich sind.

In diesem Schritt erstellen Sie eine Version eines Webdienstes, der Platzhalterdaten anzeigt. Anschließend testen Sie den Dienst lokal. Damit soll dafür gesorgt werden, dass Ihr einfacher Webdienst funktioniert, bevor Sie die Datastore- und Firebase-Authentifizierung hinzufügen.

Hinweis

Erstellen Sie ein Google Cloud-Projekt, sofern nicht bereits geschehen.
Richten, falls noch nicht geschehen, Ihre lokale Umgebung für die Python 3-Entwicklung ein. Führen Sie dazu folgende Schritte aus:
- Laden Sie Python 3 herunter und installieren Sie es, um Ihren Webdienst zu entwickeln und Google Cloud CLI auszuführen.
- Verwenden Sie Ihre Google Cloud-Nutzeranmeldedaten zur Authentifizierung mit Google Cloud CLI und aktivieren Sie lokale Tests mit Datastore:
```
gcloud auth application-default login
```
  Tipp: Für umfangreichere Tests wird statt der Verwendung von Endnutzeranmeldedaten die Einrichtung eines Dienstkontos empfohlen. Weitere Informationen zu Dienstkonten und anderen Arten der Authentifizierung finden Sie unter Authentifizierungsübersicht.

Webdienstdateien strukturieren

Das Projektverzeichnis, in dem Sie Ihren Webdienst erstellen, hat die folgende Dateistruktur:

building-an-app/
- app.yaml
- main.py
- requirements.txt
- static/
  - script.js
  - style.css
- templates/
  - index.html

Die folgenden Abschnitte zeigen ein Beispiel für die Einrichtung der Dateien in Ihrem Projektverzeichnis.

Webdienst schreiben

Die erste Iteration Ihres Webdienstes verwendet Flask, um eine Jinja-basierte HTML-Vorlage bereitzustellen.

So richten Sie Ihren Webdienst ein:

Erstellen Sie die Datei templates/index.html:

<!doctype html>
<!--
 Copyright 2021 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<html>
<head>
  <title>Datastore and Firebase Auth Example</title>
  <script src="{{ url_for('static', filename='script.js') }}"></script>
  <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>

  <h1>Datastore and Firebase Auth Example</h1>

  <h2>Last 10 visits</h2>
  {% for time in times %}
    <p>{{ time }}</p>
  {% endfor %}

</body>
</html>

Fügen Sie Verhaltensweisen und Stile mit den Dateien static/script.js und static/style.css hinzu:

'use strict';

window.addEventListener('load', function () {

  console.log("Hello World!");

});

/**
 * Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

body {
  font-family: "helvetica", sans-serif;
  text-align: center;
}

Verwenden Sie in der Datei main.py Flask, um die HTML-Vorlage mit den Platzhalterdaten zu rendern:

import datetime

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def root():
    # For the sake of example, use static information to inflate the template.
    # This will be replaced with real information in later steps.
    dummy_times = [
        datetime.datetime(2018, 1, 1, 10, 0, 0),
        datetime.datetime(2018, 1, 2, 10, 30, 0),
        datetime.datetime(2018, 1, 3, 11, 0, 0),
    ]

    return render_template("index.html", times=dummy_times)

if __name__ == "__main__":
    # This is used when running locally only. When deploying to Google App
    # Engine, a webserver process such as Gunicorn will serve the app. This
    # can be configured by adding an `entrypoint` to app.yaml.
    # Flask's development server will automatically serve static files in
    # the "static" directory. See:
    # http://flask.pocoo.org/docs/1.0/quickstart/#static-files. Once deployed,
    # App Engine itself will serve those files as configured in app.yaml.
    app.run(host="127.0.0.1", port=8080, debug=True)

Konfigurieren Sie alle Abhängigkeiten, die Sie für Ihren Webdienst benötigen, in der Datei requirements.txt:
```
Flask==3.0.0
```

Webdienst testen

Testen Sie jetzt Ihren Webdienst. Führen Sie ihn dazu lokal aus und verwenden Sie eine virtuelle Umgebung:

Mac OS/Linux

Erstellen Sie eine isolierte Python-Umgebung:

python3 -m venv env
source env/bin/activate

Wenn Sie sich nicht in dem Verzeichnis befinden, das den Beispielcode enthält, wechseln Sie zu dem Verzeichnis, das den Beispielcode hello_world enthält: Installieren Sie dann Abhängigkeiten:
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Führen Sie die Anwendung aus:
```
python main.py
```
Geben Sie im Webbrowser die folgende Adresse ein:
```
http://localhost:8080
```

Windows

Führen Sie Ihre Python-Pakete mit PowerShell aus.

Wechseln Sie zu Ihrer Installation von PowerShell.
Klicken Sie mit der rechten Maustaste auf die Verknüpfung zu PowerShell und starten Sie diese als Administrator.
Erstellen Sie eine isolierte Python-Umgebung.
```
python -m venv env
.\env\Scripts\activate
```
Gehen Sie zu Ihrem Projektverzeichnis und installieren Sie die Abhängigkeiten: Wenn Sie sich nicht in dem Verzeichnis befinden, das den Beispielcode enthält, wechseln Sie zum Verzeichnis mit dem Beispielcode hello_world. Installieren Sie dann Abhängigkeiten:
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Führen Sie die Anwendung aus:
```
python main.py
```
Geben Sie im Webbrowser die folgende Adresse ein:
```
http://localhost:8080
```

Webdienst für App Engine konfigurieren

Zum Bereitstellen Ihres Webdiensts in App Engine benötigen Sie eine app.yaml-Datei. In dieser Konfigurationsdatei werden die Einstellungen Ihres Webdienstes für App Engine festgelegt.

Zum Konfigurieren Ihres Webdiensts für die Bereitstellung in App Engine erstellen Sie die Datei app.yaml im Stammverzeichnis Ihres Projekts, z. B. building-an-app:

# Copyright 2021 Google LLC
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
#      http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

runtime: python39

handlers:
  # This configures Google App Engine to serve the files in the app's static
  # directory.
- url: /static
  static_dir: static

  # This handler routes all requests not caught above to your main app. It is
  # required when static routes are defined, but can be omitted (along with
  # the entire handlers section) when there are no static files defined.
- url: /.*
  script: auto

Für diesen einfachen Webdienst müssen Sie in der Datei app.yaml nur die Laufzeiteinstellung und die Handler für statische Dateien festlegen.

Für komplexere Webdienste können Sie zusätzliche Einstellungen in app.yaml konfigurieren, zum Beispiel Skalierung, zusätzliche Handler und andere Anwendungselemente wie Umgebungsvariablen und Dienstnamen. Weitere Informationen und eine Liste aller unterstützten Elemente finden Sie in der Referenz zu app.yaml.

Nächste Schritte

Nachdem Sie jetzt den Webdienst konfiguriert, erstellt und getestet haben, können Sie diese Version des Webdiensts in App Engine bereitstellen.

Zurück

Projekt erstellen

Weiter

Webdienst bereitstellen