练习 - 创建 Azure 资源以托管 Teams 选项卡应用

  • 8 分钟

在本练习中，你将首先使用 Teams Toolkit for Visual Studio Code 创建和预配 Teams 选项卡应用。 在后面的练习中，你将设置要托管在 Azure 中的应用。

注意

本培训模块中的练习使用 Teams 工具包 v5.0.0。 以下步骤从安装 Teams 工具包扩展开始。

创建新的选项卡应用

  1. 在 Visual Studio Code 的“活动栏”上，选择 “Microsoft Teams ”图标。

  2. 在“Teams 工具包”面板上，选择“ 创建新应用” 按钮。

  3. 在选项中，选择“ Tab”。

    用于选项卡应用的 Teams 工具包选项的屏幕截图。

  4. 接下来，选择“ React with Fluent UI”。

    Teams 工具包应用模板的屏幕截图，其中选择了选项卡。

  5. 从编程语言的选项中，选择“ JavaScript”。

  6. 选择选项卡应用项目文件夹及其所有文件的位置。

  7. 对于应用程序名称，请输入 hello-tab ，然后选择 Enter。

    项目基架开始。 当项目搭建基架时，将打开一个新的 Visual Studio Code 窗口，其中加载了新项目。

    Teams 工具包新选项卡项目搭建基架后的屏幕截图。

  8. 在 Visual Studio Code 中，选择“ 运行>开始调试 ”或选择 F5 键以启动调试会话。

    Visual Studio Code 生成并启动应用程序。 在开始预配任何 Azure 资源之前运行调试会话。

  9. 成功测试应用后，停止在本地运行应用。

    若要结束调试会话并停止运行应用，可以关闭浏览器，选择 “运行>停止调试”，或选择“Shift+F5”。

在 Teams 工具包中登录到 Azure

接下来，在 Teams 工具包面板上登录到 Azure。

  1. 在“活动栏”上，选择 “Microsoft Teams ”图标。

  2. 在“Teams 工具包”面板的“ 帐户”下，选择“ 登录到 Azure”。

    Teams 工具包面板的屏幕截图，其中包含用于登录 Azure 的按钮。

  3. 在显示的对话框中，选择“ 登录”。

    用于确认登录到 Azure 的对话框的屏幕截图。

预配资源

现在可以预配 Teams 选项卡应用所需的资源。

  1. 在“Teams 工具包”面板的 “生命周期”下，选择“ 预配”。

    突出显示“部署”部分中的“在云中预配”选项的屏幕截图。

  2. 接下来，需要选择可在其中预配资源的资源组。 通过选择“选择资源组”菜单上的“新建资源组”选项创建新的资源组。

    显示如何创建新资源组的屏幕截图。

  3. 该工具会自动建议资源组名称，例如 rg-hello-tab0989fd-dev。 选择“Enter”。

  4. 接下来，选择新资源组的 “美国东部 ”位置，然后选择“Enter”。

  5. 在确认选择的对话框中，选择“ 预配”。

    用于确认预配的对话框的屏幕截图。

    为在 Azure 中托管 Teams 选项卡应用所需的所有资源开始预配。 预配可能需要一段时间。

现已成功预配托管 Teams 选项卡应用程序所需的所有资源。

接下来，你将应用源代码部署到这些资源。