バックグランド プロセスのデバッグ
デバッグ プロセスには、 ファイルと .vscode/tasks.json ファイルが.vscode/launch.json含まれており、Microsoft Visual Studio Code でデバッガーを構成します。 Visual Studio Code によってノード デバッガーとブラウザー デバッガーが起動され、Microsoft Edge または Google Chrome によって新しいブラウザー インスタンスが起動されます。
デバッグ プロセス ワークフローは次のとおりです。
launch.jsonファイルは、Visual Studio Code でデバッガーを構成します。Visual Studio Code では、複合 preLaunchTask、 Start Teams App Locally in file が
.vscode/tasks.json実行されます。その後、Visual Studio Code は、ボットにアタッチ、バックエンドにアタッチ、フロントエンドにアタッチ、ボットの起動など、複雑な構成で指定されたデバッガーを立ち上げます。
ブラウザー デバッガーの Microsoft Edge または Google Chrome は、新しいブラウザー インスタンスを起動し、Microsoft Teams クライアントを読み込む Web ページを開きます。
前提条件を検証する
Microsoft Teams Toolkit では、デバッグ プロセス中に次の前提条件がチェックされます。
Teams Toolkit では、Node.js がインストールされているかどうかを確認します。 Node.js がインストールされていない場合、デバッグは終了します。
Teams Toolkit は、Node.js バージョンがファイルで
package.json定義されているバージョンと一致するかどうかを確認します。 バージョンが一致しない場合、Teams Toolkit は出力チャネルに警告メッセージを表示します。有効な資格情報でサインインしていない場合は、Teams Toolkit から Microsoft 365 アカウントにサインインするように求められます。
ローカル デバッグの終了を防ぐために、開発者テナントのカスタム アプリアップロードが有効になっています。
Ngrok がインストールされていない場合、またはバージョンが要件と一致しない場合、Teams Toolkit は Ngrok npm パッケージ
ngrok@4.2.2を に~/.fx/bin/ngrokインストールします。 Ngrok バイナリ バージョン 2.3 は、ボットとメッセージの拡張機能に適用され、 の/.fx/bin/ngrok/node modules/ngrok/binNgrok npm パッケージによって管理されます。注:
Teams Toolkit プロジェクト テンプレートでは、v2.3.40 を含む ngrok@4.3.3 npm パッケージが使用されます。 有効なライセンスを取得する方法の詳細については、「 ngrok」を参照してください。
Azure Functions Core Tools バージョン 4 がインストールされていない場合、またはバージョンが要件と一致しない場合、Teams Toolkit は Azure Functions Core Tools npm パッケージ
azure-functions-core-tools@3for Windows と macOS を に~/.fx/bin/funcインストールします。 の Azure Functions Core Tools npm パッケージは~/.fx/bin/func/node_modules/azure-functions-core-tools/bin、Azure Functions Core Tools バイナリを管理します。 Linux の場合、ローカル デバッグは終了します。.NET Core SDK がインストールされていない場合、またはバージョンが要件と一致しない場合、Teams Toolkit は.NET Core SDK for Windows と macOS を に
~/.fx/bin/dotnetインストールします。 .NET Core SDK のバージョンは、Azure Functionsに適用できます。 Linux の場合、ローカル デバッグは終了します。次の表に、.NET Core のバージョンを示します:
プラットフォーム ソフトウェア Windows、macOS (x64)、Linux 3.1 (推奨)、5.0、6.0 macOS (arm64) 6.0 Windows または macOS で localhost の開発証明書がタブ用にインストールされていない場合、Teams Toolkit からインストールするように求められます。
バインド拡張機能Azure Functionsインストールされていない場合、Teams Toolkit は Azure Functions バインド拡張機能を に
api/extensions.csprojインストールします。npm パッケージがインストールされていない場合、Teams Toolkit はタブ アプリ、ボット アプリ、メッセージ拡張機能、およびAzure Functionsに適用可能なすべての npm パッケージをインストールします。
Teams Toolkit は、ボットとメッセージ拡張機能の HTTP トンネルを作成するために Ngrok を起動します。
タブ、ボット、メッセージ拡張機能、およびAzure Functionsポートが使用できない場合、ローカル デバッグは終了します。
次の表に、コンポーネントで使用できるポートのリストを示します:
コンポーネント ポート Tab 53000 ボットまたはメッセージ拡張機能 3978 ボットまたはメッセージ拡張機能のノード インスペクター 9239 Azure Functions 7071 Azure Functions のノード インスペクター 9229
[ デバッグの開始 (F5)] を選択すると、Teams Toolkit の出力チャネルに、前提条件を確認した後の進行状況と結果が表示されます。
詳細については、「 前提条件タスクの検証」を参照してください。
ローカル トンネルを開始する
ボットとメッセージ拡張機能の場合、Teams Toolkit は、ボット メッセージング エンドポイントをパブリックにするためにローカル トンネル サービスを開始します。 詳細については、「 ローカル トンネル タスクの開始」を参照してください。
デバッグ リソースを作成する
Teams Toolkit では、 でteamsapp.local.yml定義されているライフサイクルprovisionが実行され、デバッグに必要な Teams アプリ関連リソースが作成されます。 詳細については、「 プロビジョニング タスク と 使用可能なアクション」を参照してください。
プロジェクトをビルドする
Teams Toolkit では、 でteamsapp.local.yml定義されたライフサイクルdeployが実行され、プロジェクトがビルドされます。 詳細については、「タスクと使用可能なアクションのデプロイ」を参照してください。
アプリのソース コードのツアーを開始する
デバッグ後、Visual Studio Code の [エクスプローラー] でプロジェクト フォルダーとファイルを表示できます。 次の表に、デバッグに関連するファイルの一覧を示します。
| フォルダー名 | コンテンツ | デバッグ構成の種類 |
|---|---|---|
teamsapp.local.yml |
デバッグ用のメイン Teams Toolkit プロジェクト ファイル。 | このファイルは、デバッグに必要なライフサイクルとアクションを定義します。 |
env/.env.local |
Teams Toolkit プロジェクトの環境変数ファイル。 | 各環境変数の値は、デバッグ中に使用または生成されます。 |
.localConfigs |
アプリ コードの環境変数ファイル。 | 各環境変数の値は、デバッグ中に生成されます。 |
プロジェクト フォルダー構造の詳細については、「 Teams Toolkit プロジェクト」を参照してください。
関連項目
Platform Docs