GSP023

Présentation

Dans cet atelier, vous allez apprendre à déployer une application Web Flask de Python dans l'environnement flexible App Engine. L'exemple d'application permet à un utilisateur d'importer la photo du visage d'une personne et de mesurer la probabilité que cette personne soit contente. L'application utilise les API Google Cloud pour Vision, Storage et Datastore.

À propos d'App Engine

Les applications Google App Engine sont faciles à créer et à gérer. Grâce à leur caractère évolutif, elles s'adaptent en fonction de vos besoins en termes de trafic et de stockage des données. Avec App Engine, vous n'avez aucun serveur à gérer. Il vous suffit d'importer votre application : vous êtes alors prêt à démarrer.

Les applications App Engine s'adaptent automatiquement au volume de trafic entrant. Elles sont nativement compatibles avec l'équilibrage de charge, les microservices, les autorisations, les bases de données SQL et NoSQL, la répartition du trafic, la journalisation, la recherche, la gestion des versions, l'exécution de déploiements et de rollbacks et les analyses de sécurité. Toutes ces fonctionnalités sont également hautement personnalisables.

L'environnement flexible d'App Engine est compatible avec de nombreux langages de programmation, dont Java, Python, PHP, NodeJS, Ruby et Go. L'environnement standard est une option supplémentaire pour certains langages tels que Python. Ces deux environnements ont chacun leurs points forts et offrent ainsi une flexibilité maximale aux utilisateurs en termes de fonctionnement de l'application. Pour plus d'informations, consultez Choisir un environnement App Engine.

Points abordés

• Déployer une application Web simple dans l'environnement flexible App Engine
• Accéder aux bibliothèques clientes Google Cloud pour Vision, Storage et Datastore
• Utiliser Cloud Shell

Prérequis

• Connaissance de Python
• Connaissance des éditeurs de texte Linux standards tels que Vim, Emacs ou nano
• Accès à une photo montrant un visage

Prérequis

Avant de cliquer sur le bouton "Démarrer l'atelier"

Lisez ces instructions. Les ateliers sont minutés, et vous ne pouvez pas les mettre en pause. Le minuteur, qui démarre lorsque vous cliquez sur Démarrer l'atelier, indique combien de temps les ressources Google Cloud resteront accessibles.

Cet atelier pratique vous permet de suivre vous-même les activités dans un véritable environnement cloud, et non dans un environnement de simulation ou de démonstration. Nous vous fournissons des identifiants temporaires pour vous connecter à Google Cloud le temps de l'atelier.

Pour réaliser cet atelier :

• vous devez avoir accès à un navigateur Internet standard (nous vous recommandons d'utiliser Chrome) ;

Remarque : Ouvrez une fenêtre de navigateur en mode incognito/navigation privée pour effectuer cet atelier. Vous éviterez ainsi les conflits entre votre compte personnel et le temporaire étudiant, qui pourraient entraîner des frais supplémentaires facturés sur votre compte personnel.

• vous disposez d'un temps limité ; une fois l'atelier commencé, vous ne pouvez pas le mettre en pause.

Remarque : Si vous possédez déjà votre propre compte ou projet Google Cloud, veillez à ne pas l'utiliser pour réaliser cet atelier afin d'éviter que des frais supplémentaires ne vous soient facturés.

Démarrer l'atelier et se connecter à la console Google Cloud

1. Cliquez sur le bouton Démarrer l'atelier. Si l'atelier est payant, un pop-up s'affiche pour vous permettre de sélectionner un mode de paiement. Sur la gauche, vous trouverez le panneau Détails concernant l'atelier, qui contient les éléments suivants :

   • Le bouton Ouvrir la console Google
   • Le temps restant
   • Les identifiants temporaires que vous devez utiliser pour cet atelier
   • Des informations complémentaires vous permettant d'effectuer l'atelier

2. Cliquez sur Ouvrir la console Google. L'atelier lance les ressources, puis ouvre la page Se connecter dans un nouvel onglet.

   Conseil : Réorganisez les onglets dans des fenêtres distinctes, placées côte à côte.

   Remarque : Si la boîte de dialogue Sélectionner un compte s'affiche, cliquez sur Utiliser un autre compte.

3. Si nécessaire, copiez le nom d'utilisateur inclus dans le panneau Détails concernant l'atelier et collez-le dans la boîte de dialogue Se connecter. Cliquez sur Suivant.

4. Copiez le mot de passe inclus dans le panneau Détails concernant l'atelier et collez-le dans la boîte de dialogue de bienvenue. Cliquez sur Suivant.

   Important : Vous devez utiliser les identifiants fournis dans le panneau de gauche. Ne saisissez pas vos identifiants Google Cloud Skills Boost. Remarque : Si vous utilisez votre propre compte Google Cloud pour cet atelier, des frais supplémentaires peuvent vous être facturés.

5. Accédez aux pages suivantes :

   • Acceptez les conditions d'utilisation.
   • N'ajoutez pas d'options de récupération ni d'authentification à deux facteurs (ce compte est temporaire).
   • Ne vous inscrivez pas aux essais offerts.

Après quelques instants, la console Cloud s'ouvre dans cet onglet.

Remarque : Vous pouvez afficher le menu qui contient la liste des produits et services Google Cloud en cliquant sur le menu de navigation en haut à gauche.

Activer Cloud Shell

Cloud Shell est une machine virtuelle qui contient de nombreux outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud. Cloud Shell vous permet d'accéder via une ligne de commande à vos ressources Google Cloud.

1. Cliquez sur Activer Cloud Shell  en haut de la console Google Cloud.

Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET. Le résultat contient une ligne qui déclare YOUR_PROJECT_ID (VOTRE_ID_PROJET) pour cette session :

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

gcloud est l'outil de ligne de commande pour Google Cloud. Il est préinstallé sur Cloud Shell et permet la complétion par tabulation.

2. (Facultatif) Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

gcloud auth list

3. Cliquez sur Autoriser.

4. Vous devez à présent obtenir le résultat suivant :

Résultat :

ACTIVE: * ACCOUNT: student-01-xxxxxxxxxxxx@qwiklabs.net To set the active account, run: $ gcloud config set account `ACCOUNT`

5. (Facultatif) Vous pouvez lister les ID de projet à l'aide de cette commande :

gcloud config list project

Résultat :

[core] project = <ID_Projet>

Exemple de résultat :

[core] project = qwiklabs-gcp-44776a13dea667a6 Remarque : Pour consulter la documentation complète sur gcloud, dans Google Cloud, accédez au guide de présentation de la gcloud CLI.

Tâche 1 : Obtenir l'exemple de code

1. Dans Cloud Shell, exécutez la commande suivante pour cloner le dépôt GitHub :

gcloud storage cp -r gs://spls/gsp023/flex_and_vision/ .

2. Remplacez le répertoire par flex_and_vision :

cd flex_and_vision

Tâche 2 : Authentifier les requêtes API

Les API Datastore, Storage et Vision sont automatiquement activées pour vous dans cet atelier. Vous aurez besoin des identifiants du compte de service pour envoyer des requêtes aux API. Vous pouvez générer des identifiants à partir de votre projet à l'aide de gcloud dans Cloud Shell. Votre ID de projet se trouve sur l'onglet dans lequel vous avez démarré l'atelier.

1. Définissez une variable d'environnement pour votre ID de projet :

export PROJECT_ID=$(gcloud config get-value project)

2. Créez un compte de service pour accéder aux API Google Cloud lors de vos tests en local :

gcloud iam service-accounts create qwiklab \ --display-name "My Qwiklab Service Account"

3. Attribuez-lui les autorisations nécessaires :

gcloud projects add-iam-policy-binding ${PROJECT_ID} \ --member serviceAccount:qwiklab@${PROJECT_ID}.iam.gserviceaccount.com \ --role roles/owner

4. Ensuite, créez une clé de compte de service :

gcloud iam service-accounts keys create ~/key.json \ --iam-account qwiklab@${PROJECT_ID}.iam.gserviceaccount.com

Cette commande génère une clé de compte de service dans le fichier JSON key.json de votre répertoire d'accueil.

5. Définissez une variable d'environnement pour votre clé de compte de service à l'aide du chemin absolu de la clé générée :

export GOOGLE_APPLICATION_CREDENTIALS="/home/${USER}/key.json"

Pour en savoir plus sur l'authentification dans l'API Vision, consultez le guide de démarrage rapide Configurer l'API Vision.

Cliquez sur Vérifier ma progression ci-dessous pour valider votre progression dans l'atelier.

Authentifier les requêtes API

Tâche 3 : Tester l'application en local

Démarrer votre environnement virtuel et installer des dépendances

1. Créez un environnement Python 3 isolé nommé env à l'aide de virtualenv :

virtualenv -p python3 env

2. Saisissez votre virtualenv env nouvellement créé :

source env/bin/activate

3. À l'aide de pip, installez des dépendances pour votre projet à partir du fichier requirements.txt :

pip install -r requirements.txt

Le fichier requirements.txt est une liste des dépendances de package dont vous avez besoin pour votre projet. La commande ci-dessus a téléchargé toutes les dépendances de package recensées dans virtualenv.

Créer une application App Engine

1. Tout d'abord, créez une variable d'environnement avec la région qui vous a été attribuée :

AE_REGION={{{project_0.startup_script.app_region|REGION}}}

2. Créez ensuite une instance App Engine à l'aide de la commande suivante :

gcloud app create --region=$AE_REGION

Créer un bucket de stockage

1. Tout d'abord, indiquez comme variable d'environnement CLOUD_STORAGE_BUCKET le nom de votre PROJECT_ID. (Il est généralement recommandé d'utiliser votre PROJECT_ID comme nom de bucket pour plus de commodité.) :

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}

2. Exécutez la commande suivante pour créer un bucket portant le même nom que votre PROJECT_ID :

gsutil mb gs://${PROJECT_ID}

Cliquez sur Vérifier ma progression ci-dessous pour valider votre progression dans l'atelier.

Créer une application App Engine et un bucket Storage

Exécuter l'application

1. Exécutez la commande suivante pour démarrer votre application :

python main.py

2. Une fois l'application démarrée, cliquez sur l'icône Aperçu sur le Web dans la barre d'outils Cloud Shell, puis sur Prévisualiser sur le port 8080.

Un onglet s'ouvre dans votre navigateur et se connecte au serveur que vous venez de démarrer. Un message de ce type doit s'afficher :

Passons maintenant aux choses sérieuses.

3. Cliquez sur le bouton Sélectionner un fichier, recherchez dans votre ordinateur une image de visage humain, puis cliquez sur Envoyer.

Une fois la photo importée, un résultat semblable à ce qui suit va s'afficher :

Remarque : Lorsque le test en local de votre application est terminé, appuyez sur CTRL+C dans Cloud Shell pour arrêter le serveur Web local.

Cliquez sur Vérifier ma progression ci-dessous pour valider votre progression dans l'atelier.

Exécuter l'application

Tâche 4 : Explorer le code

Mise en page de l'exemple de code

L'exemple se présente de la façon suivante :

templates/ homepage.html /* HTML template that uses Jinja2 */ app.yaml /* App Engine application configuration file */ main.py /* Python Flask web application */ requirements.txt /* List of dependencies for the project */

main.py

Ce fichier Python est une application Web Flask. L'application permet aux utilisateurs d'envoyer des photos (de préférence des visages), qui sont stockées dans Cloud Storage et analysées à l'aide de la fonctionnalité de détection de visages de l'API Cloud Vision. Les informations clés concernant chaque photo sont stockées dans Datastore, la base de données NoSQL de Google Cloud. Elles sont consultées chaque fois qu'un utilisateur visite le site Web.

Cette application utilise les bibliothèques clientes de Google Cloud pour Storage, Datastore et Vision. Ces bibliothèques clientes facilitent l'accès aux API Cloud dans votre langage de programmation favori.

Jetons un coup d'œil à quelques extraits clés du code.

La section des importations en haut est l'endroit où nous importons les différents packages dont nous avons besoin pour notre code. Voici comment les bibliothèques clientes Google Cloud sont importées pour Datastore, Storage et Vision :

from google.cloud import datastore from google.cloud import storage from google.cloud import vision

Code décrivant ce qui se passe lorsqu'un utilisateur visite l'URL racine du site Web

Il s'agit du code qui décrit ce qui se passe lorsqu'un utilisateur visite l'URL racine du site Web. Un objet client Datastore est créé, et il est utilisé pour accéder à la bibliothèque cliente Datastore. Une requête sur Datastore est exécutée pour les entités de genre Faces (Visages). Enfin, le modèle HTML s'affiche, en passant dans image_entities qui est extrait de Datastore en tant que variable.

@app.route('/') def homepage(): # Create a Cloud Datastore client. datastore_client = datastore.Client() # Use the Cloud Datastore client to fetch information from Datastore about # each photo. query = datastore_client.query(kind='Faces') image_entities = list(query.fetch()) # Return a Jinja2 HTML template and pass in image_entities as a parameter. return render_template('homepage.html', image_entities=image_entities)

Examinons comment les entités sont enregistrées dans Datastore. Datastore est la solution de base de données NoSQL de Google Cloud. Les informations sont stockées dans des objets appelés entités. Chaque entité se voit attribuer une clé d'identification unique, qui peut être créée à l'aide d'un genre et d'une chaîne de nom de clé. Un genre est un bucket qui permet d'organiser les entités selon leur nature. Par exemple, vous pouvez définir des genres pour Photos, Contacts et Animaux.

Chaque entité peut avoir plusieurs propriétés définies par le développeur. Ces propriétés peuvent avoir des valeurs de différents types. Il peut s'agir, par exemple, de nombres entiers, de nombres à virgule flottante, de chaînes, de dates ou de données binaires :

# Create a Cloud Datastore client. datastore_client = datastore.Client() # Fetch the current date / time. current_datetime = datetime.now() # The kind for the new entity. kind = 'Faces' # The name/ID for the new entity. name = blob.name # Create the Cloud Datastore key for the new entity. key = datastore_client.key(kind, name) # Construct the new entity using the key. Set dictionary values for entity # keys blob_name, storage_public_url, timestamp, and joy. entity = datastore.Entity(key) entity['blob_name'] = blob.name entity['image_public_url'] = blob.public_url entity['timestamp'] = current_datetime entity['joy'] = face_joy # Save the new entity to Datastore. datastore_client.put(entity)

Les bibliothèques clientes Storage et Vision sont accessibles de manière automatisée, comme pour Datastore. Vous pouvez ouvrir le fichier main.py à l'aide de Vim, Emacs, ou nano pour découvrir tous les exemples de codes.

homepage.html

Le framework Web Flask utilise Jinja2 comme moteur de création de modèles. Cela permet de passer des variables et des expressions de main.py dans homepage.html, qui sont remplacées par des valeurs une fois la page affichée.

Pour en savoir plus sur Jinja2, consultez la documentation du concepteur de modèles.

Ce modèle HTML Jinja2 affiche un formulaire permettant aux utilisateurs d'envoyer des photos à la base de données. Il affiche également chaque image envoyée avec son nom de fichier, la date ou l'heure d'importation et la probabilité que le visage détecté par l'API Vision soit heureux.

<h1>Google Cloud Platform - Face Detection Sample</h1> <p>This Python Flask application demonstrates App Engine Flexible, Google Cloud Storage, Datastore, and the Cloud Vision API.</p> <br> <html> <body> <form action="upload_photo" method="POST" enctype="multipart/form-data"> Upload File: <input type="file" name="file"><br> <input type="submit" name="submit" value="Submit"> </form> {% for image_entity in image_entities %} <img src="{{image_entity['image_public_url']}}" width=200 height=200> <p>{{image_entity['blob_name']}} was uploaded {{image_entity['timestamp']}}.</p> <p>Joy Likelihood for Face: {{image_entity['joy']}}</p> {% endfor %} </body> </html>

Tâche 5 : Déployer l'application dans l'environnement flexible App Engine

L'environnement flexible App Engine décrit la configuration de déploiement d'une application à l'aide du fichier app.yaml. Si ce fichier est absent, App Engine tente de déterminer la configuration de déploiement. Toutefois, nous vous recommandons de fournir ce fichier.

1. Vous allez ensuite modifier app.yaml à l'aide de l'éditeur de votre choix, Vim, nano ou Emacs. Nous allons utiliser l'éditeur nano :

nano app.yaml

2. Une fois le fichier app.yaml ouvert, remplacez <your-cloud-storage-bucket> par le nom de votre bucket Cloud Storage. (Si vous avez oublié le nom de votre bucket Cloud Storage, copiez l'ID de projet figurant dans le panneau "Détails concernant l'atelier".)

La section env_variables définit des variables d'environnement qui seront utilisées dans le fichier main.py une fois l'application déployée.

3. Configurez ensuite l'application de façon à utiliser le scaling manuel en ajoutant ceci à la fin du fichier :

manual_scaling: instances: 1

4. Enfin, remplacez la valeur python_version égale à 3 par 3.7 pour que le déploiement dans App Engine réussisse.

Votre fichier devrait se présenter comme suit :

runtime: python env: flex entrypoint: gunicorn -b :$PORT main:app runtime_config: python_version: 3.7 env_variables: CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket> manual_scaling: instances: 1

Ce contenu indique la configuration de base nécessaire au déploiement d'une application Python 3 dans l'environnement flexible App Engine. Pour en savoir plus sur la configuration d'App Engine, consultez le guide Configurer votre application avec app.yaml.

5. Enregistrez et fermez le fichier dans nano :

• Appuyez sur CTRL+X.
• Lorsque vous y êtes invité, saisissez Y et appuyez sur ENTRÉE.

6. Mettez à jour le délai avant expiration de Cloud Build :

gcloud config set app/cloud_build_timeout 1000

7. Déployez votre application sur App Engine à l'aide de gcloud :

gcloud app deploy

Si l'invite Do you want to continue (Y/n) (Voulez-vous continuer (O/N)) s'affiche, saisissez Y, puis appuyez sur ENTRÉE.

Observez la création de l'application dans Cloud Shell. Cette opération peut prendre jusqu'à 10 minutes. L'environnement flexible App Engine provisionne automatiquement une machine virtuelle Compute Engine en arrière-plan, avant d'installer et de démarrer l'application.

8. Une fois l'application déployée, ouvrez l'application dans votre navigateur Web à l'aide de l'URL suivante :

https://<PROJECT_ID>.appspot.com Remarque : Si vous avez oublié votre PROJECT_ID, exécutez gcloud config list project dans Cloud Shell.

Cliquez sur Vérifier ma progression ci-dessous pour valider votre progression dans l'atelier.

Déployer l'application

Félicitations !

Félicitations ! Dans cet atelier, vous avez appris à créer et à déployer une application Web Python dans l'environnement flexible App Engine.

Étapes suivantes et informations supplémentaires

• Python sur Google Cloud
• Documentation sur l'environnement flexible App Engine pour Python
• Documentation sur les bibliothèques clientes Python : Datastore, Storage et Vision
• En savoir plus sur les bibliothèques clientes
• Exemples supplémentaires de code Python
• En savoir plus sur Flask

Formations et certifications Google Cloud

Les formations et certifications Google Cloud vous aident à tirer pleinement parti des technologies Google Cloud. Nos cours portent sur les compétences techniques et les bonnes pratiques à suivre pour être rapidement opérationnel et poursuivre votre apprentissage. Nous proposons des formations pour tous les niveaux, à la demande, en salle et à distance, pour nous adapter aux emplois du temps de chacun. Les certifications vous permettent de valider et de démontrer vos compétences et votre expérience en matière de technologies Google Cloud.

Dernière modification du manuel : 13 octobre 2023

Dernier test de l'atelier : 13 octobre 2023

Copyright 2024 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.