Google Chat アプリのデベロッパーは、変更のテストや複雑な問題のトラブルシューティングのために、コードのデバッグが必要になることがあります。Chat アプリのデバッグは、アプリのアーキテクチャ、アプリの機能、アプリのデプロイ方法、設定に応じて、さまざまな方法で行うことができます。
このページでは、ngrok を使用して HTTP Chat アプリをデバッグする方法について説明します。ngrok は、ローカル開発環境のテストに使用できる統合 Ingress プラットフォームです。このガイドでは、ローカル環境でコードの変更をテストし、リモート環境での問題のトラブルシューティングを行います。
ローカル開発環境からデバッグする
このセクションでは、ローカル環境で実行される Chat アプリを操作します。
図 1. ローカル開発環境でデバッグします。
ワークショップ
Node.js
Python
Java
前提条件
Node.js
- 最新バージョンの
node
とnpm
がローカル環境にインストールされていること。 最新バージョンの
nodemon
がローカル環境にインストールされていること。自動再読み込みに使用されます。npm install -g nodemon
メッセージ用に構成された HTTP Chat アプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するの説明に従って操作します。唯一の違いは、アプリ名を
Debug App
に、アプリの URL をhttp://example.com
などに設定する必要があることです。ローカル環境内でセットアップされ、デバッグ可能な IDE。このガイドでは、説明の便宜上、
Visual Studio Code
IDE とそのデフォルトのデバッグ機能を使用しています。Git
をローカル環境にインストールします。ngrok
アカウント。
Python
- 最新バージョンの
python3
がローカル環境にインストールされていること。 - ローカル環境にインストールされている最新バージョンの
pip
とvirtualenv
は、それぞれ Python パッケージと仮想環境の管理に使用されます。 - メッセージ用に構成された HTTP Chat アプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するの説明に従って操作します。唯一の違いは、アプリ名を
Debug App
に、アプリの URL をhttp://example.com
などに設定する必要があることです。 - ローカル環境内でセットアップされ、デバッグ可能な IDE。このガイドでは、説明の便宜上、
Visual Studio Code
IDE とそのデフォルトのデバッグ機能を使用しています。 Git
をローカル環境にインストールします。ngrok
アカウント。- 最新バージョンの
gcloud
がローカル環境にインストールされ、初期化されていること。
Java
- ローカル環境にインストールされている
Java SE 11's JDK
の最新の安定版。 - 最新バージョンの
Apache Maven
がローカル環境にインストールされている。Java プロジェクトの管理に使用されます。 - メッセージ用に構成された HTTP Chat アプリ。クイックスタート ガイドの前提条件、環境を設定する、アプリを Google Chat に公開するの説明に従って操作します。唯一の違いは、アプリ名を
Debug App
に、アプリの URL をhttp://example.com
などに設定する必要があることです。 - ローカル環境内でセットアップされ、デバッグ可能な IDE。このガイドでは、説明の便宜上、
Visual Studio Code
IDE とそのデフォルトのデバッグ機能を使用しています。 Git
をローカル環境にインストールします。ngrok
アカウント。- 最新バージョンの
gcloud
がローカル環境にインストールされ、初期化されていること。
localhost サービスを公開する
Chat アプリがアクセスできるように、ローカル環境をインターネットに接続する必要があります。ngrok
アプリケーションは、公開 URL に送信された HTTP リクエストをローカル環境にリダイレクトするために使用されます。
- ローカル環境のブラウザで、
ngrok
アカウントにログインします。 - アプリをインストールして、ローカル環境で
authtoken
を設定します。 ngrok
アカウントに静的ドメインを作成します。このガイドでは、そのドメインをNGROK_STATIC_DOMAIN
と表記します。
Chat アプリを構成する
すべての HTTP リクエストを静的ドメインに送信するように Chat アプリを構成します。
Google Cloud コンソールで、Google Chat API ページを開きます。
[構成] タブをクリックします。
[インタラクティブ機能] > [接続設定] に移動し、[App Url] テキスト フィールドの値を次のように設定します。
https://NGROK_STATIC_DOMAIN
NGROK_STATIC_DOMAIN
は、ngrok
アカウントの静的ドメインに置き換えます。[保存] をクリックします。
図 2. Chat アプリはすべての HTTP リクエストを静的ドメインに送信します。ngrok
公開サービスは、Chat アプリとローカルで実行されるアプリケーション コードとの間のブリッジとして機能します。
Chat アプリをテストする
Chat アプリは、ローカルでデプロイ、構成、テスト、デバッグ、自動再読み込みを行うことができます。
Node.js
GitHub からローカル環境に
googleworkspace/google-chat-samples
リポジトリのクローンを作成します。このリポジトリには、実行するアプリケーションのコードが含まれています。git clone https://github.com/googleworkspace/google-chat-samples.git
ローカル環境にインストールされている
Visual Studio Code
IDE で、次の操作を行います。- 新しいウィンドウで、フォルダ
google-chat-samples/node/basic-app
を開きます。 package.json
ファイルに 2 つのスクリプトを追加して、自動再読み込みデバッグ用にアプリケーションを構成します。{ ... "scripts": { ... "debug": "node --inspect index.js", "debug-watch": "nodemon --watch ./ --exec npm run debug" } ... }
ルート ディレクトリから、アプリケーションをインストールします。
npm install
ルート ディレクトリに
.vscode/launch.json
ファイルを作成して、スクリプトdebug-watch
をトリガーするDebug Watch
という名前の起動を作成して構成します。{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "launch", "name": "Debug Watch", "cwd": "${workspaceRoot}", "runtimeExecutable": "npm", "runtimeArgs": ["run-script", "debug-watch"] }] }
index.js
ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、前に追加したDebug Watch
構成を使用して実行とデバッグを開始します。これで、アプリケーションが実行され、ポート9000
で HTTP リクエストがリッスンされます。図 3. アプリケーションは実行され、ポート
9000
で HTTP リクエストを待機しています。
- 新しいウィンドウで、フォルダ
ローカル環境で
ngrok
アプリケーションを起動します。ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
は、ngrok
アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。図 4.
ngrok
サーバーが稼働してリダイレクトしているターミナル。また、
ngrok
アプリによってローカルホスト上でウェブ インターフェースが開始されます。ブラウザで開くことで、すべてのアクティビティをモニタリングできます。図 5.
ngrok
アプリケーションがホストするウェブ インターフェースに HTTP リクエストが表示されない。Chat アプリにダイレクト メッセージを送信してテストします。
Google Chat を開きます。
[チャットを新規作成]
をクリックします。ダイアログに Chat 用アプリの名前を入力します。
検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。
ダイレクト メッセージ スペースで、「
Hello
」と入力してenter
キーを押します。Chat アプリはデバッグ中のため、応答しません。
ローカル環境の
Visual Studio Code
を見ると、設定されたブレークポイントで実行が一時停止していることがわかります。図 6. 実行は、設定されたブレークポイントで一時停止します。
Google Chat がタイムアウトする前に、
Visual Studio Code
のデバッガから実行を再開すると、Chat 用アプリがYour message : Hello
と返信されます。HTTP リクエストとレスポンスのログは、ローカル環境の
ngrok
アプリケーションがホストするウェブ インターフェースから確認できます。図 7.
ngrok
アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。アプリの動作を変更するには、
Your message
をindex.json
のHere was your message
インライン35
に置き換えます。ファイルを保存すると、nodemon
は更新されたソースコードを使用してアプリケーションを自動的に再読み込みします。Visual Studio Code
はデバッグモードのままです。図 8. アプリケーションは実行され、コードの変更が読み込まれたポート
9000
で HTTP リクエストをリッスンします。今回は、スペースで 2 番目のメッセージ
Hello
を送信する代わりに、ローカル環境のngrok
アプリケーションによってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択し、Replay
をクリックします。前回と同様に、Chat アプリはアクティブにデバッグされているため、応答しません。Visual Studio Code
のデバッガから実行を再開すると、ローカル環境のngrok
アプリケーションでホストされているウェブ インターフェースから、更新されたバージョンのメッセージHere was your message : Hello
を含むレスポンスがアプリケーションによって生成されていることがわかります。
Python
アプリケーションのデフォルト認証情報に使用する新しいユーザー認証情報を取得します。
gcloud config set project PROJECT_ID gcloud auth application-default login
PROJECT_ID
は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。GitHub からローカル環境に
googleworkspace/google-chat-samples
リポジトリのクローンを作成します。このリポジトリには、アプリケーション コードが含まれています。git clone https://github.com/googleworkspace/google-chat-samples.git
ローカル環境にインストールされている
Visual Studio Code
IDE で、次の操作を行います。- 新しいウィンドウで、フォルダ
google-chat-samples/python/avatar-app
を開きます。 Python
env
用の新しい仮想環境を作成して有効にします。virtualenv env
source env/bin/activate
仮想環境に
pip
を使用して、すべてのプロジェクト依存関係をインストールします。pip install -r requirements.txt
ルート ディレクトリに
.vscode/launch.json
ファイルを作成し、仮想環境env
のデバッグモードのポート9000
でモジュールfunctions-framework
からアプリケーションをトリガーするDebug Watch
という名前の起動を構成します。{ "version": "0.2.0", "configurations": [{ "type": "python", "request": "launch", "name": "Debug Watch", "python": "${workspaceFolder}/env/bin/python3", "module": "functions_framework", "args": [ "--target", "hello_chat", "--port", "9000", "--debug" ] }] }
main.py
ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、前に追加したDebug Watch
構成を使用して実行とデバッグを開始します。これで、アプリケーションが実行され、ポート9000
で HTTP リクエストがリッスンされます。図 3. アプリケーションは実行され、ポート
9000
で HTTP リクエストを待機しています。
- 新しいウィンドウで、フォルダ
ローカル環境で
ngrok
アプリケーションを起動します。ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
は、ngrok
アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。図 4.
ngrok
サーバーが稼働してリダイレクトしているターミナル。また、
ngrok
アプリによってローカルホスト上でウェブ インターフェースが開始されます。ブラウザで開くことで、すべてのアクティビティをモニタリングできます。図 5.
ngrok
アプリケーションがホストするウェブ インターフェースに HTTP リクエストが表示されない。Chat アプリにダイレクト メッセージを送信してテストします。
Google Chat を開きます。
[チャットを新規作成]
をクリックします。ダイアログに Chat 用アプリの名前を入力します。
検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。
ダイレクト メッセージ スペースで、「
Hey!
」と入力してenter
キーを押します。Chat アプリはデバッグ中のため、応答しません。
ローカル環境の
Visual Studio Code
を見ると、設定されたブレークポイントで実行が一時停止していることがわかります。図 6. 実行は、設定されたブレークポイントで一時停止します。
Google Chat がタイムアウトする前に
Visual Studio Code
のデバッガから実行を再開すると、Chat アプリはメッセージ内にあなたの名前とアバターの画像を返します。HTTP リクエストとレスポンスのログは、ローカル環境の
ngrok
アプリケーションがホストするウェブ インターフェースから確認できます。図 7.
ngrok
アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。アプリケーションの動作を変更するには、
Hello
をmain.py
ファイルのHey
インライン51
に置き換えます。ファイルを保存すると、Visual Studio Code
は更新されたソースコードでアプリケーションを自動的に再読み込みし、デバッグモードのままです。図 8. アプリケーションは実行され、コードの変更が読み込まれたポート
9000
で HTTP リクエストをリッスンします。今回は、スペースで 2 番目のメッセージ
Hey!
を送信する代わりに、ローカル環境のngrok
アプリケーションによってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択し、Replay
をクリックします。前回と同様に、Chat アプリはデバッグ中のため、応答しません。Visual Studio Code
のデバッガから実行を再開すると、ローカル環境のngrok
アプリケーションによってホストされているウェブ インターフェースから、更新されたバージョンのメッセージを含むレスポンスがアプリケーションが生成していることを確認できます。
Java
アプリケーションのデフォルト認証情報に使用する新しいユーザー認証情報を取得します。
gcloud config set project PROJECT_ID gcloud auth application-default login
PROJECT_ID
は、アプリの Cloud プロジェクトのプロジェクト ID に置き換えます。GitHub からローカル環境に
googleworkspace/google-chat-samples
リポジトリのクローンを作成します。このリポジトリには、アプリケーション コードが含まれています。git clone https://github.com/googleworkspace/google-chat-samples.git
ローカル環境にインストールされている
Visual Studio Code
IDE で、次の操作を行います。- 新しいウィンドウで、フォルダ
google-chat-samples/java/avatar-app
を開きます。 pom.xml
ファイルに Cloud Functions Framework ビルド プラグインfunction-maven-plugin
を追加して、ポート9000
でアプリケーションHelloChat
をローカルで実行するように Maven プロジェクトを構成します。... <plugin> <groupId>com.google.cloud.functions</groupId> <artifactId>function-maven-plugin</artifactId> <version>0.11.0</version> <configuration> <functionTarget>HelloChat</functionTarget> <port>9000</port> </configuration> </plugin> ...
これで、デバッグモードでローカルで起動できるようになりました。
mvnDebug function:run Preparing to execute Maven in debug mode Listening for transport dt_socket at address: 8000
ルート ディレクトリに
.vscode/launch.json
ファイルを作成し、以前にポート8000
で起動したアプリケーションに接続するRemote Debug Watch
という名前の起動を構成します。{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Remote Debug Watch", "projectName": "http-function", "hostName": "localhost", "port": 8000 }] }
HelloChat.java
ファイルに HTTP リクエストの処理を一時停止するブレークポイントを追加し、前に追加したRemote Debug Watch
構成を使用して接続とデバッグを開始します。アプリケーションは現在実行され、ポート9000
で HTTP リクエストをリッスンしています。図 3. アプリケーションが実行され、ポート
9000
で HTTP リクエストをリッスンしています。
- 新しいウィンドウで、フォルダ
ローカル環境で
ngrok
アプリケーションを起動します。ngrok http --domain=NGROK_STATIC_DOMAIN 9000
NGROK_STATIC_DOMAIN
は、ngrok
アカウントの静的ドメインに置き換えます。これで、すべてのリクエストがローカル環境とアプリケーションで使用されるポートにリダイレクトされます。図 4.
ngrok
サーバーが稼働してリダイレクトしているターミナル。また、
ngrok
アプリによってローカルホスト上でウェブ インターフェースが開始されます。ブラウザで開くことで、すべてのアクティビティをモニタリングできます。図 5.
ngrok
アプリケーションがホストするウェブ インターフェースに HTTP リクエストが表示されない。Chat アプリにダイレクト メッセージを送信してテストします。
Google Chat を開きます。
[チャットを新規作成]
をクリックします。ダイアログに Chat 用アプリの名前を入力します。
検索結果で Chat アプリを見つけて、[追加] > [Chat] をクリックします。
ダイレクト メッセージ スペースで、「
Hey!
」と入力してenter
キーを押します。Chat アプリはデバッグ中のため、応答しません。
ローカル環境の
Visual Studio Code
を見ると、設定されたブレークポイントで実行が一時停止していることがわかります。図 6. 実行は、設定されたブレークポイントで一時停止します。
Google Chat がタイムアウトする前に
Visual Studio Code
のデバッガから実行を再開すると、Chat アプリはメッセージ内にあなたの名前とアバターの画像を返します。HTTP リクエストとレスポンスのログは、ローカル環境の
ngrok
アプリケーションがホストするウェブ インターフェースから確認できます。図 7.
ngrok
アプリケーションがホストするウェブ インターフェースからの HTTP リクエスト。アプリケーションの動作を変更するには、
Hello
をHelloChat.java
ファイルのHey
インライン55
に置き換え、mvnDebug
プロセスを再起動し、Remote Debug Watch
を再起動して再アタッチしてデバッグを再開します。今回は、スペースで 2 番目のメッセージ
Hey!
を送信する代わりに、ローカル環境のngrok
アプリケーションによってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択し、Replay
をクリックします。前回と同様に、Chat アプリはアクティブにデバッグされているため、応答しません。Visual Studio Code
のデバッガから実行を再開すると、ローカル環境のngrok
アプリケーションによってホストされているウェブ インターフェースから、更新されたバージョンのメッセージを含むレスポンスがアプリケーションが生成していることを確認できます。
リモート環境からデバッグする
このセクションでは、リモート環境で実行される Chat アプリを操作します。
図 9. リモート環境からデバッグする。
前提条件
- Chat 用アプリを含むダイレクト メッセージ スペース。クイックスタート ガイドの Chat 用アプリをテストするの手順に沿って、Chat 用アプリを検索して起動できます。
- リモート環境で実行され、特定のポートでデバッガが有効になっているアプリケーションを、このガイドの手順では
REMOTE_DEBUG_PORT
と表記します。 - ローカル環境は、リモート環境に
ssh
できます。 - ローカル環境内でセットアップされ、デバッグ可能な IDE。このガイドでは、説明の便宜上、
Visual Studio Code
IDE とそのデフォルトのデバッグ機能を使用しています。
ローカル環境とリモート環境を接続する
デバッグ クライアント接続を開始するローカル環境で、SSH トンネルを設定します。
ssh -L LOCAL_DEBUG_PORT:localhost:REMOTE_DEBUG_PORT REMOTE_USERNAME@REMOTE_ADDRESS
次のように置き換えます。
LOCAL_DEBUG_PORT
: ローカル環境のデバッグポート。REMOTE_USERNAME
: リモート環境のユーザー名。REMOTE_ADDRESS
: リモート環境のアドレス。REMOTE_DEBUG_PORT
: リモート環境のデバッグポート。
これで、ローカル環境のデバッグポートがリモート環境のデバッグポートにリンクされました。
デバッグを開始する
ローカル環境にインストールされている Visual Studio Code
IDE から、次の操作を行います。
- 新しいウィンドウで、アプリのソースコードを開きます。
ルート ディレクトリに
.vscode/launch.json
ファイルを作成し、ローカル環境のデバッグポートに接続するDebug Remote
という名前の起動を構成します。Node.js
{ "version": "0.2.0", "configurations": [{ "type": "node", "request": "attach", "name": "Debug Remote", "address": "127.0.0.1", "port": LOCAL_DEBUG_PORT }] }
Python
{ "version": "0.2.0", "configurations": [{ "type": "python", "request": "attach", "name": "Debug Remote", "connect": { "host": "127.0.0.1", "port": LOCAL_DEBUG_PORT } }] }
Java
{ "version": "0.2.0", "configurations": [{ "type": "java", "request": "attach", "name": "Debug Remote", "hostName": "127.0.0.1", "port": LOCAL_DEBUG_PORT }] }
LOCAL_DEBUG_PORT
は、ローカル環境のデバッグポートに置き換えます。アプリのソースコードに、HTTP リクエスト処理を一時停止するブレークポイントを追加し、以前に追加した
Debug Remote
構成を使用して実行とデバッグを開始します。
Chat アプリのダイレクト メッセージ スペースで、テストする内容を入力して enter
キーを押します。チャットアプリは Visual Studio Code
IDE でアクティブにデバッグされているため、応答しません。
関連トピック
- エラーログをenableにしてクエリする方法を学習する。
- 「アプリが応答しない」、「Google Chat API は Google Workspace ユーザーのみが使用できます」、「ユーザーをスペースから除外できます」など、Google Chat アプリのエラーを解決する方法をご確認ください。
- カード メッセージ、ダイアログ、リンク プレビューが表示されない、または想定どおりに機能しないなど、カードエラーを修正する方法をご確認ください。