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