Cette page a été traduite par l'API Cloud Translation.

Créer un service Web de base pour App Engine

Développez et testez localement un service Web diffusant un fichier HTML statique à l'aide de Flask. Créez ensuite les fichiers de configuration dont vous avez besoin pour déployer le service Web sur App Engine.

Dans cette étape, vous allez créer et tester localement une version d'un service Web qui affiche des données d'espace réservé. L'objectif est de vérifier que votre service Web de base fonctionne correctement avant d'activer Datastore et Firebase Authentication.

Avant de commencer

Si vous n'en avez pas encore créé un, créez un projet Google Cloud.
Si ce n'est pas déjà fait, configurez votre environnement local pour le développement Python 3 en procédant comme suit :
- Téléchargez et installez Python 3 pour développer votre service Web et exécuter Google Cloud CLI.
- Utilisez vos identifiants Google Cloud pour vous authentifier avec Google Cloud CLI et activer les tests en local avec Datastore :
```
gcloud auth application-default login
```
  Conseil : Pour des tests plus approfondis, nous vous recommandons de configurer un compte de service plutôt que d'utiliser des identifiants d'utilisateur final. Pour en savoir plus sur les comptes de service et sur les autres types d'authentification, consultez la page Présentation de l'authentification.

Structurer les fichiers de votre service Web

Le répertoire du projet dans lequel vous créez votre service Web utilisera la structure de fichiers suivante :

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

Les sections suivantes fournissent un exemple de configuration des fichiers dans votre répertoire de projet.

Écrire votre service Web

L'itération initiale de votre service Web utilise Flask pour diffuser un modèle HTML basé sur Jinja.

Pour configurer votre service Web, procédez comme suit :

Créez le fichier 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>

Ajoutez des comportements et des styles à l'aide des fichiers static/script.js et static/style.css :

'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;
}

Dans le fichier main.py, utilisez Flask pour effectuer le rendu de votre modèle HTML avec les données d'espace réservé :

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)

Configurez toutes les dépendances dont vous aurez besoin pour votre service Web dans le fichier requirements.txt :
```
Flask==3.0.0
```

Tester votre service Web

Testez votre service Web en l'exécutant localement dans un environnement virtuel :

macOS/Linux

Créez un environnement Python isolé :

python3 -m venv env
source env/bin/activate

Si vous n'êtes pas dans le répertoire qui contient l'exemple de code, accédez au répertoire qui contient l'exemple de code hello_world. Ensuite, installez les dépendances :
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Exécutez l'application :
```
python main.py
```
Dans votre navigateur Web, saisissez l'adresse suivante :
```
http://localhost:8080
```

Windows

Exécutez les packages Python à l'aide de PowerShell.

Localisez votre installation de PowerShell.
Cliquez avec le bouton droit sur le raccourci PowerShell et démarrez une session en tant qu'administrateur.

Créez un environnement Python isolé.

python -m venv env
.\env\Scripts\activate

Accédez au répertoire de votre projet et installez les dépendances : Si vous n'êtes pas dans le répertoire qui contient l'exemple de code, accédez au répertoire qui contient l'exemple de code hello_world. Ensuite, installez les dépendances :
```
cd YOUR_SAMPLE_CODE_DIR
pip install -r requirements.txt
```
Exécutez l'application :
```
python main.py
```
Dans votre navigateur Web, saisissez l'adresse suivante :
```
http://localhost:8080
```

Configurer votre service Web pour App Engine

Pour déployer votre service Web sur App Engine, vous avez besoin d'un fichier app.yaml. Ce fichier de configuration définit les paramètres du service Web pour App Engine.

Pour configurer votre service Web pour le déploiement sur App Engine, créez votre fichier app.yaml dans le répertoire racine de votre projet, par exemple 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

Notez que pour ce service Web simple, votre fichier app.yaml ne doit définir que le paramètre d'environnement d'exécution et les gestionnaires des fichiers statiques.

Pour les services Web plus complexes, vous pouvez configurer d'autres paramètres dans votre fichier app.yaml, comme le scaling, des gestionnaires supplémentaires et d'autres éléments d'application tels que les variables d'environnement et les noms des services. Pour toute information complémentaire et pour obtenir la liste complète des éléments acceptés dans ce fichier de configuration, consultez la documentation de référence sur le fichier app.yaml.

Étapes suivantes

Maintenant que vous avez configuré, créé et testé votre service Web, vous pouvez déployer cette version du service sur App Engine.

Créer un projet

Déployer votre service Web