Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

Google Chat アプリをデバッグする

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 に、HTTP エンドポイント URL を http://example.com などに設定する必要があることです。
ローカル環境にデバッグ可能な IDE が設定されていること。このガイドでは、説明のために Visual Studio Code IDE とそのデフォルトのデバッグ機能を使用します。
Git インストールされていることローカル環境に。
ngrok アカウント。

Python

ローカル環境にインストールされている python3 最新バージョン。
ローカル環境にインストールされている pip と virtualenv の最新バージョン。これらは、Python パッケージと仮想環境をそれぞれ管理するために使用されます。
メッセージング用に構成された HTTP Chat アプリ。クイックスタートガイドの前提条件、環境を設定する、および Google Chat にアプリを公開するの各セクションをご覧ください。唯一の違いは、アプリ名 を Debug App に、HTTP エンドポイント 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 に、HTTP エンドポイント 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 API コンソールで、Google Chat API ページを開きます。

Google Chat API ページに移動
[構成] タブをクリックします。
[インタラクティブ機能] > [接続設定] に移動し、テキストフィールド [HTTP エンドポイント URL] の値を次のように設定します。
```
https://NGROK_STATIC_DOMAIN
```
NGROK_STATIC_DOMAIN は、ngrok アカウントの静的ドメインに置き換えます。
[保存] をクリックします。

Chat 用アプリは、すべての HTTP リクエストを静的ドメインに送信します。

図 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 で、次の操作を行います。
1. 新しいウィンドウで、google-chat-samples/node/basic-app フォルダを開きます。
2. package.json ファイルに 2 つのスクリプトを追加して、自動再読み込みデバッグ用にアプリケーションを構成します。
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
3. ルートディレクトリから、アプリケーションをインストールします。
```
npm install
```
4. ルートディレクトリにファイル .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"]
    }]
}
```
5. 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 アプリケーションによって localhost にウェブインターフェースも起動します。ブラウザで開いてすべてのアクティビティをモニタリングできます。

図 5.ngrok アプリケーションでホストされているウェブインターフェースに HTTP リクエストが表示されない。
ダイレクトメッセージを送信して Chat アプリをテストします。
- Google Chat を開きます。
  
  Google Chat に移動
- [新しいチャット] をクリックします。
- ダイアログで、Chat アプリの名前を入力します。
- 検索結果で Chat アプリを見つけて、 [追加]> [チャット] をクリックします。
- ダイレクトメッセージスペースに「Hello」と入力して enter を押します。Chat アプリはアクティブにデバッグされているため、返信しません。
ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

図 6.設定したブレークポイントで実行が一時停止しています。
Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat アプリは Your message : Hello と返信します。
ローカル環境の ngrok アプリケーションでホストされているウェブインターフェースから、HTTP リクエストとレスポンスのログを確認できます。

図 7.ngrok アプリケーションでホストされているウェブインターフェースからの HTTP リクエスト。
アプリケーションの動作を変更するには、index.json のインライン 35 の Your message を Here was your message に置き換えます。ファイルを保存すると、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 は、アプリのクラウドプロジェクトのプロジェクト ID に置き換えます。
GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。これには、アプリケーションコードが含まれています。
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。
1. 新しいウィンドウで、google-chat-samples/python/avatar-app フォルダを開きます。
2. Python env の新しい仮想環境を作成して有効にします。
```
virtualenv env
source env/bin/activate
```
3. 仮想環境で pip を使用して、すべてのプロジェクトの依存関係をインストールします。
```
pip install -r requirements.txt
```
4. ルートディレクトリにファイル .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", "avatar_app",
            "--port", "9000",
            "--debug"
        ]
    }]
}
```
5. 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 アプリケーションによって localhost にウェブインターフェースも起動します。ブラウザで開いてすべてのアクティビティをモニタリングできます。

図 5.ngrok アプリケーションでホストされているウェブインターフェースに HTTP リクエストが表示されない。
ダイレクトメッセージを送信して Chat アプリをテストします。
- Google Chat を開きます。
  
  Google Chat に移動
- [新しいチャット] をクリックします。
- ダイアログで、Chat アプリの名前を入力します。
- 検索結果で Chat アプリを見つけて、 [追加]> [チャット] をクリックします。
- ダイレクトメッセージスペースに「Hey!」と入力して enter を押します。Chat アプリはアクティブにデバッグされているため、返信しません。
ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

図 6.設定したブレークポイントで実行が一時停止しています。
Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat アプリはメッセージに名前とアバター画像を表示して返信します。
ローカル環境の ngrok アプリケーションでホストされているウェブインターフェースから、HTTP リクエストとレスポンスのログを確認できます。

図 7.ngrok アプリケーションでホストされているウェブインターフェースからの HTTP リクエスト。
アプリケーションの動作を変更するには、main.py ファイルのインライン 51 の Hello を Hey に置き換えます。ファイルを保存すると、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 は、アプリのクラウドプロジェクトのプロジェクト ID に置き換えます。
GitHub からローカル環境に googleworkspace/google-chat-samples リポジトリのクローンを作成します。これには、アプリケーションコードが含まれています。
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
ローカル環境にインストールされている Visual Studio Code IDE で、次の操作を行います。
1. 新しいウィンドウで、google-chat-samples/java/avatar-app フォルダを開きます。
2. pom.xml ファイルに Google Cloud Functions Framework ビルドプラグイン function-maven-plugin を追加して、アプリケーション App をポート 9000 でローカルに実行するように Maven プロジェクトを構成します。
```
...
<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>
...
```
3. これで、デバッグモードでローカルに起動できます。
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. ルートディレクトリにファイル .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
    }]
}
```
5. App.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 アプリケーションによって localhost にウェブインターフェースも起動します。ブラウザで開いてすべてのアクティビティをモニタリングできます。

図 5.ngrok アプリケーションでホストされているウェブインターフェースに HTTP リクエストが表示されない。
ダイレクトメッセージを送信して Chat アプリをテストします。
- Google Chat を開きます。
  
  Google Chat に移動
- [新しいチャット] をクリックします。
- ダイアログで、Chat アプリの名前を入力します。
- 検索結果で Chat アプリを見つけて、 [追加]> [チャット] をクリックします。
- ダイレクトメッセージスペースに「Hey!」と入力して enter を押します。Chat アプリはアクティブにデバッグされているため、返信しません。
ローカル環境の Visual Studio Code で、設定したブレークポイントで実行が一時停止していることを確認できます。

図 6.設定したブレークポイントで実行が一時停止しています。
Google Chat がタイムアウトする前に Visual Studio Code のデバッガから実行を再開すると、Chat アプリはメッセージに名前とアバター画像を表示して返信します。
ローカル環境の ngrok アプリケーションでホストされているウェブインターフェースから、HTTP リクエストとレスポンスのログを確認できます。

図 7.ngrok アプリケーションでホストされているウェブインターフェースからの HTTP リクエスト。
アプリケーションの動作を変更するには、App.java ファイルのインライン 55 の Hello を Hey に置き換え、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 を押します。Chat アプリは Visual Studio Code IDE でアクティブにデバッグされているため、返信しません。

Google Chat アプリをデバッグする コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

ローカル開発環境からデバッグする

ワークショップ

Node.js

Python

Java

前提条件

Node.js

Python

Java

localhost サービスを一般公開する

Chat アプリを構成する

Chat アプリをテストする

Node.js

Python

Java

リモート環境からデバッグする

前提条件

ローカル環境とリモート環境を接続する

デバッグを開始する

Node.js

Python

Java

関連トピック

Google Chat アプリをデバッグする