多くのアプリでは、ウェブ リクエストのコンテキストの外部でバックグラウンド処理を行う必要があります。このチュートリアルでは、ユーザーが翻訳するテキストを入力した後、以前の翻訳のリストを表示するウェブアプリを作成します。翻訳は、ユーザーのリクエストをブロックしないようにバックグラウンド プロセスで行われます。
次の図は、翻訳リクエストのプロセスを示しています。
チュートリアル アプリが動作する際のイベントの順序は次のとおりです。
- ウェブページにアクセスすると、Firestore に保存されている以前の翻訳のリストが表示されます。
- HTML フォームに入力してテキストの翻訳をリクエストします。
- 翻訳リクエストは Pub/Sub にパブリッシュされます。
- 対象の Pub/Sub トピックに登録されている Cloud 関数がトリガーされます。
- Cloud 関数は、Cloud Translation を使用してテキストを翻訳します。
- Cloud 関数は結果を Firestore に保存します。
このチュートリアルは、Google Cloud でのバックグラウンド処理の詳細に関心をお持ちの方を対象としています。Pub/Sub、Firestore、App Engine、Cloud Functions についての経験は必須要件ではありません。ただし、Python、JavaScript、HTML の経験をお持ちであれば、すべてのコードを理解するうえで役立ちます。
目標
- Cloud 関数を理解し、デプロイします。
- App Engine アプリを理解し、デプロイします。
- アプリを試してみます。
料金
このドキュメントでは、Google Cloud の次の課金対象のコンポーネントを使用します。
料金計算ツールを使うと、予想使用量に基づいて費用の見積もりを生成できます。
このドキュメントに記載されているタスクの完了後、作成したリソースを削除すると、それ以上の請求は発生しません。詳細については、クリーンアップをご覧ください。
準備
- Sign in to your Google Cloud account. If you're new to Google Cloud, create an account to evaluate how our products perform in real-world scenarios. New customers also get $300 in free credits to run, test, and deploy workloads.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
Enable the Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Make sure that billing is enabled for your Google Cloud project.
-
Enable the Firestore, Cloud Functions, Pub/Sub, and Cloud Translation APIs.
-
Google Cloud Console から、Cloud Shell でアプリを開きます。
Cloud Shell を使用すると、ブラウザからコマンドラインで直接クラウド リソースにアクセスできます。ブラウザで Cloud Shell を開き、[続行] をクリックしてサンプルコードをダウンロードし、アプリ ディレクトリに移動します。
- Cloud Shell で、
gcloud
ツールを構成して Google Cloud プロジェクトを使用します。# Configure gcloud for your project gcloud config set project YOUR_PROJECT_ID
Cloud 関数について
- この関数は、Firestore や Translation のようないくつかの依存関係をインポートすることから始まります。
- グローバル Firestore クライアントと Translation クライアントは、関数呼び出し間で再利用できるように初期化されます。これにより、実行速度の低下の要因となる、関数の呼び出しごとに新しいクライアントを初期化することが必要なくなります。
- 翻訳 API は、選択した言語に文字列を翻訳します。
-
Cloud Functions の関数は、まず Pub/Sub メッセージを解析して、翻訳するテキストと該当するターゲット言語を取得します。
次に、Cloud Function はテキストを翻訳し、トランザクションを使用して重複する翻訳がないことを確認して、Firestore に保存します。
Cloud 関数のデプロイ
Cloud Shell の
function
ディレクトリで、Pub/Sub トリガーを使用して Cloud Function をデプロイします。gcloud functions deploy Translate --runtime=python37 \ --entry-point=translate_message --trigger-topic=translate \ --set-env-vars GOOGLE_CLOUD_PROJECT=YOUR_GOOGLE_CLOUD_PROJECT
ここで
YOUR_GOOGLE_CLOUD_PROJECT
Google Cloud プロジェクト ID です。
アプリについて
ウェブアプリには主に次の 2 つのコンポーネントがあります。
-
ウェブ リクエストを処理する Python HTTP サーバー。サーバーには、次の 2 つのエンドポイントがあります。
/
: 既存のすべての翻訳を一覧表示し、ユーザーが新しい翻訳をリクエストする際に送信できるフォームを表示します。/request-translation
: フォーム送信はこのエンドポイントに送信され、Pub/Sub へのリクエストがパブリッシュされ、翻訳は非同期で処理されます。
- Python サーバーによって既存の翻訳が入力された HTML テンプレート。
HTTP サーバー
app
ディレクトリで、main.py
は依存関係のインポート、Flask アプリの作成、Firestore クライアントと Translation クライアントの初期化、サポートされる言語のリストの定義から開始します。インデックス ハンドラ(
/
)は、Firestore から既存の翻訳をすべて取得し、リストを使用して HTML テンプレートへの入力を行います。新しい翻訳をリクエストするには、HTML フォームを送信します。
/request-translation
に登録されているリクエスト翻訳ハンドラは、フォーム送信を解析してリクエストを検証し、メッセージを Pub/Sub にパブリッシュします。
HTML テンプレート
HTML テンプレートはユーザーに表示される HTML ページの基礎となり、以前の翻訳を表示して新しい翻訳をリクエストできます。HTTP サーバーは、既存の翻訳のリストを使用してテンプレートへの入力を行います。
- HTML テンプレートの
<head>
要素には、ページのメタデータ、スタイルシート、JavaScript が含まれます。このページでは、Material Design Lite(MDL)の CSS アセットと JavaScript アセットを取得します。MDL によって、ウェブサイトに Material Design の外観を追加できます。
ページは JQuery を使用してドキュメントの読み込みが完了するのを待ち、フォーム送信ハンドラを設定します。翻訳のリクエスト フォームが送信されるたびに、ページは最小限のフォームの検証を行い値が空でないことを確認してから、非同期リクエストを
/request-translation
エンドポイントに送信します。最後に、リクエストが成功したか、またはエラーが発生したかを示す MDL スナックバーが表示されます。
- ページの HTML 本文は、MDL レイアウトといくつかの MDL コンポーネントを使用して、翻訳のリストと追加の翻訳をリクエストするフォームを表示します。
ウェブアプリのデプロイ
App Engine スタンダード環境を使用すると、高負荷で大量のデータが存在する状況でも確実に動作するアプリをビルドしてデプロイできます。
このチュートリアルでは、App Engine スタンダード環境を使用して HTTP フロントエンドをデプロイします。
app.yaml
は App Engine アプリを構成します。
app.yaml
ファイルと同じディレクトリから、App Engine スタンダード環境にアプリをデプロイします。gcloud app deploy
アプリをテストする
Cloud 関数と App Engine アプリをデプロイしたら、翻訳のリクエストを試行します。
-
ブラウザでアプリを表示するには、次の URL を入力します。
https://PROJECT_ID.REGION_ID.r.appspot.com
以下を置き換えます。
PROJECT_ID
: Google Cloud プロジェクト IDREGION_ID
: App Engine がアプリに割り当てるコード
翻訳に関する空のリストと新しい翻訳をリクエストするためのフォームを掲載したページがあります。
- [翻訳するテキスト] フィールドに、翻訳するテキスト(
Hello, World
など)を入力します。 - テキストを翻訳する対象言語をプルダウン リストから選択します。
- [送信] をクリックします。
- ページを更新するには、[Refresh](更新)をクリックします。refresh翻訳リストに新しい行が追加されます。翻訳が表示されない場合は、数秒待ってからもう一度お試しください。それでも翻訳が表示されない場合は、アプリのデバッグに関する次のセクションをご覧ください。
アプリのデバッグ
App Engine アプリに接続できない場合や、新しい翻訳が表示されない場合は、次の点をご確認ください。
-
gcloud
デプロイ コマンドが正常に終了して、エラーを出力しなかったことを確認します。エラーが発生した場合は、それらを修正してから、もう一度 Cloud 関数のデプロイと App Engine アプリを試みます。 -
Google Cloud Console で、ログビューア ページに移動します。
[ログビューア] ページに移動- [最近選択したリソース] プルダウン リストで [GAE アプリケーション] をクリックし、[All module_id] をクリックします。アプリにアクセスした以降のリクエストのリストが表示されます。リクエストのリストが表示されない場合は、プルダウン リストで [All module_id ] が選択されていることを確認します。エラー メッセージが Cloud Console に出力された場合は、アプリのコードがアプリの理解に関するセクション内のコードと一致することを確認します。
-
[最近選択したリソース] プルダウン リストで、[Cloud Function] をクリックしてから、[すべての関数名] をクリックします。リクエストされた翻訳ごとに関数が表示されます。表示されない場合は、Cloud 関数と App Engine アプリが同じ Pub/Sub トピックを使用していることを確認します。
background/main.py
ファイルで、topic_name
が"translate"
であることを確認します。- Cloud 関数をデプロイする場合は、必ず
--trigger-topic=translate
フラグを含める必要があります。
クリーンアップ
このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、リソースを含むプロジェクトを削除するか、プロジェクトを維持して個々のリソースを削除します。
Cloud プロジェクトの削除
- In the Google Cloud console, go to the Manage resources page.
- In the project list, select the project that you want to delete, and then click Delete.
- In the dialog, type the project ID, and then click Shut down to delete the project.
App Engine インスタンスの削除
- In the Google Cloud console, go to the Versions page for App Engine.
- Select the checkbox for the non-default app version that you want to delete.
- アプリのバージョンを削除するには、[ 削除] をクリックします。
Cloud 関数の削除
- このチュートリアルで作成した Cloud 関数を削除します。
gcloud functions delete Translate
次のステップ
- その他の Cloud Functions チュートリアルをお試しください。
- App Engine の詳細を確認する
- Cloud Run を使用してみる(フルマネージド環境や独自の Google Kubernetes Engine クラスタでステートレス コンテナを実行できます)。