Teams アプリをローカルでデバッグする

Microsoft 365 Agents Toolkit (以前は Teams Toolkit) を使用すると、Microsoft Teams アプリをローカルでデバッグしてプレビューできます。 デバッグ中に、Agents Toolkit によってアプリ サービスが自動的に開始され、デバッガーが起動され、Teams アプリがアップロードされます。 デバッグ後、Teams Web クライアントで Teams アプリをローカルでプレビューできます。

Visual Studio Code 用に Teams アプリをローカルでデバッグする

Microsoft Visual Studio Code のエージェント ツールキットでは、Teams アプリのデバッグをローカルで自動化する機能が提供されます。 Visual Studio Code では、タブ、ボット、メッセージ拡張機能をデバッグできます。 アプリをデバッグする前に、エージェント ツールキットを設定する必要があります。

デバッグ用にエージェント ツールキットを設定する

次の手順は、デバッグ プロセスを開始する前にエージェント ツールキットを設定するのに役立ちます。

npm run prepare-storage:atk

アプリのデバッグ

初期セットアップ プロセスの後、Agents Toolkit は次のプロセスを開始します。

• アプリ サービスを開始
• デバッグ構成を起動します
• Teams アプリをアップロードします

アプリ サービスを開始します

.vscode/tasks.jsonで定義されているタスクを実行します。 既定では、タスク名は "Start application"。 プロジェクトに複数のコンポーネントが含まれている場合は、より多くの依存タスクがあります。

// .vscode/tasks.json
{
    "label": "Start application",
    "dependsOn": [
        "Start Frontend", // Tab
        "Start Backend", // Azure Functions
        "Start Bot" // Bot or message extensions
    ]
}

次の図は、タブ、ボットまたはメッセージ拡張機能、およびAzure Functionsの実行中に、Visual Studio Code の [出力] タブと [TERMINAL] タブにタスク名を表示しています。

ローカル トンネルを開始する

ローカル ボット メッセージ エンドポイントをパブリックにするには、ローカル トンネル サービスとして開発トンネルを使用します。

開発トンネル

v4 プロジェクトからローカル トンネル タスクを手動で移行するには、 .vscode/tasks.json ファイルで次のコードを更新します。

{
      "label": "Start local tunnel",
      "type": "teamsfx",
      "command": "debug-start-local-tunnel",
      "args": {
          "type": "dev-tunnel",
          "ports": [
              {
                  "portNumber": 3978,
                  "protocol": "http",
                  "access": "public",
                  "writeToEnvironmentFile": {
                      "endpoint": "BOT_ENDPOINT",
                      "___domain": "BOT_DOMAIN"
                  }
              }
        ],
          "env": "local"
      },
      "isBackground": true,
      "problemMatcher": "$teamsfx-local-tunnel-watch"
    },

ローカル ボット サービスに別のポートを使用するには、.vscode/tasks.json ファイル内のportNumberを変更し、index.js または index.ts ファイルのportNumberも変更します。

次の表に、必要な引数の一覧を示します。

ports引数はオブジェクトの配列である必要があります。各オブジェクトは、特定のポートの構成を指定します。 各オブジェクトには、次のフィールドが含まれている必要があります。

writeToEnvironmentFile オブジェクトには、次の 2 つのフィールドが含まれています。

writeToEnvironmentFileが含まれると、指定した環境変数が.env ファイルに書き込まれます。 フィールドを省略すると、環境変数はファイルに書き込まれなくなります。

デバッグ構成を起動します

.vscode/launch.jsonで定義されているデバッグ構成を起動します。

次の表に、タブ、ボットまたはメッセージ拡張機能アプリ、およびAzure Functionsを含むプロジェクトのデバッグ構成の名前と種類を示します。

次の表に、ボット アプリ、Azure Functions、タブ アプリを使用しないプロジェクトのデバッグ構成の名前と種類を示します。

Teams アプリをアップロードします

[ フロントエンドにアタッチ] または [アプリの起動] 構成では、Microsoft Edge または Chrome ブラウザー インスタンスが起動され、Web ページに Teams クライアントが読み込まれます。 Teams クライアントが読み込まれた後、起動構成 Microsoft Teamsで定義されているアップロード URL によって制御される Teams アプリをアップロードします。

Teams クライアントが Web ブラウザーで開いたら、次の手順を実行します。

1. [ 追加] を 選択して、Teams でアプリをアップロードします。

   

2. [ 開く ] を選択して、個人用スコープでアプリを開きます。

   または、検索して必要なスコープを選択するか、一覧からチャネルまたはチャットを選択し、ダイアログ内を移動して [移動] を選択することもできます。

   

   アプリが Teams に追加されました。

次の手順

関連項目

• Microsoft 365 Agents Toolkit の概要
• Azure Functionsの概要
• エージェント ツールキットを使用してクラウド リソースをプロビジョニングする
• Teams アプリにハウツー ガイドを追加する
• クラウドにデプロイする
• エージェント ツールキットで複数の環境を管理する