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 Toolkit プロジェクトがアップグレードされます。詳細については、「 tasks doc」を参照してください。

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

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

Windows

1. [RUN AND DEBUG ▷ ] ドロップダウンから [Teams でのデバッグ (Edge)] または [Debug in Teams (Chrome)] を選択します。

   

2. [デバッグの開始の実行 > ] (F5) を選択します。

   

3. [ Microsoft 365 Testing Tenant to Microsoft 365 アカウントの作成] を選択します。

   

   ヒント

   [Microsoft 365 テスト テナントの作成] を選択して、Microsoft 365 開発者プログラムについて学習できます。 既定の Web ブラウザーが開き、資格情報を使用して Microsoft 365 アカウントにサインインできます。

4. [インストール] を選択して localhost の開発証明書をインストールします。

   

   ヒント

   開発証明書について知るには [詳細情報] を選択できます。

5. [セキュリティ警告] ダイアログで [はい] を選択します。

   

ツールキットは、選択内容に基づいて新しい Microsoft Edge または Chrome ブラウザー インスタンスを起動し、Teams クライアントを読み込む Web ページを開きます。

macOS

1. [RUN AND DEBUG ▷ ] ドロップダウンから [Teams でのデバッグ (Edge)] または [Debug in Teams (Chrome)] を選択します。

   

2. [ デバッグの開始 (F5)] または [ 実行 ] を選択して、Teams アプリをデバッグ モードで実行します。

   

3. [サインイン] を選びます。

   

   ヒント

   [Microsoft 365 テスト テナントの作成] を選択して、Microsoft 365 開発者プログラムについて学習できます。 既定の Web ブラウザーが開き、資格情報を使用して Microsoft 365 アカウントにサインインできます。

4. [インストール] を選択して localhost の開発証明書をインストールします。

   

   ヒント

   開発証明書について知るには [詳細情報] を選択できます。

5. [ユーザー名] と [パスワード] を入力し、[設定の更新] を選択します。

   

Teams Toolkit によってブラウザー インスタンスが起動され、Teams クライアントを読み込む Web ページが開きます。

コマンド ライン

1. 開発トンネルをインストールします。

2. 次のコマンドを実行して、開発トンネルにログインします。

   devtunnel user login
   

   

3. 次のコマンドを実行して、ローカル トンネル サービスを開始します。

   devtunnel host -p 3978 --protocol http --allow-anonymous
   

4. 別のターミナルで、次のコマンドを実行して、ファイル内の BOT_DOMAIN と BOT_ENDPOINT の値を env/.env.local 更新します。

   BOT_DOMAIN=sample-id-3978.devtunnels.ms
   BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/
   

   

5. 次のコマンドを実行して、アプリを Teams にプロビジョニングします。

   teamsapp provision --env local
   

   

6. 次のコマンドを実行して、アプリを Teams にデプロイします。

   teamsapp deploy --env local
   

   

7. 次のコマンドを実行して、アプリケーションをローカルでプレビューします。

   teamsapp preview --env local
   

Azure Functionsでホストされている通知ボットをプレビューする場合は、プロジェクト ディレクトリで次のコマンドを実行します。

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 の [出力] タブと [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"
    },

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

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

引数	型	必須	説明
type	string	必須出席者	使用するトンネル サービスの種類。 この引数は に設定する dev-tunnel必要があります。
env	string	省略可能	環境名。 Teams Toolkit では、 で output 定義されている環境変数がファイルに .env.<env> 書き込まれます。
ports	配列	必須	ローカル ポート番号、プロトコル、およびアクセス制御設定を指定するポート構成の配列。

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

ポート	型	必須	説明
portNumber	番号	必須	トンネルのローカル ポート番号。
protocol	string	必須出席者	トンネルのプロトコル。
access	string	省略可能	トンネルのアクセス制御設定。 この値は、 または publicにprivate設定できます。 指定のない場合、既定値は private に設定されます。
writeToEnvironmentFile	object	省略可能	ファイルに書き込まれるトンネル エンドポイントとトンネル ドメイン環境変数の .env キー。

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

WriteToEnvironmentFile	型	必須	説明
endpoint	string	省略可能	トンネル エンドポイント環境変数のキー。
domain	string	省略可能	トンネル ドメイン環境変数のキー。

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

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

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

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

コンポーネント	デバッグ構成名	デバッグ構成の種類
Tab	フロントエンド (エッジ) またはフロントエンドにアタッチ (Chrome) にアタッチする	msedge または chrome
ボットまたはメッセージ拡張機能	ボットにアタッチ	ノード
Azure Functions	バックエンドにアタッチ	ノード

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

コンポーネント	デバッグ構成名	デバッグ構成の種類
ボットまたはメッセージ拡張機能	ボット (Edge) またはボットの起動 (Chrome) を起動する	msedge または chrome
ボットまたはメッセージ拡張機能	ボットにアタッチ	ノード
Azure Functions	バックエンドにアタッチ	ノード

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

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

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

次の手順

バックグラウンド プロセスのデバッグ

関連項目

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