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

HTTP Google Workspace アドオンのテストとデバッグ

Google Workspace アドオンデベロッパーは、以下の目的のためにコードのデバッグを複雑な問題をトラブルシューティングできますGoogle Workspace アドオンのデバッグアプリのアーキテクチャ、モデル、アーキテクチャ、アプリの実行方法、デプロイ方法、設定です。

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

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

このセクションでは、Google Workspace アドオンをローカル環境で実行します

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

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

前提条件

Node.js

node と npm の最新バージョンインストールローカル環境で実行することもできます。
最新バージョンの nodemon がローカルにインストールされています自動再読み込みに使用されます。
```
npm install -g nodemon
```
Google Cloud プロジェクト。セクション前提条件と環境（クイックスタート: ガイドをご覧ください。
ローカルでデバッグする Google Workspace アドオンのコードできます。コードサンプルのプレビューリンク機能を使用します GitHub リポジトリの 3p-resources googleworkspace/add-ons-samples 例で説明します。
ローカル環境内でセットアップされ、デバッグ可能な IDE。Google では、 Visual Studio Code IDE とそのデフォルトデバッグ機能このガイドは説明のみを目的としています。
ngrok アカウント。
最新バージョンの gcloud インストール初期化された後、構成する必要があります。

Python

最新バージョンの python3 インストールローカル環境で実行することもできます。
最新バージョンの pip と virtualenv がインストール済み Python パッケージの管理や仮想デスクトップ環境の管理に必要があります。
Google Cloud プロジェクト。セクション前提条件と環境（クイックスタート: ガイドをご覧ください。
ローカルでデバッグする Google Workspace アドオンのコードできます。コードサンプルのプレビューリンク機能を使用します GitHub リポジトリの 3p-resources googleworkspace/add-ons-samples 例で説明します。
ローカル環境内でセットアップされ、デバッグ可能な IDE。Google では、 Visual Studio Code IDE とそのデフォルトデバッグ機能このガイドは説明のみを目的としています。
ngrok アカウント。
最新バージョンの gcloud インストール初期化された後、構成する必要があります。

Java

Java SE 11's JDK の最新の安定版ローカルにインストールできます。
最新バージョンの Apache Maven ローカル環境にインストールしていること Java プロジェクトの管理に使用されます
Google Cloud プロジェクト。セクション前提条件と環境（クイックスタート: ガイドをご覧ください。
ローカルでデバッグする Google Workspace アドオンのコードできます。コードサンプルのプレビューリンク機能を使用します GitHub リポジトリの 3p-resources googleworkspace/add-ons-samples 例で説明します。
ローカル環境内でセットアップされ、デバッグ可能な IDE。Google では、 Visual Studio Code IDE とそのデフォルトデバッグ機能このガイドは説明のみを目的としています。
ngrok アカウント。
最新バージョンの gcloud インストール初期化された後、構成する必要があります。

localhost サービスを公開する

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

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

アドオンデプロイメントを作成してインストールする

すべての HTTP リクエストを次の宛先に送信するように Google Workspace アドオンを構成する静的ドメインですデプロイファイルは次のようになります。

{
  "oauthScopes": [
    "https://www.googleapis.com/auth/workspace.linkpreview",
    "https://www.googleapis.com/auth/workspace.linkcreate"
  ],
  "addOns": {
    "common": {
      "name": "Manage support cases",
      "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png",
      "layoutProperties": {
        "primaryColor": "#dd4b39"
      }
    },
    "docs": {
      "linkPreviewTriggers": [
        {
          "runFunction": "NGROK_STATIC_DOMAIN",
          "patterns": [
            {
              "hostPattern": "example.com",
              "pathPrefix": "support/cases"
            },
            {
              "hostPattern": "*.example.com",
              "pathPrefix": "cases"
            },
            {
              "hostPattern": "cases.example.com"
            }
          ],
          "labelText": "Support case",
          "localizedLabelText": {
            "es": "Caso de soporte"
          },
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ],
      "createActionTriggers": [
        {
          "id": "createCase",
          "labelText": "Create support case",
          "localizedLabelText": {
            "es": "Crear caso de soporte"
          },
          "runFunction": "$URL2",
          "logoUrl": "https://developers.google.com/workspace/add-ons/images/support-icon.png"
        }
      ]
    }
  }
}

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

使用する Google Cloud プロジェクトを設定します。
```
gcloud config set project PROJECT_ID
```
アプリケーションのデフォルトに使用する新しいユーザー認証情報を取得します。認証情報:
```
gcloud auth application-default login
```
PROJECT_ID を次の内容に置き換えます。プロジェクト ID アプリの Google Cloud プロジェクトを作成します。
デプロイを作成します。
```
gcloud workspace-add-ons deployments create manageSupportCases \
    --deployment-file=DEPLOYMENT_FILE_PATH
```
DEPLOYMENT_FILE_PATH は、実際のパスに置き換えます。作成します。

Deployment をインストールします。

gcloud workspace-add-ons deployments install manageSupportCases

Google Workspace アドオンはすべての HTTP リクエストを
静的ドメイン

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

Google Workspace アドオンをテストする

アプリのデプロイ、テスト、デバッグ、自動再読み込みを Google Workspace アドオンです。

Node.js

ローカル環境にインストールされている Visual Studio Code IDE から、次のコマンドを実行します。次の操作を行います。
1. 新しいウィンドウでフォルダを開きます。 add-ons-samples/node/3p-resources。
2. ローカルでの実行と自動再読み込みのデバッグを行うようにアプリケーションを構成する package.json ファイルに 1 つの依存関係と 2 つのスクリプトを追加します。
```
{
    ...
    "dependencies": {
      ...
      "@google-cloud/functions-framework": "^3.3.0"
    },
    "scripts": {
        ...
        "start": "npx functions-framework --target=createLinkPreview --port=9000",
        "debug-watch": "nodemon --watch ./ --exec npm start"
    }
    ...
}
```
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 リクエストはありません
新しいケースの URL をプレビューして、Google Workspace アドオンをテストしますテスターアカウントでの Google ドキュメント:
- 新しい Google ドキュメントを作成します。
  
  新しい Google ドキュメントを作成する
- 次のリンクを入力して、enter キーを押します。
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- そこにあるリンクをクリックします。
ローカル環境の Visual Studio Code に、次の値が示されています。設定されたブレークポイントで実行を一時停止します。

図 6. 実行は、設定されたブレークポイントで一時停止します。
Visual Studio Code のデバッガから実行を再開したとき Google Workspace アドオンがタイムアウトになる前にキャッシュにある Google ドキュメントにリンクのプレビューを表示します。
ウェブインターフェースから HTTP リクエストとレスポンスのログを確認できます。（ローカル環境の ngrok アプリケーションによってホストされる）

図 7. ngrok アプリケーション。
アプリケーションの動作を変更するには、Case をインラインの Case: に置き換えます。 index.js の 51。ファイルを保存すると、nodemon が自動的に更新されたソースコードでアプリケーションを再読み込みし、 Visual Studio Code はデバッグモードのままです。

図 8. アプリケーションが実行され、HTTP リクエストをリッスンしているコードの変更を読み込んだ状態で、ポート 9000 に設定します。
今回は、リンクをクリックして数秒待つ代わりに、新しい Google ドキュメントでは、ウェブに記録された最後の HTTP リクエストを選択できます。ローカル環境の ngrok アプリケーションによってホストされるインターフェース [Replay] をクリックします。前回と同様に、Google Workspace アドオンでアクティブにデバッグされているため、応答しません。
Visual Studio Code のデバッガから実行を再開したときこれは、ngrok アプリケーションがホストするウェブインターフェースからアプリケーションがレスポンスを生成するローカル環境更新済みのプレビューカードです。

Python

ローカル環境にインストールされている Visual Studio Code IDE から、次のコマンドを実行します。次の操作を行います。
1. 新しいウィンドウでフォルダを開きます。 add-ons-samples/python/3p-resources/create_link_preview。
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", "create_link_preview",
            "--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 リクエストはありません
新しいケースの URL をプレビューして、Google Workspace アドオンをテストしますテスターアカウントでの Google ドキュメント:
- 新しい Google ドキュメントを作成します。
  
  新しい Google ドキュメントを作成する
- 次のリンクを入力して、enter キーを押します。
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- そこにあるリンクをクリックします。
ローカル環境の Visual Studio Code に、次の値が示されています。設定されたブレークポイントで実行を一時停止します。

図 6. 実行は、設定されたブレークポイントで一時停止します。
Visual Studio Code のデバッガから実行を再開したとき Google Workspace アドオンがタイムアウトになる前にキャッシュにある Google ドキュメントにリンクのプレビューを表示します。
ウェブインターフェースから HTTP リクエストとレスポンスのログを確認できます。（ローカル環境の ngrok アプリケーションによってホストされる）

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

図 8. アプリケーションが実行され、HTTP リクエストをリッスンしているコードの変更を読み込んだ状態で、ポート 9000 に設定します。
今回は、リンクをクリックして数秒待つ代わりに、新しい Google ドキュメントでは、ウェブに記録された最後の HTTP リクエストを選択できます。ローカル環境の ngrok アプリケーションによってホストされるインターフェース [Replay] をクリックします。前回と同様に、Google Workspace アドオンでアクティブにデバッグされているため、応答しません。
Visual Studio Code のデバッガから実行を再開したときこれは、ngrok アプリケーションがホストするウェブインターフェースからアプリケーションがレスポンスを生成するローカル環境更新済みのプレビューカードです。

Java

ローカル環境にインストールされている Visual Studio Code IDE から、次のコマンドを実行します。次の操作を行います。
1. 新しいウィンドウでフォルダを開きます。 add-ons-samples/java/3p-resources。
2. アプリケーションを実行するように Maven プロジェクトを構成する Cloud SQL インスタンスを追加して、ローカルでポート 9000 に対する CreateLinkPreview 次の Functions Framework ビルドプラグイン function-maven-plugin は、 pom.xml ファイル:
```
...
<plugin>
    <groupId>com.google.cloud.functions</groupId>
    <artifactId>function-maven-plugin</artifactId>
    <version>0.11.0</version>
    <configuration>
        <functionTarget>CreateLinkPreview</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 リクエストの処理を一時停止するブレークポイントを追加します。 CreateLinkPreview.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 リクエストはありません
新しいケースの URL をプレビューして、Google Workspace アドオンをテストしますテスターアカウントでの Google ドキュメント:
- 新しい Google ドキュメントを作成します。
  
  新しい Google ドキュメントを作成する
- 次のリンクを入力して、enter キーを押します。
```
https://example.com/support/case/?name=Name1&description=Description1&priority=P1
```
- そこにあるリンクをクリックします。
ローカル環境の Visual Studio Code に、次の値が示されています。設定されたブレークポイントで実行を一時停止します。

図 6. 実行は、設定されたブレークポイントで一時停止します。
Visual Studio Code のデバッガから実行を再開したとき Google Workspace アドオンがタイムアウトになる前にキャッシュにある Google ドキュメントにリンクのプレビューを表示します。
ウェブインターフェースから HTTP リクエストとレスポンスのログを確認できます。（ローカル環境の ngrok アプリケーションによってホストされる）

図 7. ngrok アプリケーション。
アプリケーションの動作を変更するには、Case をインラインの Case: に置き換えます。 78 のCreateLinkPreview.javaファイルを開き、mvnDebug Remote Debug Watch を再起動して、再接続して再起動しますデバッグする方法を学びます。
今回は、リンクをクリックして数秒待つ代わりに、新しい Google ドキュメントでは、ウェブに記録された最後の HTTP リクエストを選択できます。ローカル環境の ngrok アプリケーションによってホストされるインターフェース [Replay] をクリックします。前回と同様に、Google Workspace アドオンでアクティブにデバッグされているため、応答しません。
Visual Studio Code のデバッガから実行を再開したときこれは、ngrok アプリケーションがホストするウェブインターフェースからアプリケーションがレスポンスを生成するローカル環境更新済みのプレビューカードです。

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

このセクションでは、Google Workspace アドオンを実行されるようにします。

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

図 9. リモート環境からデバッグする。

前提条件

Google Workspace アドオンがデプロイされ、インストールされました。
リモート環境でデバッガを使用して実行中のアプリケーションポートで有効にしている場合は、 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 構成で置き換えます。

インストールされている Google Workspace アドオンを操作する。お客様のアクティブになっているため、Google Workspace アドオンが応答しませんデバッグ済み Visual Studio Code IDE 内で直接使用できます。

HTTP Google Workspace アドオンのテストとデバッグ

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

前提条件

Node.js

Python

Java

localhost サービスを公開する

アドオン デプロイメントを作成してインストールする

Google Workspace アドオンをテストする

Node.js

Python

Java

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

前提条件

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

デバッグを開始する

Node.js

Python

Java

関連トピック

アドオンデプロイメントを作成してインストールする