Teams アプリをデバッグする

Teams Toolkit では、 botAadApp/create アクションを使用して、既定でボットを含むプロジェクト用の Microsoft Entra アプリが作成されます。

既存のボットを使用するには、独自の値を使用してenv/.env.localでBOT_IDとSECRET_BOT_PASSWORDを設定できます。

次のコード スニペットの例を使用して、デバッグ用に既存のボットを設定します。

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local

# Generated during provision, you can also add your own variables.
BOT_ID={YOUR_OWN_BOT_ID}
...

SECRET_BOT_PASSWORD={YOUR_OWN_BOT_PASSWORD}
...

["Validate prerequisites">"args">"prerequisites"] の下の.vscode/tasks.jsonで、スキップする前提条件のチェックを更新します。

1. teamsapp.local.ymlで、devTool/installアクションからdevCertを削除します (または、devCertのみが含まれている場合はdevTool/installアクション全体を削除します)。

2. teamsapp.local.ymlで、file/createOrUpdateEnvironmentFileアクションの"SSL_CRT_FILE"と"SSL_KEY_FILE"を証明書ファイル パスとキー ファイル パスに設定します。

   # teamsapp.local.yml
   ...
     # Remove devCert or this whole action
     - uses: devTool/install
       with:
         # devCert:
     ...
     - uses: file/createOrUpdateEnvironmentFile
       with:
         target: ./.localSettings
         envs:
           ...
           # set your own cert values
           SSL_CRT_FILE: ...
           SSL_KEY_FILE: ...
   ...
   

teamsapp.local.ymlで、アクションのargscli/runNpmCommand編集します。

# teamsapp.local.yml
...
  - uses: cli/runNpmCommand
    with:
      # edit the npm command args
      args: install --no-audit
...

• Bot

  1. プロジェクト全体で "3978" を検索し、 tasks.json と index.jsの外観を探します。

  2. ポートに置き換えます。

     

• Tab

  1. プロジェクト全体で "53000" を検索し、 teamsapp.local.yml と tasks.jsonの外観を探します。

  2. ポートに置き換えます。

     

Teams Toolkit では、既定で、アプリ パッケージを管理するための一連の teamsApp アクションが作成されます。 teamsapp.local.ymlで独自のアプリ パッケージを使用するように更新できます。

# teamsapp.local.yml
...
  - uses: teamsApp/create # Creates a Teams app
    ...
  - uses: teamsApp/validateManifest # Validate using manifest schema
    ...
  - uses: teamsApp/zipAppPackage # Build Teams app package with latest env value
    ...
  - uses: teamsApp/validateAppPackage # Validate app package using validation rules
    ...
  - uses: teamsApp/update # Apply the app manifest (previously called Teams app manifest) to an existing Teams app in Teams Developer Portal.
    ...
...

["Start Teams App Locally"] の下の.vscode/tasks.jsonで、"Start Local tunnel"を更新できます。

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

# env/.env.local

# Built-in environment variables
TEAMSFX_ENV=local
...
BOT_DOMAIN={YOUR_OWN_TUNNEL_DOMAIN}
BOT_ENDPOINT={YOUR_OWN_TUNNEL_URL}
...

タブ、ボット、メッセージ拡張機能、および Azure Functions の .localConfigs ファイルに環境変数を追加できます。 Teams Toolkit は、ローカル デバッグ中にサービスを開始するために追加した環境変数を読み込みます。

Teams Toolkit は、Visual Studio Code マルチターゲット デバッグを利用して、タブ、ボット、メッセージ拡張機能、および Azure Functions を同時にデバッグします。 部分コンポーネントをデバッグするには、.vscode/launch.json と .vscode/tasks.json を更新できます。 タブとAzure Functions プロジェクトを含むボットでのみタブをデバッグする場合は、次の手順を使用します。

1. .vscode/launch.jsonのデバッグコンパウンドから"Attach to Bot"と"Attach to Backend"を更新します。

   {
       "name": "Debug in Teams (Edge)",
        "configurations": [
           "Attach to Frontend (Edge)",
           // "Attach to Bot",
           // "Attach to Backend"
           ],
           "preLaunchTask": "Start Teams App Locally",
           "presentation": {
               "group": "all",
               "order": 1
           },
           "stopAll": true
   
   }
   

2. .vscode/tasks.json のすべてのタスクの開始から "Start Backend" と "Start Bot" を更新します。

   {
   
       "label": "Start application",
       "dependsOn": [
           "Start Frontend",
             // "Start Backend",
             // "Start Bot"
   
         ]
   
   }