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

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

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

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

デバッグ用に Teams ツールキットを設定する

次の手順は、デバッグ プロセスを開始する前に Teams Toolkit を設定するのに役立ちます。

npm run prepare-storage:teamsapp

アプリのデバッグ

初期セットアップ プロセスの後、Teams 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 の OUTPUT タブと 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 ブラウザーに読み込まれたら、[ 追加] を選択するか、要件に従ってドロップダウンからオプションを選択します。

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

次の手順

関連項目

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