通过

将 Outlook 外接程序添加到 Teams 应用

  • 项目

提示

本文通过让你从新创建的 Teams 应用和 Outlook 加载项开始，帮助你了解如何创建组合的 Teams 应用和 Office 加载项。 有关合并 Teams 应用和 Office 加载项（包括现有 Teams 应用和已在使用的加载项）的常规过程的概述，请参阅 合并 Outlook 外接程序和 Teams 应用的常规指南。

简介

Outlook 外接程序 是扩展 Outlook 功能的 Web 应用。 使用 Outlook 外接程序，您可以：

  • 读取和写入电子邮件，并参与会议邀请、答复、取消和约会。
  • 读取用户邮箱的属性。
  • 自动响应事件，例如发送电子邮件。
  • 与外部服务（包括 CRM 和项目管理工具）集成。
  • 添加自定义功能区按钮或菜单项以执行特定任务。

将 Outlook 外接程序与 Teams 应用程序集成可实现两者都无法独立实现的方案。 请考虑这样一种情况：销售人员可以在发送给客户的电子邮件中插入自定义折扣，并将产品/服务记录在后端数据库中。 销售经理还可以查看有关 Teams 选项卡中提供的所有折扣的数据。有关详细信息，请参阅 折扣套餐示例。

Outlook 外接程序概述 提供了有关 Outlook 外接程序的功能、其结构方式、扩展 Outlook 的旧方法的改进方式、加载项可在 (Windows、Mac、移动和 Web) 上运行哪些平台以及如何开始创建 Outlook 加载项的信息。

本文将指导你完成将 Outlook 外接程序添加到 Teams 应用、对其进行测试，然后将其部署到 Azure 的步骤。

先决条件

在开始之前，请确保满足以下要求：

  • 包含 Teams 的 Microsoft 365 帐户，用于测试应用程序。 或者，你可以对 Microsoft 365 和 Teams 拥有单独的订阅。 例如，通过 Microsoft 365 开发人员计划使用 *.onmicrosoft.com 的测试帐户。
  • Microsoft 365 帐户将添加为桌面 Outlook 中的帐户。 有关详细信息，请参阅 将电子邮件帐户添加到 Outlook。
  • 具有将 Teams 应用部署到 Azure 的活动订阅的 Azure 帐户。 如果没有，可以创建 免费的 Azure 帐户。
  • 使用最新版本的 Teams 工具包创建的 Teams 应用。

将 Outlook 外接程序添加到 Teams 应用

若要将 Outlook 外接程序添加到 Teams 应用，请执行以下操作：

  1. 准备 Teams 应用项目。
  2. 创建最初 与 Teams 应用项目分开的 Office 外接程序项目。
  3. 将 Outlook 外接程序项目中的清单合并到 Microsoft 365 的统一清单中。
  4. 将 Outlook 外接程序文件复制到 Teams 应用项目。
  5. 编辑工具配置文件。
  6. 同时在本地运行应用和加载项
  7. 将应用程序移动到 Azure。

准备 Teams 应用项目

首先，将选项卡 (或机器人) 的源代码分隔到其自己的子文件夹中。 这些说明假定项目最初具有以下结构。 若要使用此结构创建 Teams 应用项目，请使用最新的 Teams 工具包版本。

|-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- node_modules/
|-- src/
|-- .gitignore
|-- .localConfigs
|-- .webappignore
|-- package-lock.json
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml
|-- tsconfig.json
|-- web.config

注意

如果使用的是新的 Teams 选项卡项目，则不存在node_modules文件夹和package-lock.json文件。 在项目的根目录中运行时 npm install ，将在后面的步骤中创建node_modules。 除非在项目上运行生成脚本，否则生成文件夹不存在。

若要分隔选项卡或机器人的源代码，请执行以下步骤：

  1. 在 (或机器人) 的根下创建名为 选项卡的文件夹。

    注意

    为简单起见，本文的其余部分假定现有 Teams 应用是一个选项卡。如果开始使用机器人，请在所有这些说明中将“选项卡”替换为“机器人”，包括你在各种文件中添加或编辑的内容。

  2. 将基础结构文件夹复制到新的子文件夹中，然后从新的选项卡>基础结构文件夹中删除azure.parameters.json该文件。

  3. 将 node_modules 和 src 文件夹移动到新的子文件夹中。

  4. 将 .webappignore、、package-lock.jsonpackage.json、 tsconfig.json和 web.config 文件移到新的子文件夹中。

    |-- .vscode/
|-- appPackage/
|-- build
|-- env/
|-- infra/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- teamsapp.local.yml
|-- teamsapp.yml

  5. package.json在刚刚移动到选项卡文件夹的 中，从 对象中删除名为 的dev:teamsfxscripts脚本。 在下一步中，此脚本将添加到新的 package.json 。

  6. 在项目的根目录中创建名为 package.json 的新文件，并添加以下内容：

    {
    "name": "CombinedTabAndAddin",
    "version": "0.0.1",
    "author": "Contoso",
    "scripts": {
        "dev:teamsfx": "env-cmd --silent -f .localConfigs npm run start:tab",
        "build:tab": "cd tab && npm run build",
        "install:tab": "cd tab && npm install",
        "start:tab": "cd tab && npm run start",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "devDependencies": {
        "@microsoft/teamsfx-cli": "2.0.2-alpha.4f379e6ab.0",
        "@microsoft/teamsfx-run-utils": "alpha",
        "env-cmd": "^10.1.0",
        "office-addin-dev-settings": "^2.0.3",
        "ncp": "^2.0.0"
    }
}

  7. 根据需要更改 name、 version和 author 属性。

  8. teamsapp.yml打开项目根目录中的文件，找到行 ignoreFile: .webappignore，然后将其更改为 ignoreFile: ./tab/.webappignore。

  9. teamsapp.local.yml打开项目根目录中的 文件，找到 行 args: install --no-audit，并将此更改为 args: run install:tab --no-audit。

  10. 在 Visual Studio Code 中打开终端。 导航到项目的根目录并运行 npm install。 在项目根目录中创建一个新node_modulespackage.lock.json文件夹和新文件。

  11. 接下来运行 npm run install:tab。 如果尚未创建一个新 node_modules 文件夹和一个新文件，则会在选项卡文件夹中创建一个新 package.lock.json 文件。

  12. 通过以下步骤验证是否可以旁加载选项卡：

    1. 打开 Teams 工具包。

    2. 在 “帐户 ”部分中，验证是否已登录到 Microsoft 365 帐户。

    3. 选择“查看>Visual Studio Code中的运行”。

    4. 在 “运行和调试 ”下拉菜单中，选择“ 在 Teams (Edge) 调试 ”，然后按 F5。

      项目生成并运行。 此过程可能需要几分钟时间。 完成后，Teams 会在浏览器中打开，并提示添加选项卡应用。

      注意

      如果这是你第一次在此计算机上调试 Teams 应用，系统会提示你安装 SSL 证书。 选择 “安装 ”，然后在第二个提示符下选择“ 是 ”。 如果系统提示，请登录到 Microsoft 365 帐户。

    5. 选择“添加”。

    6. 若要停止调试并卸载应用，请选择“在Visual Studio Code中运行>停止调试”。

创建 Outlook 外接程序项目

  1. 打开Visual Studio Code的第二个实例。

  2. 从 活动栏中选择“Teams 工具包”。

  3. 选择“ 创建新应用”。

  4. 在 “选择选项 ”下拉菜单中，选择“ Outlook 加载项>任务窗格”。

  5. 选择要在其中创建加载项的文件夹。

  6. 出现提示时，为项目指定一个名称 (，) 没有空格。

    Teams 工具包使用基本文件和基架创建项目，并在新的Visual Studio Code窗口中打开它。 你将使用此项目作为添加到 Teams 项目的文件和标记的源。

  7. 尽管不会开发此项目，但在继续操作之前，请执行以下步骤验证是否可以从Visual Studio Code旁加载该项目：

    1. 确保 Outlook 桌面已关闭。

    2. 打开 Visual Studio Code。

    3. 从 活动栏中选择“Teams 工具包”。

    4. 在 “帐户 ”部分中，验证是否已登录到 Microsoft 365。

    5. 选择“查看>Visual Studio Code中的运行”。

    6. 在“运行和调试”下拉菜单中，选择“Outlook 桌面 (Edge Chromium) ，然后按 F5。

      项目生成并打开 Webpack 开发服务器窗口。 此过程可能需要几分钟时间，并打开 Outlook 桌面窗口。

    7. 转到 Outlook。

    8. 打开 Microsoft 365 帐户标识的 收件箱 。

    9. 打开任何邮件。

      如果在“主页”功能区 (或“邮件”功能区) 打开邮件，则会在“主页”功能区上显示包含两个按钮的 Contoso 外接程序选项卡。

    10. 选择“ 显示任务窗格” 按钮。 此时会打开一个任务窗格。

    11. 选择“执行操作”按钮。 邮件顶部附近会显示一条小通知。

    12. 若要停止调试并卸载加载项，请选择“在Visual Studio Code运行>停止调试”。 如果 Webpack 开发服务器窗口未关闭，请打开项目根目录中Visual Studio Code终端并运行 npm stop。

合并清单

Teams 应用的清单是在调试和旁加载时生成， (或生成时) Teams manifest.json 项目的 \appPackage 文件夹中的文件。 此文件是清单的 模板 。 在本文中，它称为 模板 或 清单模板。 大多数标记都硬编码到模板中，但也有一些配置文件包含将数据添加到最终生成的清单。 在此过程中，执行以下任务：

  • 将标记从加载项清单复制到 Teams 应用的清单模板。
  • 编辑配置文件。

除非另行指定，否则更改的文件为 \appPackage\manifest.json。

  1. 将外接程序清单中的“$schema”和“manifestVersion”属性值复制到 Teams 应用的清单模板文件的相应属性。

  2. 根据需要修改“name.full”、“description.short”和“description.full”属性值，以反映 Outlook 加载项是应用一部分的事实。

  3. 对“name.short”值执行相同的操作。

    建议将 保留在 ${{TEAMSFX_ENV}} 名称的末尾。 在 localhost 上进行调试时，此变量将替换为字符串“local”;从远程域或生产模式进行调试时，此变量将替换为“dev”。

    注意

    从历史上看，Office 外接程序开发人员文档使用术语“dev”或“开发模式”来指在 localhost 上运行加载项。 它使用术语“prod”或“生产模式”来指在远程主机上运行外接程序以用于暂存或生产。 Teams 开发人员文档使用术语“local”来指在 localhost 上运行加载项，使用术语“dev”来指在远程主机上运行加载项进行远程调试，这通常称为“暂存”。我们正在努力让术语保持一致。

    以下 JSON 是一个示例：

    "short": "Contoso Tab and Add-in-${{TEAMSFX_ENV}}",

    注意

    “name.short”值显示在 Teams 选项卡功能和 Outlook 加载项中。 下面是一些示例：

    • 它是“Teams”选项卡的“启动”按钮下的标签。
    • 它是加载项任务窗格的标题栏的内容。

  4. 如果更改了默认 (“name.short”值是项目名称后跟 ${{TEAMSFX_ENV}} 变量) ，请在项目根目录中以下两个文件中显示项目名称的所有位置进行完全相同的更改：teamsapp.yml和teamsapp.local.yml。

  5. 如果 Teams 清单模板中没有“authorization.permissions.resourceSpecific”数组，请从外接程序清单中将其作为顶级属性复制。 如果 Teams 模板中已有一个对象，请将外接程序清单中的数组中的任何对象复制到 Teams 模板中的数组。 以下 JSON 是一个示例：

    "authorization": {
    "permissions": {
        "resourceSpecific": [
            {
                "name": "MailboxItem.Read.User",
                "type": "Delegated"
            }
        ]
    }
},

  6. 在 文件中env/.env.local，找到向 和 TAB_ENDPOINT 变量赋值的TAB_DOMAIN行。 在它们正下方添加以下行：

    ADDIN_DOMAIN=localhost:3000
ADDIN_ENDPOINT=https://localhost:3000

  7. 在 文件中 env/.env.dev ，将以下行 TAB_ENDPOINT= 添加到 ...线：

    ADDIN_ENDPOINT=

  8. 在 Teams 清单模板中，将占位符 "${{ADDIN_DOMAIN}}", 添加到数组顶部 "validDomains" 。 在本地开发时，Teams 工具包会将其替换为 localhost 域。 将完成的组合应用部署到过渡或生产时，如将 应用程序移动到 Azure 中所述，Teams 工具包会将占位符替换为过渡/生产 URI。 以下 JSON 是一个示例：

    "validDomains": [
    "${{ADDIN_DOMAIN}}",

    // other domains or placeholders
],

  9. 将外接程序清单中的整个“extensions”属性作为顶级属性复制到 Teams 应用清单模板中。

将 Outlook 外接程序文件复制到 Teams 应用项目

  1. 在 Teams 应用项目中创建名为 add-in 的顶级文件夹。

  2. 将以下文件和文件夹从外接程序项目复制到 Teams 应用项目的 外接程序 文件夹。

    • /appPackage
    • /infra
    • /src
    • .eslintrc.json
    • babel.config.json
    • package-lock.json
    • package.json
    • tsconfig.json
    • webpack.config.js

  3. 完成复制后，删除 manifest.json/add-in/appPackage 文件夹中的文件。

    文件夹结构现在必须如以下示例所示：

    |-- .vscode/
|-- add-in/
|-- |-- appPackage/assets/
|-- |-- infra/
|-- |-- src/
|-- |-- .eslintrc.json
|-- |-- babel.config.json
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- webpack.config.js
|-- appPackage/
|-- build\appPackage/
|-- env/
|-- infra/
|-- node_modules/
|-- tab/
|-- |-- infra/
|-- |-- node_modules/
|-- |-- src/
|-- |-- .webappignore
|-- |-- package-lock.json
|-- |-- package.json
|-- |-- tsconfig.json
|-- |-- web.config
|-- .gitignore
|-- .localConfigs
|-- package.json
|-- teamsapp.local.yml
|-- teamsapp.yml

编辑工具配置文件

  1. 打开 package.json 项目根目录中的文件。

  2. 将以下脚本添加到“scripts”对象：

    "install:add-in": "cd add-in && npm install",
"postinstall": "npm run install:add-in && npm run install:tab",
"build:add-in": "cd add-in && npm run build",
"build:add-in:dev": "cd add-in && npm run build:dev",
"build": "npm run build:tab && npm run build:add-in",

  3. package.json打开加载项文件夹中的文件 (而不是选项卡文件夹或项目) 的根目录。

  4. 对象中的 scripts 三个 manifest.json 脚本具有参数，如以下示例所示：

    "start": "office-addin-debugging start appPackage/manifest.json",
"stop": "office-addin-debugging stop appPackage/manifest.json",
"validate": "office-addin-manifest validate appPackage/manifest.json",

    在脚本中start，将 更改为 ../appPackage/build/appPackage.local.zipappPackage/manifest.json 。 完成后，该行必须如下所示：

    "start": "office-addin-debugging start ../appPackage/build/appPackage.local.zip",

    validate在 和 stop 脚本中，将 参数更改为 ../appPackage/build/manifest.local.json。 完成后，更新必须如下所示：

    "stop": "office-addin-debugging stop ../appPackage/build/manifest.local.json",
"validate": "office-addin-manifest validate ../appPackage/build/manifest.local.json",

  5. 在 Visual Studio Code 中，打开终端。

  6. 导航到 加载项 文件夹并运行命令 npm install。

  7. 在 加载项 文件夹中，打开 webpack.config.js 文件。

  8. 将行 from: "appPackage/manifest*.json", 更改为 from: "../appPackage/build/manifest*.json",。

  9. 在项目的根目录中，打开 teamsapp.local.yml 文件并找到 provision 节。 #使用 字符注释掉验证清单模板的行。 这是必要的，因为 Teams 清单验证系统尚与你对清单模板所做的更改不兼容。 完成后，这些行应如以下代码所示：

    # - uses: teamsApp/validateManifest
#   with:
#     # Path to manifest template
#     manifestPath: ./appPackage/manifest.json

    确保仅注释掉部分 teamsApp/validateManifest 。 不要注释掉该 teamsManifest/validateAppPackage 部分。

  10. 对 teamsapp.yml 文件重复上述步骤。 这三行在 和 publish 节中找到provision。 在这两个地方都评论他们。

  11. .vscode\tasks.json打开外接程序项目中的 文件，并复制数组中的所有tasks任务。 将它们添加到 tasks Teams 项目中同一文件的数组中。 不要删除任何已经存在的任务。 请确保所有任务都用逗号分隔。

  12. 在刚刚复制的每个任务对象中，添加以下 options 属性，以确保这些任务在 外接程序 文件夹中运行。

    "options": {
    "cwd": "${workspaceFolder}/add-in/"
}

    例如，完成后， Debug: Outlook Desktop 任务必须如以下 JSON 所示。

    {
    "label": "Debug: Outlook Desktop",
    "type": "npm",
    "script": "start",
    "dependsOn": [
      "Check OS",
      "Install"
    ],
    "presentation": {
      "clear": true,
      "panel": "dedicated",
    },
    problemMatcher": [],
    "options": {
        "cwd": "${workspaceFolder}/add-in/"
    }
}

  13. 将以下任务添加到项目文件中的 tasks 数组 .vscode\tasks.json 。 除其他事项外，此任务将创建最终清单。

    {
    // Create the debug resources.
    // See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
    "label": "Create resources",
    "type": "teamsfx",
    "command": "provision",
    "args": {
        "template": "${workspaceFolder}/teamsapp.local.yml",
        "env": "local"
    }
},

  14. 将以下任务添加到 tasks 数组。 请注意，它会添加一个 Start Add-in Locally 任务，该任务将选项卡应用 Create resources 的任务与加载项的调试任务相结合，并指定它们必须按该顺序运行。

    {
    "label": "Start Add-in Locally",
    "dependsOn": [
        "Create resources",
        "Debug: Outlook Desktop"
    ],
    "dependsOrder": "sequence"
},

  15. 将以下任务添加到 tasks 数组。 它将任务与 合并，Start Teams App LocallyStart Add-in Locally并指定它们必须按该顺序运行。

     {
     "label": "Start App and Add-in Locally",
     "dependsOn": [
         "Start Teams App Locally",
         "Start Add-in Locally"
     ],
     "dependsOrder": "sequence"
 },

  16. 打开项目中的 .vscode\launch.json 文件，该文件在 Visual Studio Code 中配置 RUN AND DEBUG UI，并将以下两个对象添加到“配置”数组的顶部。

    {
    "name": "Launch Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start Add-in Locally",
    "postDebugTask": "Stop Debug"
},
{
    "name": "Launch App and Add-in Outlook Desktop (Edge Chromium)",
    "type": "msedge",
    "request": "attach",
    "port": 9229,
    "timeout": 600000,
    "webRoot": "${workspaceRoot}",
    "preLaunchTask": "Start App and Add-in Locally",
    "postDebugTask": "Stop Debug"
},

  17. compounds在同一文件的 节中，将Debug in Teams (Edge)复合重命名为 Launch App Debug (Edge) ，并将该Debug in Teams (Chrome)复合重命名为 Launch App Debug (Chrome)。

  18. 通过以下步骤验证是否可以将 Teams 应用的加载项功能旁加载到 Outlook：

    1. 确保 Outlook 桌面已关闭。

    2. 打开 Visual Studio Code。

    3. 从 活动栏中选择“Teams 工具包”。

    4. 在 “帐户 ”部分中，验证是否已登录到 Microsoft 365。

    5. 选择“查看>Visual Studio Code中的运行”。

    6. 在“运行和调试”下拉菜单中，选择“启动外接程序 Outlook 桌面 (Edge Chromium) ，然后按 F5。 项目生成并打开 Webpack 开发服务器窗口。 此过程可能需要几分钟时间，并打开 Outlook 桌面窗口。

    7. 转到 Outlook。

    8. 打开 Microsoft 365 帐户标识的 收件箱 。

    9. 打开任何邮件。

      如果在“主页”功能区 (或“邮件”功能区) 打开邮件，则会在“主页”功能区上显示包含两个按钮的 Contoso 外接程序选项卡。

    10. 选择“ 显示任务窗格” 按钮。 此时会打开一个任务窗格。

    11. 选择“执行操作”按钮。 邮件顶部附近会显示一条小通知。

    12. 若要停止调试并卸载加载项，请选择“在Visual Studio Code运行>停止调试”。 如果 Webpack 开发服务器窗口未关闭，请打开项目根目录中Visual Studio Code终端并运行 npm stop。

同时在本地运行应用和加载项

可以同时旁加载和运行应用和外接程序，但调试器无法在两者运行时可靠地附加。 因此，若要进行调试，一次只运行一个。

若要调试应用，请参阅 准备 Teams 应用项目 部分的最后一步。

若要调试加载项，请参阅 编辑工具配置文件 部分的最后一步。

若要查看应用和加载项同时运行，请执行以下步骤。

  1. 确保 Outlook 桌面已关闭。

  2. 打开 Visual Studio Code。

  3. 从 活动栏中选择“Teams 工具包”。

  4. 在 “帐户 ”部分中，验证是否已登录到 Microsoft 365。

  5. 选择“查看>Visual Studio Code中的运行”。

  6. 在“运行和调试”下拉菜单中，选择“启动应用和外接程序 Outlook 桌面 (Edge Chromium) ，然后按 F5。 项目生成并打开 Webpack 开发服务器窗口。 选项卡应用托管在 Visual Studio Code 终端中。 此过程可能需要几分钟时间，并发生以下操作：

    • Teams 将在浏览器中打开，并提示添加选项卡应用。 如果到 Outlook 桌面打开时尚未打开 Teams，则自动旁加载失败。 可以手动旁加载它，以查看应用和加载项同时运行。 有关旁加载说明，请参阅 在 Teams 中上传应用。 你将在 中找到要上传 C:\Users\{yourname}\AppData\Local\Temp的 manifest.zip 文件。
    • Outlook 桌面随即打开。

  7. 在 Teams 提示符中，选择“ 添加 ”，选项卡随即打开。

  8. 转到 Outlook。

  9. 在 Outlook 中，打开 Microsoft 365 帐户标识的 收件箱 。

  10. 打开任何邮件。

    如果在“主页”功能区 (或“邮件”功能区) 打开邮件，则会在“主页”功能区上显示包含两个按钮的 Contoso 外接程序选项卡。

  11. 选择“ 显示任务窗格” 按钮。 此时会打开一个任务窗格。

  12. 选择“执行操作”按钮。 邮件顶部附近会显示一条小通知。

  13. 若要停止调试并卸载加载项，请选择“在Visual Studio Code运行>停止调试”。 如果 Webpack 开发服务器窗口未关闭，请打开项目根目录中Visual Studio Code终端并运行 npm stop。

  14. 如果必须手动旁加载 Teams 选项卡应用，请根据 删除应用中的说明将其从 Teams 中删除。

将应用程序移动到 Azure

  1. teamsapp.yml打开项目根目录中的 文件，找到行 deploymentName: Create-resources-for-tab。 将其更改为 deploymentName: Create-resources-for-tab-and-addin。

  2. 在同一文件中，将以下代码添加到 节的 provision: 末尾。

    注意

    缩进在 YAML 中有意义，因此 - uses 和 - name 语句应缩进两个空格， with 语句应与 uses对齐，并且 的 with 子级应缩进两个空格。

    provision:

  -- other YAML omitted --

  - uses: azureStorage/enableStaticWebsite
    with:
      storageResourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}
      indexPage: index.html
      errorPage: error.html

  3. 在同一文件中，将整个 deploy: 部分替换为以下代码。 这些更改考虑到了新的文件夹结构以及需要部署加载项和选项卡文件这一事实。

    deploy:
  - name: InstallAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: install

  - name: BuildAllCapabilities
    uses: cli/runNpmCommand # Run npm command
    with:
      args: run build --if-present

  - name: DeployTab
    uses: azureAppService/zipDeploy
    with:
      artifactFolder: tab
      ignoreFile: ./tab/.webappignore
      # The ID of the cloud resource where the tab app will be deployed.
      # This key will be generated by arm/deploy action automatically.
      resourceId: ${{TAB_AZURE_APP_SERVICE_RESOURCE_ID}} 

  - name: DeployAddin
    uses: azureStorage/deploy
    with:
      workingDirectory: .
      # Deploy base folder
      artifactFolder: add-in/dist
      # The ID of the cloud resource where the add-in will be deployed.
      resourceId: ${{ADDIN_AZURE_STORAGE_RESOURCE_ID}}

  4. infra/azure.parameters.json打开项目根目录中的文件，并将其内容替换为以下 JSON：

    {
    "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
    "contentVersion": "1.0.0.0",
    "parameters": {
      "resourceBaseName": {
        "value": "tabandaddin${{RESOURCE_SUFFIX}}"
      },
      "webAppSku": {
        "value": "F1"
      },
      "storageSku": {
        "value": "Standard_LRS"
      }
    }
}

  5. infra/azure.bicep打开项目根目录中的文件 (不是选项卡或外接程序子文件夹中的文件) ，并使用以下代码替换其内容：

    // Params for Teams tab resources
@maxLength(20)
@minLength(4)
@description('Used to generate names for all resources in this file')
param resourceBaseName string
param webAppSku string
param serverfarmsName string = resourceBaseName
param webAppName string = resourceBaseName
param location string = resourceGroup().location
param storageSku string
param storageName string = resourceBaseName

module tabModule '../tab/infra/azure.bicep' = {
  name: 'tabModule'
  params: {
    resourceBaseName: resourceBaseName
    webAppSku: webAppSku
    serverfarmsName: serverfarmsName
    webAppName: webAppName
    location: location
  }
}

module addinModule '../add-in/infra/azure.bicep' = {
  name: 'addinModule'
  params: {
    resourceBaseName: resourceBaseName
    storageSku: storageSku
    storageName: storageName
    location: location
  }
}

// The output will be persisted in .env.{envName}. Visit https://aka.ms/teamsfx-actions/arm-deploy for more details.
output TAB_AZURE_APP_SERVICE_RESOURCE_ID string = tabModule.outputs.TAB_AZURE_APP_SERVICE_RESOURCE_ID // used in deploy stage
output TAB_DOMAIN string = tabModule.outputs.TAB_DOMAIN
output TAB_ENDPOINT string = tabModule.outputs.TAB_ENDPOINT

output ADDIN_AZURE_STORAGE_RESOURCE_ID string = addinModule.outputs.ADDIN_AZURE_STORAGE_RESOURCE_ID // used in deploy stage
output ADDIN_DOMAIN string = addinModule.outputs.ADDIN_DOMAIN
output ADDIN_ENDPOINT string = addinModule.outputs.ADDIN_ENDPOINT

  6. 在 Visual Studio Code 中，打开 Teams 工具包。

  7. 在 “帐户 ”部分中，除了登录到 Microsoft 365 帐户) 外，请确保已登录到 Azure 帐户 (。 有关登录的详细信息，请打开 “练习 - 创建 Azure 资源以托管 Teams 选项卡应用 ”，并滚动到 “在 Teams 工具包中登录到 Azure ”部分。

  8. 在 Teams 工具包的 “生命周期 ”部分中，选择“ 预配”。 可能需要几分钟时间。 系统可能会提示你选择一个 Azure 资源组。

  9. 预配完成后，选择“ 部署 ”，将应用代码部署到 Azure。

从远程部署运行选项卡功能

  1. 在“Visual Studio Code”中，选择“查看>运行”。
  2. 在下拉菜单中，选择“ 在 Teams (Edge) 中启动远程 ”或“ 在 Teams 中启动远程” (Chrome) 。
  3. 按 F5 预览 Teams 选项卡功能。

从远程部署运行加载项功能

  1. 从 ADDIN_ENDPOINT 文件中 env/.env.dev 复制生产 URL。

  2. 编辑 \add-in\webpack.config.js 文件并将常量值更改为 urlProd 刚复制的值。 请务必在 URL 的末尾添加“/”。

  3. 在Visual Studio Code终端中，导航到项目的根目录，然后运行 npm run build:add-in。

  4. 将文件 \add-in\dist\manifest.dev.json 复制到 \appPackage 文件夹。

  5. 将 文件夹中的副本 \appPackage 重命名为 manifest.addinPreview.json。

  6. 在 终端中，运行 npx office-addin-dev-settings sideload .\appPackage\manifest.addinPreview.json。 此过程可能需要几分钟时间，然后打开 Outlook 桌面。 (如果系统提示安装 office-addin-dev-settings，请响应 yes。)

  7. 转到 Outlook。

  8. 打开 Microsoft 365 帐户标识的 收件箱 。

  9. 打开任何邮件。

    如果在“主页”功能区 (或“邮件”功能区) 打开邮件，则会在“主页”功能区上显示包含两个按钮的 Contoso 外接程序选项卡。

  10. 选择“ 显示任务窗格” 按钮。 此时会打开一个任务窗格。

  11. 选择“执行操作”按钮。 邮件顶部附近会显示一条小通知。

下一步操作

还有其他通常建议的后续步骤，例如：

另请参阅