多くのアプリでは、ウェブ リクエストとは関連のないバックグラウンド処理を行う必要があります。このチュートリアルでは、ユーザーが翻訳するテキストを入力した後、以前の翻訳の一覧を表示するウェブアプリを作成します。翻訳は、ユーザーのリクエストをブロックしないようにバックグラウンド プロセスで行われます。
次の図は、翻訳リクエストのプロセスを示しています。
チュートリアル アプリが動作する際のイベントの順序は次のとおりです。
- ウェブページにアクセスすると、Firestore に保存されている以前の翻訳の一覧が表示されます。
- HTML フォームに入力してテキストの翻訳をリクエストします。
- 翻訳リクエストは Pub/Sub にパブリッシュされます。
- Cloud Run アプリが Pub/Sub メッセージを受信します。
- Cloud Run アプリが Cloud Translation を使用してテキストを翻訳します。
- Cloud Run アプリが結果を Firestore に保存します。
このチュートリアルは、Google Cloud でのバックグラウンド処理の詳細に関心をお持ちの方を対象としています。Pub/Sub、Firestore、App Engine、Cloud Run についての経験は必須要件ではありません。ただし、PHP、JavaScript、HTML の経験をお持ちであれば、すべてのコードを理解するうえで役立ちます。
目標
- Cloud Run サービスを理解し、デプロイします。
- 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 Run, 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 Run, 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 Run バックエンドについて
1 つの PHP 関数 translateString
を定義し、この関数を呼び出して Pub/Sub メッセージに応答するように Cloud Run サービスを構成します。
Firestore と Translation に接続するには、関数で複数の依存関係をインポートする必要があります。
Cloud Run は、最初に Firestore クライアントと Pub/Sub クライアントを初期化します。次に、Pub/Sub メッセージ データを解析して、翻訳するテキストとターゲット言語を取得します。
Translation API を使用して文字列を目的の言語に翻訳します。
重複した訳文が保存されないようにするために、翻訳リクエストに一意の名前を付けます。その後、同時実行によってアプリが同じ翻訳を誤って 2 回実行しないように、Firestore トランザクションで翻訳を行います。
Cloud Run バックエンドのビルドとデプロイ
backend
ディレクトリで Cloud Run アプリをビルドします。gcloud builds submit backend/ \ --tag gcr.io/PROJECT_ID/background-function
image タグを使用して、前のステップの Cloud Run アプリをデプロイします。
gcloud run deploy background-processing-function --platform managed \ --image gcr.io/PROJECT_ID/background-function --region REGION
REGION
は Google Cloud のリージョンです。デプロイが完了すると、コマンド出力にデプロイされたアプリの URL が表示されます。例:
Service [background-processing-function] revision [default-00002-vav] has been deployed and is serving 100 percent of traffic at https://default-c457u4v2ma-uc.a.run.app
次の手順のためにこの URL をコピーします。
Pub/Sub サブスクリプションの設定
メッセージがトピック translate
にパブリッシュされるたびに、Cloud Run アプリは Pub/Sub からメッセージを受信します。
組み込みの認証チェックによって、Cloud Run バックエンドを呼び出す権限を持つサービス アカウントの有効な認証トークンが Pub/Sub メッセージに含まれているかどうかが確認されます。
次の手順では、Cloud Run バックエンドへの認証済み呼び出しを行うための Pub/Sub トピック、サブスクリプション、サービス アカウントの設定について説明します。この統合の詳細については、サービス間の認証をご覧ください。
新しい翻訳リクエストをパブリッシュするためのトピック
translate
を作成します。gcloud pubsub topics create translate
プロジェクトで Pub/Sub 認証トークンを作成できるようにします。
gcloud projects add-iam-policy-binding PROJECT_ID \ --member=serviceAccount:service-PROJECT_NUMBER@gcp-sa-pubsub.iam.gserviceaccount.com \ --role=roles/iam.serviceAccountTokenCreator
PROJECT_NUMBER
は Google Cloud のプロジェクト番号です。この番号を確認するには、gcloud projects describe PROJECT_ID | grep projectNumber
を実行します。Pub/Sub サブスクリプションの ID を表すサービス アカウントを作成または選択します。
gcloud iam service-accounts create cloud-run-pubsub-invoker \ --display-name "Cloud Run Pub/Sub Invoker"
メモ:
cloud-run-pubsub-invoker
を使用できます。または、Google Cloud プロジェクト内で一意の名前に置き換えます。呼び出し元のサービス アカウントに、
background-processing-function
サービスを呼び出すための権限を付与します。gcloud run services add-iam-policy-binding background-processing-function \ --member=serviceAccount:cloud-run-pubsub-invoker@PROJECT_ID.iam.gserviceaccount.com \ --role=roles/run.invoker --platform managed --region REGION
Identity and Access Management の変更が反映されるまでに数分かかることがあります。その間に、サービスログに
HTTP 403
エラーが報告されることがあります。このサービス アカウントを使用して Pub/Sub サブスクリプションを作成します。
gcloud pubsub subscriptions create run-translate-string --topic translate \ --push-endpoint=CLOUD_RUN_URL \ --push-auth-service-account=cloud-run-pubsub-invoker@PROJECT_ID.iam.gserviceaccount.com
CLOUD_RUN_URL
は、バックエンドのビルドとデプロイを行った後でコピーした HTTPS URL です。--push-account-service-account
フラグは、認証と認可のために Pub/Sub の push 機能を有効にします。Pub/Sub サブスクリプションで使用するための Cloud Run サービス ドメインが自動的に登録されます。
アプリについて
ウェブアプリには主に次の 2 つのコンポーネントがあります。
-
ウェブ リクエストを処理するための PHP HTTP サーバー。サーバーには、次の 2 つのエンドポイントがあります。
/
: 既存のすべての翻訳を一覧表示し、ユーザーが新しい翻訳をリクエストする際に送信できるフォームを表示します。/request-translation
: フォーム送信はこのエンドポイントに送信され、Pub/Sub へのリクエストがパブリッシュされ、翻訳は非同期で処理されます。
- PHP サーバーによって既存の翻訳が入力された HTML テンプレート。
HTTP サーバー
app
ディレクトリ内のindex.php
が起動され、Lumen アプリの設定と HTTP ハンドラの登録が行われます。インデックス ハンドラ(
/
)は、Firestore から既存の翻訳をすべて取得し、そのリストを使用してテンプレートをレンダリングします。/request-translation
に登録されているリクエスト翻訳ハンドラは、HTML フォーム送信を解析してリクエストを検証し、メッセージを 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 コンポーネントを使用して、翻訳のリストと追加の翻訳をリクエストするフォームを表示します。
Cloud Shell でアプリを実行する
ウェブアプリをデプロイする前に、依存関係をインストールしてローカルで実行します。
まず、Composer を使用して依存関係をインストールします。 PHP 用 gRPC 拡張機能は必須ですが、Cloud Shell にはプリインストールされています。
composer install -d app
次に、PHP 組み込みのウェブサーバーを実行してアプリのサービスを提供します。
APP_DEBUG=true php -S localhost:8080 -t app
APP_DEBUG=true
フラグを指定すると、発生した例外がすべて表示されます。Cloud Shell で、[ウェブでプレビュー] をクリックし、[ポート 8080 でプレビュー] を選択します。新しいウィンドウが開き、実行中のアプリが表示されます。
ウェブアプリのデプロイ
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
デプロイ コマンドが正常に終了して、エラーを出力しなかったことを確認します。エラー(message=Build failed
など)が発生した場合は、それらを修正してから、もう一度 Cloud Run アプリのビルドとデプロイと App Engine アプリのデプロイを行います。Google Cloud Console で、[ログ エクスプローラ] ページに移動します。
- [最近選択したリソース] プルダウン リストで [GAE アプリケーション] をクリックし、[All module_id] をクリックします。アプリにアクセスした以降のリクエストのリストが表示されます。リクエストのリストが表示されない場合は、プルダウン リストで [All module_id] が選択されていることを確認します。エラー メッセージが Google Cloud コンソールに出力された場合は、アプリのコードがウェブアプリの理解に関するセクション内のコードと一致することを確認します。
- [最近選択したリソース] プルダウン リストで [Cloud Run のリビジョン] をクリックし、[すべてのログ] をクリックします。デプロイされたアプリの URL に送信された POST リクエストが表示されます。リクエストが表示されない場合は、Cloud Run と App Engine アプリが同じ Pub/Sub トピックを使用していること、Pub/Sub サブスクリプションが存在し、Cloud Run エンドポイントに push されていることを確認してください。
クリーンアップ
このチュートリアルで使用したリソースについて、Google Cloud アカウントに課金されないようにするには、リソースを含むプロジェクトを削除するか、プロジェクトを維持して個々のリソースを削除します。
Google 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 Run サービスを削除します。
gcloud run services delete background-processing-function
Cloud Run サービスは Google Cloud Console から削除することもできます。
このチュートリアルで作成した他の Google Cloud リソースを削除します。
- Pub/Sub トピック
translate
を削除します - Pub/Sub サブスクリプション
run-translate-string
を削除します。 gcr.io/PROJECT_ID/background-processing
という名前のコンテナ イメージを Container Registry から削除します。- 呼び出し元のサービス アカウント
cloud-run-pubsub-invoker@PROJECT_ID.iam.gserviceaccount.com
を削除します
- Pub/Sub トピック