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

Google Chat アプリのデベロッパーは、 複雑な問題をトラブルシューティングできますChat アプリのデバッグ アプリのアーキテクチャ、モデル、アーキテクチャ、 アプリの実行方法、デプロイ方法、設定です。

このページでは、以下を使用して HTTP Chat アプリをデバッグする方法について説明します。 統合 Ingress プラットフォームである ngrok を使用して、 開発環境です。このガイドでは、ローカルでコードの変更をテストし、 リモート環境で問題のトラブルシューティングを行うこともできます

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

このセクションでは、Google Chat アプリの ローカル環境で実行します

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

図 1. ローカル開発環境でデバッグします。

ワークショップ

Node.js

Python

Java

前提条件

Node.js

Python

Java

localhost サービスを公開する

ローカル環境をインターネットに接続して、 アクセスできます。ngrok アプリケーションを使用する を使用して、公開 URL に送信された HTTP リクエストをローカル環境にリダイレクトできます。

  1. ローカル環境のブラウザで、ngrok アカウントにログインします。
  2. アプリケーションをインストールしてローカルに authtoken を設定する 必要があります。
  3. プロジェクトに静的ドメインを作成 ngrok 個のアカウント(NGROK_STATIC_DOMAIN) 確認してください。

Chat アプリを構成する

すべての HTTP リクエストを次の宛先に送信するように Chat 用アプリを構成する 静的ドメインです

  1. Google Cloud コンソールで、Google Chat API ページを開きます。

    Google Chat API ページに移動

  2. [構成] タブをクリックします。

  3. インタラクティブ機能に移動 >Connection settings: [App Url] テキスト欄で次のように入力します。

    https://NGROK_STATIC_DOMAIN
    

    NGROK_STATIC_DOMAIN は、次の静的ドメインに置き換えます。 ngrok アカウント

  4. [保存] をクリックします。

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

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

Chat アプリをテストする

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

Node.js

  1. GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成する ローカル環境に保存すると、アプリケーション コードが含まれ、 execute:

    git clone https://github.com/googleworkspace/google-chat-samples.git
  2. ローカル環境にインストールされている 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 リクエストを実行してリッスンしています。

      アプリケーションは実行され、
ポート「9000」

      図 3. アプリケーションが実行され、HTTP をリッスンしている ポート 9000 に対するリクエスト。

  3. ローカル環境で ngrok アプリケーションを起動します。

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    NGROK_STATIC_DOMAIN は、次の静的ドメインに置き換えます。 ngrok アカウントすべてのリクエストがローカル 使用されるポートを定義します。

    「ngrok」サーバーが実行されているターミナル
リダイレクトしています

    図 4. ngrok サーバーが稼働してリダイレクトしているターミナル。

  4. ngrok によって localhost でウェブ インターフェースも起動されます。 ブラウザで開くと、すべてのアクティビティをモニタリングできます。

    「ngrok」アプリケーションがホストするウェブ インターフェースに HTTP が表示されない
リクエスト

    図 5. ngrok アプリケーションでホストされるウェブ インターフェース HTTP リクエストはありません

  5. Chat 用アプリに直接メッセージを送信してテストします。 メッセージ:

    • Google Chat を開きます。

      Google Chat にアクセス

    • [チャットを新規作成] をクリックします。

    • ダイアログで、名前を入力します。 Chat アプリ。

    • 検索結果から Chat 用アプリを探し、 [追加] > をクリックします。 Google Chat

    • ダイレクト メッセージ スペースで、「Hello」と入力して enter キーを押します。お客様の Chat アプリが応答しない理由: あります。

  6. ローカル環境の Visual Studio Code に、次の値が示されています。 設定されたブレークポイントで実行を一時停止します。

    実行が一時停止したブレークポイントで
セット

    図 6. 実行は、設定されたブレークポイントで一時停止します。

  7. Visual Studio Code のデバッガから実行を再開したとき Chat 用アプリがタイムアウトするのを待機しています。 返信は「Your message : Hello」です。

  8. ウェブ インターフェースから HTTP リクエストとレスポンスのログを確認できます。 (ローカル環境の ngrok アプリケーションによってホストされる)

    「ngrok」によってホストされているウェブ インターフェースからの HTTP リクエスト
アプリケーション

    図 7. ngrok アプリケーション。

  9. アプリケーションの動作を変更するには、Your message を次の内容に置き換えます。 index.jsonHere was your message インライン 35。保存した場合 nodemon により、アプリケーションが自動的に再読み込みされます。 更新され、Visual Studio Code はデバッグモードのままです。

    アプリケーションが実行され、このポートで HTTP リクエストがリッスンされています。
コードを変更した `9000`
読み込み完了

    図 8. アプリケーションが実行され、HTTP リクエストをリッスンしている コードの変更を読み込んだ状態で、ポート 9000 に設定します。

  10. 今回は、スペースで 2 つ目のメッセージ Hello を送信する代わりに、 によってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択できます。 ローカル環境で ngrok アプリケーションを実行し、[Replay] をクリックします。 前回と同様に、Chat アプリは応答しません アクティブにデバッグ中であるため、

  11. Visual Studio Code のデバッガから実行を再開したとき これは、ngrok アプリケーションがホストするウェブ インターフェースから アプリケーションがレスポンスを生成するローカル環境 メッセージ Here was your message : Hello の更新バージョン。

Python

  1. アプリケーションのデフォルトに使用する新しいユーザー認証情報を取得します。 認証情報:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID を次の内容に置き換えます。 プロジェクト ID プロジェクトを作成します。

  2. GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成する ローカル環境にデプロイすると、このファイルにはアプリケーション コードが含まれます。

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. ローカル環境にインストールされている 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 リクエストを実行してリッスンしています。

      アプリケーションは実行され、
ポート「9000」

      図 3. アプリケーションが実行され、HTTP をリッスンしている ポート 9000 に対するリクエスト。

  4. ローカル環境で ngrok アプリケーションを起動します。

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    NGROK_STATIC_DOMAIN は、次の静的ドメインに置き換えます。 ngrok アカウントすべてのリクエストがローカル 使用されるポートを定義します。

    「ngrok」サーバーが実行されているターミナル
リダイレクトしています

    図 4. ngrok サーバーが稼働してリダイレクトしているターミナル。

  5. ngrok によって localhost でウェブ インターフェースも起動されます。 ブラウザで開くと、すべてのアクティビティをモニタリングできます。

    「ngrok」アプリケーションがホストするウェブ インターフェースに HTTP が表示されない
リクエスト

    図 5. ngrok アプリケーションでホストされるウェブ インターフェース HTTP リクエストはありません

  6. Chat 用アプリに直接メッセージを送信してテストします。 メッセージ:

    • Google Chat を開きます。

      Google Chat にアクセス

    • [チャットを新規作成] をクリックします。

    • ダイアログで、名前を入力します。 Chat アプリ。

    • 検索結果から Chat 用アプリを探し、 [追加] > をクリックします。 Google Chat

    • ダイレクト メッセージ スペースで、「Hey!」と入力して enter キーを押します。お客様の Chat アプリが応答しない理由: あります。

  7. ローカル環境の Visual Studio Code に、次の値が示されています。 設定されたブレークポイントで実行を一時停止します。

    実行が一時停止したブレークポイントで
セット

    図 6. 実行は、設定されたブレークポイントで一時停止します。

  8. Visual Studio Code のデバッガから実行を再開したとき Chat 用アプリがタイムアウトするのを待機しています。 あなたの名前とアバターの画像をメッセージに含めて返信します。

  9. ウェブ インターフェースから HTTP リクエストとレスポンスのログを確認できます。 (ローカル環境の ngrok アプリケーションによってホストされる)

    「ngrok」によってホストされているウェブ インターフェースからの HTTP リクエスト
アプリケーション

    図 7. ngrok アプリケーション。

  10. アプリケーションの動作を変更するには、Hello をインラインの Hey に置き換えます。 main.py ファイルの 51。ファイルを保存すると、Visual Studio Code 更新されたソースコードでアプリケーションが自動的に再読み込みされ、 デバッグモードのままとなります。

    アプリケーションが実行され、このポートで HTTP リクエストがリッスンされています。
コードを変更した `9000`
読み込み完了

    図 8. アプリケーションが実行され、HTTP リクエストをリッスンしている コードの変更を読み込んだ状態で、ポート 9000 に設定します。

  11. 今回は、スペースで 2 つ目のメッセージ Hey! を送信する代わりに、 によってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択できます。 ローカル環境で ngrok アプリケーションを実行し、[Replay] をクリックします。 前回と同様に、Chat アプリは応答しません アクティブにデバッグ中であるため、

  12. Visual Studio Code のデバッガから実行を再開したとき これは、ngrok アプリケーションがホストするウェブ インターフェースから アプリケーションがレスポンスを生成するローカル環境 更新後のメッセージが作成されます。

Java

  1. アプリケーションのデフォルトに使用する新しいユーザー認証情報を取得します。 認証情報:

    gcloud config set project PROJECT_ID
    gcloud auth application-default login

    PROJECT_ID を次の内容に置き換えます。 プロジェクト ID プロジェクトを作成します。

  2. GitHub から googleworkspace/google-chat-samples リポジトリのクローンを作成する ローカル環境で実行する場合、アプリケーション コードが含まれています。

    git clone https://github.com/googleworkspace/google-chat-samples.git
  3. ローカル環境にインストールされている Visual Studio Code IDE から、次のコマンドを実行します。 次の操作を行います。

    1. 新しいウィンドウでフォルダを開きます。 google-chat-samples/java/avatar-app
    2. アプリケーション App を実行するように Maven プロジェクトを構成します。 Cloud Functions Framework のビルドを追加してローカルでポート 9000pom.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 リクエストをリッスンしています。

      アプリケーションは実行され、
ポート「9000」

      図 3. アプリケーションが実行され、HTTP をリッスンしている ポート 9000 に対するリクエスト。

  4. ローカル環境で ngrok アプリケーションを起動します。

    ngrok http --domain=NGROK_STATIC_DOMAIN 9000

    NGROK_STATIC_DOMAIN は、次の静的ドメインに置き換えます。 ngrok アカウントすべてのリクエストがローカル 使用されるポートを定義します。

    「ngrok」サーバーが実行されているターミナル
リダイレクトしています

    図 4. ngrok サーバーが稼働してリダイレクトしているターミナル。

  5. ngrok によって localhost でウェブ インターフェースも起動されます。 ブラウザで開くと、すべてのアクティビティをモニタリングできます。

    「ngrok」アプリケーションがホストするウェブ インターフェースに HTTP が表示されない
リクエスト

    図 5. ngrok アプリケーションでホストされるウェブ インターフェース HTTP リクエストはありません

  6. Chat 用アプリに直接メッセージを送信してテストします。 メッセージ:

    • Google Chat を開きます。

      Google Chat にアクセス

    • [チャットを新規作成] をクリックします。

    • ダイアログで、名前を入力します。 Chat アプリ。

    • 検索結果から Chat 用アプリを探し、 [追加] &gt; をクリックします。 Google Chat

    • ダイレクト メッセージ スペースで、「Hey!」と入力して enter キーを押します。お客様の Chat アプリが応答しない理由: あります。

  7. ローカル環境の Visual Studio Code に、次の値が示されています。 設定されたブレークポイントで実行を一時停止します。

    実行が一時停止したブレークポイントで
セット

    図 6. 実行は、設定されたブレークポイントで一時停止します。

  8. Visual Studio Code のデバッガから実行を再開したとき Chat 用アプリがタイムアウトするのを待機しています。 あなたの名前とアバターの画像をメッセージに含めて返信します。

  9. ウェブ インターフェースから HTTP リクエストとレスポンスのログを確認できます。 (ローカル環境の ngrok アプリケーションによってホストされる)

    「ngrok」によってホストされているウェブ インターフェースからの HTTP リクエスト
アプリケーション

    図 7. ngrok アプリケーション。

  10. アプリケーションの動作を変更するには、Hello をインラインの Hey に置き換えます。 55 App.javaファイルを開き、プロセスをmvnDebug再起動して、 Remote Debug Watch を再起動して、再接続して再起動します デバッグする方法を学びます。

  11. 今回は、スペースで 2 つ目のメッセージ Hey! を送信する代わりに、 によってホストされているウェブ インターフェースに記録された最後の HTTP リクエストを選択できます。 ローカル環境で ngrok アプリケーションを実行し、[Replay] をクリックします。 前回と同様に、Chat アプリは応答しません アクティブにデバッグ中であるため、

  12. 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 から、次の操作を行います。 次のとおりです。

  1. 新しいウィンドウで、アプリのソースコードを開きます。
  2. ルート ディレクトリに .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 をアプリケーションのデバッグポートに置き換えます。 構成する必要があります。

  3. アプリのソースコードに、HTTP リクエストを一時停止するブレークポイントを追加する 移行し、運用を開始して 以前に追加した Debug Remote 構成で置き換えます。

Chat 用アプリのダイレクト メッセージ スペースで、 enter キーを押します。お客様の アクティブに動作しているため、Chat アプリが応答しない デバッグ済み Visual Studio Code IDE 内で直接使用できます。