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 をアクティブにする」アイコン をクリックします。

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

Your Cloud Platform project in this session is set to YOUR_PROJECT_ID

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

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

gcloud auth list

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

4. 出力は次のようになります。

出力:

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

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

gcloud config list project

出力:

[core] project = <project_ID>

出力例:

[core] project = qwiklabs-gcp-44776a13dea667a6 注: Google Cloud における gcloud ドキュメントの全文については、gcloud CLI の概要ガイドをご覧ください。

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

1. Cloud Shell で、次のコマンドを実行して GitHub リポジトリのクローンを作成します。

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. virtualenv を使用して、env という名前の隔離された Python 3 環境を作成します。

virtualenv -p python3 env

2. 新たに作成した env という名前の virtualenv に入ります。

source env/bin/activate

3. 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 と同じ名前のバケットを作成します。

gsutil mb gs://${PROJECT_ID}

下の [進行状況を確認] をクリックして、ラボの進行状況を確認します。

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

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

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

python main.py

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

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

ここからさらに面白くなっていきます。

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

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

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

下の [進行状況を確認] をクリックして、ラボの進行状況を確認します。

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

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

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

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

templates/ homepage.html /* Jinja2 を使用する HTML テンプレート */ app.yaml /* App Engine アプリケーション構成ファイル */ main.py /* Python Flask ウェブ アプリケーション */ requirements.txt /* プロジェクトの依存関係のリスト */

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(): # Cloud Datastore クライアントを作成します。 datastore_client = datastore.Client() # 作成した Cloud Datastore クライアントを使用して、Datastore から # 写真の情報を取得します。 query = datastore_client.query(kind='Faces') image_entities = list(query.fetch()) # Jinja2 HTML テンプレートを返して、image_entities をパラメータとして渡します。 return render_template('homepage.html', image_entities=image_entities)

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

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

# Cloud Datastore クライアントを作成します。 datastore_client = datastore.Client() # 現在の日時を取得します。 current_datetime = datetime.now() # 新しいエンティティの種類。 kind = 'Faces' # 新しいエンティティの名前 / ID。 name = blob.name # 新しいエンティティの Cloud Datastore キーを作成します。 key = datastore_client.key(kind, name) # このキーを使用して新しいエンティティを作成します。エンティティ キー blob_name、 # storage_public_url、timestamp、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 # この新しいエンティティを 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 から 3.7 に変更します。

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

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

これは、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
• Google App Engine Python フレキシブル環境のドキュメント
• Python クライアント ライブラリのドキュメント: Datastore、Storage、Vision
• クライアント ライブラリの詳細
• Python コードのサンプル
• Flask の詳細

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

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

マニュアルの最終更新日: 2023 年 10 月 13 日

ラボの最終テスト日: 2023 年 10 月 13 日

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