GSP023

概要

このラボでは、Python Flask ウェブ アプリケーションを App Engine フレキシブル環境にデプロイする方法について学びます。デプロイするアプリケーションはサンプル アプリケーションです。人の顔写真をアップロードして、その人が楽しい気分である可能性を調べることができます。このアプリケーションは、Vision、Storage、Datastore の Google Cloud API を使用しています。

App Engine について

Google App Engine アプリケーションは作成や管理が簡単で、トラフィックやデータ ストレージの需要の変動に合わせて容易にスケーリングできます。App Engine 環境では、サーバーを管理する手間がかかりません。必要な作業は、アプリケーションをアップロードすることだけです。

App Engine のアプリケーションは、受信したトラフィック量に応じて自動的にスケーリングします。また、App Engine はロード バランシングやマイクロサービス、認証、SQL データベース、NoSQL データベース、トラフィック分散、ロギング、検索、バージョニング、ロールアウトとロールバック、セキュリティ スキャニングにネイティブに対応しており、どれも高度にカスタマイズすることができます。

App Engine のフレキシブル環境は、Java、Python、PHP、NodeJS、Ruby、Go など、数多くのプログラミング言語に対応しています。スタンダード環境は、Python などの一部の言語に対応しています。2 つの環境はそれぞれに固有の長所があるため、開発者は自身のアプリケーションの特徴に応じて柔軟に選ぶことができます。詳しくは、App Engine 環境の選択をご確認ください。

学習内容

• App Engine フレキシブル環境にシンプルなウェブ アプリケーションをデプロイする方法
• Vision、Storage、Datastore の Google Cloud クライアント ライブラリにアクセスする方法
• Cloud Shell の使い方

前提条件

• Python の基本知識があること
• Linux の標準的なテキスト エディタ（vim、emacs、nano など）を使い慣れていること
• 人の顔が写っている写真を用意できること

設定と要件

[ラボを開始] ボタンをクリックする前に

こちらの説明をお読みください。ラボには時間制限があり、一時停止することはできません。タイマーは、Google Cloud のリソースを利用できる時間を示しており、[ラボを開始] をクリックするとスタートします。

このハンズオンラボでは、シミュレーションやデモ環境ではなく実際のクラウド環境を使って、ラボのアクティビティを行います。そのため、ラボの受講中に Google Cloud にログインおよびアクセスするための、新しい一時的な認証情報が提供されます。

このラボを完了するためには、下記が必要です。

• 標準的なインターネット ブラウザ（Chrome を推奨）

注: このラボの実行には、シークレット モード（推奨）またはシークレット ブラウジング ウィンドウを使用してください。これにより、個人アカウントと受講者アカウント間の競合を防ぎ、個人アカウントに追加料金が発生しないようにすることができます。

• ラボを完了するための時間（開始後は一時停止できません）

注: このラボでは、受講者アカウントのみを使用してください。別の Google Cloud アカウントを使用すると、そのアカウントに料金が発生する可能性があります。

ラボを開始して Google Cloud コンソールにログインする方法

1. [ラボを開始] ボタンをクリックします。ラボの料金をお支払いいただく必要がある場合は、表示されるダイアログでお支払い方法を選択してください。 右側の [ラボの設定とアクセス] パネルには、以下が表示されます。

   • [Google Cloud コンソールを開く] ボタン
   • このラボで使用する一時的な認証情報（ユーザー名とパスワード）
   • このラボを行うために必要なその他の情報（ある場合）

   ラボのタイマーはページの上部に表示され、残り時間が示されます。

2. [Google Cloud コンソールを開く] をクリックします（Chrome ブラウザを使用している場合は、右クリックして [シークレット ウィンドウで開く] を選択します）。

   ラボでリソースがスピンアップし、別のタブで [ログイン] ページが表示されます。

   ヒント: タブをそれぞれ別のウィンドウで開き、並べて表示しておきましょう。

   注: [アカウントの選択] ダイアログが表示された場合は、[別のアカウントを使用] をクリックします。

3. 必要に応じて、下のユーザー名をコピーして、[ログイン] ダイアログに貼り付けます。

   {{{user_0.username | "Username"}}}

   [ラボの設定とアクセス] パネルでもユーザー名を確認できます。

4. [次へ] をクリックします。

5. 以下のパスワードをコピーして、[ようこそ] ダイアログに貼り付けます。

   {{{user_0.password | "Password"}}}

   [ラボの設定とアクセス] パネルでもパスワードを確認できます。

6. [次へ] をクリックします。

   重要: ラボで指定された認証情報を使用する必要があります。ご自身の Google Cloud アカウントの認証情報は使用しないでください。 注: このラボでご自身の Google Cloud アカウントを使用すると、追加料金が発生する場合があります。

7. その後のページはクリックして先に進みます。

   • 利用規約に同意します。
   • 一時的なアカウントなので、復元オプションや 2 要素認証プロセスは設定しないでください。
   • 無料トライアルには登録しないでください。

しばらくすると、このタブで Google Cloud コンソールが開きます。

注: Google Cloud のプロダクトやサービスにアクセスするには、ナビゲーション メニューをクリックするか、[検索] フィールドにサービス名またはプロダクト名を入力します。

Cloud Shell をアクティブにする

Cloud Shell は、開発ツールと一緒に読み込まれる仮想マシンです。5 GB の永続ホーム ディレクトリが用意されており、Google Cloud で稼働します。Cloud Shell を使用すると、コマンドラインで Google Cloud リソースにアクセスできます。

1. Google Cloud コンソールの上部にある「Cloud Shell をアクティブにする」アイコン をクリックします。

2. ウィンドウで次の操作を行います。

   • Cloud Shell 情報ウィンドウで操作を進めます。
   • Cloud Shell が認証情報を使用して Google Cloud API を呼び出すことを承認します。

接続した時点で認証が完了しており、プロジェクトに各自の Project_ID、 が設定されます。出力には、このセッションの PROJECT_ID を宣言する次の行が含まれています。

Your Cloud Platform project in this session is set to {{{project_0.project_id | "PROJECT_ID"}}}

gcloud は Google Cloud のコマンドライン ツールです。このツールは、Cloud Shell にプリインストールされており、タブ補完がサポートされています。

3. （省略可）次のコマンドを使用すると、有効なアカウント名を一覧表示できます。

gcloud auth list

4. [承認] をクリックします。

出力:

ACTIVE: * ACCOUNT: {{{user_0.username | "ACCOUNT"}}} To set the active account, run: $ gcloud config set account `ACCOUNT`

5. （省略可）次のコマンドを使用すると、プロジェクト ID を一覧表示できます。

gcloud config list project

出力:

[core] project = {{{project_0.project_id | "PROJECT_ID"}}} 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

タスク 1. サンプルコードを取得する

1. Cloud Shell で次のコマンドを実行して、サンプルコードをコピーします。

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

2. flex_and_vision ディレクトリに移動します。

cd flex_and_vision

タスク 2. API リクエストを認証する

このラボでは、Datastore、Storage、Vision の各 API が自動的に有効になります。これらの API にリクエストを送信するには、サービス アカウントの認証情報が必要です。この認証情報は、Cloud Shell で gcloud を使用してプロジェクトから生成することができます。プロジェクト ID は、このラボを開始したタブで確認できます。

1. プロジェクト ID を表す環境変数を設定します。

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

2. ローカルでテストする際に Google Cloud API にアクセスするためのサービス アカウントを作成します。

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

3. 新しく作成したサービス アカウントに適切な権限を付与します。

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

4. サービス アカウントを作成したら、サービス アカウントキーを生成します。

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

このコマンドで、サービス アカウントキーが生成され、ホーム ディレクトリにある key.json という名前の JSON ファイルに保存されます。

5. 生成されたキーの絶対パスを使用して、サービス アカウントキーの環境変数を設定します。

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

Vision API に対する認証の詳細については、クイックスタート: Vision API のセットアップ ガイドをご覧ください。

下の [進行状況を確認] をクリックして、ラボの進行状況を確認してください。

API リクエストを認証する

タスク 3. アプリケーションをローカルでテストする

依存関係をインストールする

1. pip を使用して、プロジェクトの依存関係を requirements.txt ファイルからインストールします。

pip install -r requirements.txt

requirements.txt ファイルは、このプロジェクトに必要なパッケージ依存関係のリストです。上記のコマンドを実行すると、リスト内のすべてのパッケージ依存関係がこの virtualenv にダウンロードされます。

App Engine アプリを作成する

1. まず、割り当てたリージョンで環境変数を作成します。

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

2. 次に、以下のコマンドを使用して App Engine インスタンスを作成します。

gcloud app create --region=$AE_REGION

ストレージ バケットを作成する

1. まず、環境変数 CLOUD_STORAGE_BUCKET に PROJECT_ID の名前を設定します（利便性のため、バケット名は PROJECT_ID と同じ名前にすることを一般的におすすめします）。

export CLOUD_STORAGE_BUCKET=${PROJECT_ID}

2. 次に、下記のコマンドを実行し、PROJECT_ID と同じ名前のバケットを作成します。

gcloud storage buckets create gs://${PROJECT_ID}

下の [進行状況を確認] をクリックして、ラボの進行状況を確認してください。

App Engine アプリとストレージ バケットを作成する

アプリケーションを実行する

1. 下記のコマンドを実行してアプリケーションを起動します。

python main.py

2. アプリケーションが起動したら、Cloud Shell ツールバーの「ウェブでプレビュー」アイコン をクリックし、[ポート 8080 でプレビュー] を選択します。

ブラウザのタブが開き、起動したサーバーに接続されます。次のように表示されます。

ここからが面白いところです。

3. [ファイルを選択] ボタンをクリックし、人の顔が写っている写真をパソコンで選択して、[送信] をクリックします。

写真をアップロードすると、次のように表示されます。

注: アプリケーションのローカルテストが完了したら、Cloud Shell で CTRL+C キーを押してローカル ウェブサーバーをシャットダウンしてください。

下の [進行状況を確認] をクリックして、ラボの進行状況を確認してください。

アプリケーションを実行する

タスク 4. コードを確認する

サンプルコードのレイアウト

このサンプルは次のようなレイアウトになっています。

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

この Python ファイルは Flask ウェブ アプリケーションです。このアプリケーションでは、写真（できれば顔の写真）を送信すると、その写真が Cloud Storage に保存され、Cloud Vision API の顔検出機能を使用して分析されます。また、写真の主な情報が Datastore（Google Cloud の NoSQL データベース）に保存されて、ユーザーがウェブサイトを訪れるたびに参照されます。

このアプリケーションは、Storage、Datastore、Vision の Google Cloud クライアント ライブラリを使用しています。これらのクライアント ライブラリを使用すると、任意のプログラミング言語から簡単に Cloud API にアクセスできます。

コードの重要なスニペットについていくつか見てみましょう。

一番上の imports セクションは、コードに必要な各種パッケージをインポートする場所です。Datastore、Storage、Vision の Google Cloud クライアント ライブラリはこちらでインポートします。

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

ウェブサイトのルート URL にユーザーがアクセスしたときに実行する処理を指示するコード

次のコードは、ウェブサイトのルート URL にユーザーがアクセスしたときに実行する処理を表しています。まず、Datastore クライアント ライブラリへのアクセスに使用する Datastore クライアント オブジェクトが作成されます。次に、Datastore に対するクエリが実行されて、種類が「Faces」のエンティティが取得されます。最後に、HTML テンプレートがレンダリングされて、Datastore から抽出した image_entities が変数として渡されます。

@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)

次に、エンティティがどのように Datastore に保存されるかについて見ていきましょう。Datastore は、Google Cloud の NoSQL データベース ソリューションです。データは「エンティティ」と呼ばれるオブジェクトに保存され、各エンティティに固有の識別「キー」が割り当てられます。このキーは、「種類」と「キー名」の文字列を使用して作成されます。「種類」はエンティティを分類するためのもので、たとえば、「Photos」（写真）、「People」（人）、「Animals」（動物）などの種類を設定できます。

各エンティティには、開発者が定義した複数の「プロパティ」を割り当てることができます。プロパティでは、整数、浮動小数点数、文字列、日付、バイナリデータなど、さまざまな型の値を使用できます。

# 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)

Storage と Vision のクライアント ライブラリにプログラムでアクセスする方法も Datastore と同様です。「vim」、「emacs」、「nano」 を使用して main.py ファイルを開くと、すべてのサンプルコードを確認できます。

homepage.html

Flask ウェブ フレームワークでは、テンプレート エンジンに Jinja2 を使用しています。そのため、main.py から homepage.html に変数と式を渡して、ページがレンダリングされる際に値に置き換えることができます。

Jinja2 の詳細については、Template Designer Documentation をご覧ください。

この Jinja2 HTML テンプレートは、データベースに写真を送信するためのフォームを表示します。このフォームには、以前送信した写真も表示され、そのファイル名およびアップロード日時と、Vision API によって検出された顔の人物が楽しい気分である可能性が示されます。

<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>

タスク 5. アプリを App Engine フレキシブル環境にデプロイする

App Engine フレキシブル環境では、アプリケーションのデプロイ構成を記述した app.yaml というファイルを使用します。このファイルが存在しない場合は、App Engine がデプロイ構成を推定しますが、このファイルを指定することをおすすめします。

1. 次に、「vim」、「nano」、「emacs」 などの任意のエディタを使用して app.yaml に変更を加えます。ここでは nano エディタを使用します。

nano app.yaml

2. app.yaml を開いたら、<your-cloud-storage-bucket> を実際の Cloud Storage バケットの名前に置き換えます（Cloud Storage バケットの名前を忘れてしまった場合は、[ラボの詳細] パネルからプロジェクト ID をコピーしてください）。

env_variables セクションでは、アプリケーションのデプロイ後に main.py で使用する環境変数を設定します。

3. 次に、ファイルの最後に manual_scaling を追加して、手動スケーリングを使用するようにアプリを設定します。

manual_scaling: instances: 1

4. 最後に、App Engine を正常にデプロイするために、python_version を 3.12 に設定します。

以下のようなファイルになります。

runtime: python env: flex entrypoint: gunicorn -b :$PORT main:app runtime_config: operating_system: "ubuntu22" runtime_version: "3.12" env_variables: CLOUD_STORAGE_BUCKET: <your-cloud-storage-bucket> manual_scaling: instances: 1

これは、App Engine フレキシブル環境の Python 3 アプリケーションをデプロイするために必要な基本構成です。App Engine の構成の詳細については、app.yaml によるアプリの構成ガイドをご覧ください。

5. nano にファイルを保存して閉じます。

• CTRL+X キーを押します。
• プロンプトで、「Y」と入力して Enter キーを押します。

6. Cloud Build のタイムアウトを更新します。

gcloud config set app/cloud_build_timeout 1000

7. gcloud を使用してアプリを App Engine にデプロイします。

gcloud app deploy

[Do you want to continue (Y/n)] というメッセージが表示されたら、「Y」と入力して Enter キーを押します。

Cloud Shell でアプリケーションがビルドされていることを確認します。これには最長で 10 分ほどかかる場合があります。その間に、App Engine フレキシブル環境がバックグラウンドで Compute Engine 仮想マシンを自動的にプロビジョニングし、その後アプリケーションをインストールして起動します。

8. アプリケーションがデプロイされたら、次の URL をウェブブラウザで開きます。

https://<PROJECT_ID>.appspot.com 注: PROJECT_ID を忘れてしまった場合は、Cloud Shell から gcloud config list project を実行してください。

下の [進行状況を確認] をクリックして、ラボの進行状況を確認してください。

アプリをデプロイする

お疲れさまでした

これで完了です。このラボでは、Python ウェブ アプリケーションを作成して App Engine フレキシブル環境にデプロイする方法を学びました。

次のステップと詳細情報

• Google Cloud の Python
• App Engine フレキシブル環境での Python に関するドキュメント
• Python クライアント ライブラリのドキュメント: Datastore、Storage、Vision
• クライアント ライブラリの詳細
• Python コードのサンプル
• Flask の詳細

Google Cloud トレーニングと認定資格

Google Cloud トレーニングと認定資格を通して、Google Cloud 技術を最大限に活用できるようになります。必要な技術スキルとベスト プラクティスについて取り扱うクラスでは、学習を継続的に進めることができます。トレーニングは基礎レベルから上級レベルまであり、オンデマンド、ライブ、バーチャル参加など、多忙なスケジュールにも対応できるオプションが用意されています。認定資格を取得することで、Google Cloud テクノロジーに関するスキルと知識を証明できます。

マニュアルの最終更新日: 2026 年 5 月 20 日

ラボの最終テスト日: 2026 年 2 月 24 日

Copyright 2026 Google LLC. All rights reserved. Google および Google のロゴは Google LLC の商標です。その他すべての企業名および商品名はそれぞれ各社の商標または登録商標です。