Локальная отладка приложения Teams

Статья
03/13/2024

Microsoft Teams Toolkit помогает выполнять отладку и предварительный просмотр приложения Microsoft Teams локально. В процессе отладки Набор средств Teams автоматически запускает службы приложений, запускает отладчики и отправляет приложение Teams. Вы можете просмотреть приложение Teams в веб-клиенте Teams локально после отладки.

Локальная отладка приложения Teams для Visual Studio Code

Набор средств Teams в Microsoft Visual Studio Code предоставляет функции для автоматизации локальной отладки приложения Teams. Visual Studio Code позволяет отладить вкладку, бота и расширение сообщений. Перед отладкой приложения необходимо настроить Набор средств Teams.

Примечание.

Старый проект Набора средств Teams обновляется для использования новых задач. Дополнительные сведения см. в документации по задачам.

Настройка набора средств Teams для отладки

Следующие действия помогут вам настроить набор средств Teams перед началом процесса отладки.

Выберите Отладка в Teams (Edge) или Отладка в Teams (Chrome) в раскрывающемся списке ЗАПУСК И ОТЛАДКА ▷ .
Выберите Запустить>запуск отладки (F5).
Выберите Создание тестового клиента Microsoft 365 для учетной записи Microsoft 365.

Совет

Чтобы узнать о программе разработчика Microsoft 365, выберите Создать клиент тестирования Microsoft 365 . Откроется веб-браузер по умолчанию, который позволит вам войти в учетную запись Microsoft 365 с помощью учетных данных.
Выберите Установить, чтобы установить сертификат разработки для localhost.

Совет

Чтобы узнать о сертификате разработки, выберите Дополнительные сведения.
Выберите Да в диалоговом окне Предупреждение системы безопасности .

Набор средств запускает новый экземпляр браузера Microsoft Edge или Chrome на основе выбранного вами экземпляра и открывает веб-страницу для загрузки клиента Teams.

Установите туннель разработки.
Выполните следующую команду, чтобы войти в dev tunnel:
```
devtunnel user login
```
Выполните следующую команду, чтобы запустить локальную службу туннелирования:
```
devtunnel host -p 3978 --protocol http --allow-anonymous
```
В отдельном терминале выполните следующую команду, чтобы обновить BOT_DOMAIN значения и BOT_ENDPOINT в env/.env.local файле:
```
BOT_DOMAIN=sample-id-3978.devtunnels.ms
BOT_ENDPOINT=https://sample-id-3978.devtunnels.ms/
```
Выполните следующую команду, чтобы подготовить приложение в Teams:
```
teamsapp provision --env local
```
Выполните следующую команду, чтобы развернуть приложение в Teams:
```
teamsapp deploy --env local
```
Выполните следующую команду для локального предварительного просмотра приложения:
```
teamsapp preview --env local
```

Если вы хотите предварительно просмотреть бот уведомлений, размещенный на Функции Azure, выполните следующую команду в каталоге проекта:

npm run prepare-storage:teamsapp

Отладка приложения

После начальной настройки Набор средств Teams запускает следующие процессы:

Запускает службы приложений
Запускает конфигурации отладки
Отправляет приложение 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
    ]
}

На следующем рисунке отображаются имена задач на вкладках ВЫВОД и ТЕРМИНАЛ Visual Studio Code при запуске вкладки, расширения бота или сообщения, а также Функции Azure.

Запуск локального туннеля

Используйте туннель разработки в качестве локальной службы туннелирования, чтобы сделать конечную точку сообщения локального бота общедоступной.

Туннель разработки

Чтобы вручную перенести задачу локального туннеля из проекта версии 4, обновите следующий код в .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 в файле , а также в portNumberindex.js файле или index.ts.vscode/tasks.json .

В следующей таблице перечислены необходимые аргументы:

Arguments	Тип	Обязательный	Описание
`type`	string	обязательно	Тип используемой службы туннеля. Для этого аргумента необходимо задать значение `dev-tunnel`.
`env`	string	необязательный	Имя среды. Teams Toolkit записывает переменные среды, определенные в , в `output.env.<env>` файл.
`ports`	массив	обязательно	Массив конфигураций портов, каждая из которых указывает номер локального порта, протокол и параметры управления доступом.

Аргумент ports должен быть массивом объектов, каждый из которых указывает конфигурацию для определенного порта. Каждый объект должен содержать следующие поля:

Port (Порт)	Тип	Обязательный	Описание
`portNumber`	число	Обязательный	Номер локального порта туннеля.
`protocol`	string	Обязательный	Протокол туннеля.
`access`	string	необязательный	Параметр управления доступом для туннеля. Для этого значения можно задать значение `private` или `public`. Если этот атрибут не задан, по умолчанию используется значение `private`.
`writeToEnvironmentFile`	объект	необязательный	Ключ переменных конечной точки туннеля и среды домена туннеля, записанных в `.env` файл.

Объект writeToEnvironmentFile содержит два поля:

WriteToEnvironmentFile	Тип	Обязательный	Описание
`endpoint`	string	необязательный	Ключ переменной среды конечной точки туннеля.
`domain`	string	необязательный	Ключ переменной среды домена туннеля.

При writeToEnvironmentFile включении указанные переменные среды записываются в .env файл. Если поле опущено, переменные среды не записываются в файл.

Запускает конфигурации отладки

Запускает конфигурации отладки, определенные в .vscode/launch.json.

Снимок экрана: отладчик запуска.

В следующей таблице перечислены имена и типы конфигураций отладки для проекта с вкладкой, ботом или приложением расширения сообщений, а также Функции Azure:

Компонент	Имя конфигурации отладки	Тип конфигурации отладки
Tab	Присоединение к интерфейсу (edge) или присоединение к интерфейсу (Chrome)	msedge или chrome
Бот или расширения для сообщений	Присоединение к боту	Узла
Функции Azure	Присоединение к внутренней службе	Узла

В следующей таблице перечислены имена и типы конфигураций отладки для проекта с приложением-ботом, Функции Azure и без приложения вкладки.

Компонент	Имя конфигурации отладки	Тип конфигурации отладки
Бот или расширение для сообщений	Запуск бота (Edge) или запуск бота (Chrome)	msedge или chrome
Бот или расширение для сообщений	Присоединение к боту	Узла
Функции Azure	Присоединение к внутренней службе	Узла

Отправляет приложение Teams

Конфигурация Подключение к интерфейсу или Запуск приложения запускает экземпляр браузера Microsoft Edge или Chrome для загрузки клиента Teams на веб-странице. После загрузки клиента Teams отправьте приложение Teams, управляемое URL-адресом отправки, определенным в конфигурациях запуска Microsoft Teams. Когда клиент Teams загружается в веб-браузере, выберите Добавить или выберите параметр в раскрывающемся списке согласно вашим требованиям.

Ваше приложение добавлено в Teams!

Следующее действие

Процесс отладки в фоновом режиме

Локальная отладка приложения Teams