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

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

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 ページを開きます。

Google Chat API ページに移動
[構成] タブをクリックします。
インタラクティブ機能に移動 >Connection settings: [App Url] テキスト欄で次のように入力します。
```
https://NGROK_STATIC_DOMAIN
```
NGROK_STATIC_DOMAIN は、次の静的ドメインに置き換えます。 ngrok アカウント
[保存] をクリックします。

Chat アプリは、すべての HTTP リクエストを
静的ドメイン

図 2. Chat アプリがすべての HTTP リクエストを送信し、静的ドメインにマッピングされます。ngrok 公開サービスは、サービス間のブリッジとして機能します。実行されるアプリケーションコード説明します。

Chat アプリをテストする

リソースをローカルでデプロイ、構成、テスト、デバッグ、自動再読み込み Chat アプリ。

Node.js

GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成するローカル環境に保存すると、アプリケーションコードが含まれ、 execute:
```
git clone https://github.com/googleworkspace/google-chat-samples.git
```
ローカル環境にインストールされている Visual Studio Code IDE から、次のコマンドを実行します。次の操作を行います。
1. 新しいウィンドウでフォルダを開きます。 google-chat-samples/node/basic-app。
2. 次の 2 つを追加して、自動再読み込みデバッグ用にアプリケーションを構成する package.json ファイル内のスクリプト:
```
{
    ...
    "scripts": {
        ...
        "debug": "node --inspect index.js",
        "debug-watch": "nodemon --watch ./ --exec npm run debug"
    }
    ...
}
```
3. ルートディレクトリから、アプリケーションをインストールします。
```
npm install
```
4. 以下をトリガーする 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"]
    }]
}
```
5. 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 を開きます。
  
  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 から、次のコマンドを実行します。次の操作を行います。
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 という名前の起動を構成するデバッグモードのポート 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"
        ]
    }]
}
```
5. 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 を開きます。
  
  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 から、次のコマンドを実行します。次の操作を行います。
1. 新しいウィンドウでフォルダを開きます。 google-chat-samples/java/avatar-app。
2. アプリケーション 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>
...
```
3. これで、デバッグモードでローカルで起動できるようになりました。
```
mvnDebug function:run
Preparing to execute Maven in debug mode
Listening for transport dt_socket at address: 8000
```
4. ルートディレクトリにファイル .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
    }]
}
```
5. 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 を開きます。
  
  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 内で直接使用できます。

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

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

ワークショップ

Node.js

Python

Java

前提条件

Node.js

Python

Java

localhost サービスを公開する

Chat アプリを構成する

Chat アプリをテストする

Node.js

Python

Java

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

前提条件

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

デバッグを開始する

Node.js

Python

Java

関連トピック