練習 - 建立 Azure 資源以裝載 Teams 索引標籤應用程式

  • 8 分鐘

在此練習中，您將先使用適用於 Visual Studio Code 的 Teams 工具組來建立及布建 Teams 索引卷標應用程式。 在稍後的練習中，您將設定要裝載在 Azure 中的應用程式。

注意事項

本訓練課程模組中的練習使用Teams Toolkit v5.0.0。 下列步驟會從安裝 Teams 工具組擴充功能開始。

建立新的索引標籤應用程式

  1. 在 Visual Studio Code 的 [活動列] 上，選取 [Microsoft Teams ] 圖示。

  2. 在 [Teams 工具組] 面板上，選取 [ 建立新的應用程式] 按鈕。

  3. 從選項中，選取 [ 索引卷標]。

    索引標籤應用程式的 Teams 工具組選項螢幕快照。

  4. 接下來，選取 [使用 Fluent UI 回應]。

    Teams 工具組應用程式範本的螢幕快照，其中已選取索引標籤。

  5. 從程式設計語言的選項中，選取 [JavaScript]。

  6. 選取索引標籤應用程式項目資料夾及其所有檔案的位置。

  7. 針對應用程式名稱，輸入 hello-tab ，然後選取 Enter。

    專案 Scaffolding 開始。 當專案已建構時，會開啟新的Visual Studio Code 視窗，並載入新專案。

    Teams 工具組新索引標籤專案在 Scaffold 之後的螢幕快照。

  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。 選取 [輸入]。

  4. 接下來，選取新資源群組 的 [美國東部 ] 位置，然後選取 Enter。

  5. 在確認您選取項目的對話框中，選取 [ 布建]。

    確認布建之對話框的螢幕快照。

    開始布建您在 Azure 中裝載 Teams 索引卷標應用程式所需的所有資源。 布建可能需要一些時間。

您現在已成功布建裝載 Teams 索引標籤應用程式所需的所有資源。

接下來，您會將應用程式的原始程式碼部署到這些資源。