このページは Cloud Translation API によって翻訳されました。

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

Google 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 Cloud コンソールで、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

googleworkspace/google-chat-samples リポジトリのクローンを GitHub からローカル環境に作成します。このリポジトリには、実行するアプリケーションのコードが含まれています。
```
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 アプリを見つけ、[追加] > [Chat] をクリックします。
- ダイレクトメッセージのスペースに「Hello」と入力して enter を押します。チャットアプリがアクティブにデバッグされているため、返信しません。
ローカル環境の 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 に置き換えます。
アプリケーションコードを含む googleworkspace/google-chat-samples リポジトリのクローンを GitHub からローカル環境に作成します。
```
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 ファイルを作成し、Debug Watch という名前の起動を構成して、仮想環境 env のデバッグモードでポート 9000 のモジュール functions-framework からアプリケーションをトリガーします。
```
{
    "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 アプリを見つけ、[追加] > [Chat] をクリックします。
- ダイレクトメッセージのスペースに「Hey!」と入力して enter を押します。チャットアプリがアクティブにデバッグされているため、返信しません。
ローカル環境の 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 で、次の操作を行います。
1. 新しいウィンドウで、フォルダ google-chat-samples/java/avatar-app を開きます。
2. pom.xml ファイルに Cloud Functions Framework ビルドプラグイン function-maven-plugin を追加して、ポート 9000 でアプリケーション App をローカルで実行するように 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 アプリを見つけ、[追加] > [Chat] をクリックします。
- ダイレクトメッセージのスペースに「Hey!」と入力して enter を押します。チャットアプリがアクティブにデバッグされているため、返信しません。
ローカル環境の Visual Studio Code で、設定されたブレークポイントで実行が停止されていることがわかります。

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

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

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

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

ワークショップ

Node.js

Python

Java

前提条件

Node.js

Python

Java

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

Chat アプリを構成する

Chat アプリをテストする

Node.js

Python

Java

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

前提条件

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

デバッグを開始する

Node.js

Python

Java

関連トピック