Čítať v angličtine Upraviť

Zdieľať cez

Build your first bot app using JavaScript

Deploy your first Teams app

You've learned to create, build, and run Teams app with Bot capability. The final step is to deploy your app on Azure.

Let's deploy the first app with Bot capability on Azure using Teams Toolkit.

Sign in to your Azure account

Use this account to access the Microsoft Azure portal and to provision new cloud resources to support your app.

  1. Open Visual Studio Code.

  2. Open the project folder in which you created the bot app.

  3. Select the Teams Toolkit icon in the sidebar.

  4. Select Sign in to Azure using your credentials.

    Tip

    If you have the AZURE ACCOUNT extension installed and are using the same account, you can skip this step. Use the same account as you are using in other extensions.

    Your default web browser opens to let you sign in to the account.

  5. Close the browser when prompted and return to Visual Studio Code.

    The ACCOUNTS section of the sidebar shows the two accounts separately. It also lists the number of usable Azure subscriptions available to you. Ensure you have at least one usable Azure subscription available. If not, sign out and use a different account.

    Congratulations, you have created a Teams app! Now let's go ahead and learn how to deploy one of the apps to Azure using the Teams Toolkit.

Deploy your app to Azure

Deployment consists of two steps. First, Azure creates necessary cloud resources (also known as provisioning). Then, Azure copies your app's code into the created cloud resources. For this tutorial, you'll deploy the bot app.

What's the difference between Provision and Deploy?
The Provision step creates resources in Azure and Microsoft 365 for your app, but doesn't copy code (HTML, CSS, or JavaScript) to the resources. The Deploy step copies the code for your app to the resources you created during the provision step. It's common to deploy multiple times without provisioning new resources. Since the provision step can take some time to complete, it's separate from the deployment step.

Select the Teams Toolkit icon in the Visual Studio Code sidebar.

  1. Select Provision.

    Screenshot shows the selection of provision in the cloud under Teams toolkit.

  2. Select a subscription to use for the Azure resources.

    Screenshot shows the subscription to use for the Azure resources.

    Your app is hosted using Azure resources.

    A dialog warns you that costs may be incurred when running resources in Azure.

  3. Select Provision.

    Screenshot shows a dialog box that costs may be incurred when running resources in Azure.

    The provisioning process creates resources in the Azure cloud. It may take some time. You can monitor the progress by watching the dialogs in the bottom-right corner. After a few minutes, you see the following notice:

    Screenshot shows a notice, which displays hellomsg successfully provisioned in the cloud.

    If you want, you can view the provisioned resources. For this tutorial, you don't need to view resources.

    The provisioned resource appears in the ENVIRONMENT section.

    Screenshot shows the resource being provisioned in the environment section.

  4. Select Deploy from the LIFECYCLE panel after provisioning is complete.

    Screenshot shows deploy to cloud highlighted in red.

    As with provisioning, deployment takes some time. You can monitor the process by watching the dialogs in the bottom-right corner. After a few minutes, you see a completion notice.

Now, you can use the same process to deploy your Bot and Message Extension apps to Azure.

Run the deployed app

Once the provisioning and deployment steps are complete:

  1. Open the debug panel (Ctrl+Shift+D / ⌘⇧-D or View > Run) from Visual Studio Code.

  2. Select Launch Remote (Edge) from the launch configuration dropdown.

  3. Select the Start debugging (F5). You're prompted to sideload the bot app onto Teams.

    Screenshot shows the debug and launch app remotely.

  4. Select Add or use the dropdown menu to add your bot app to a team, chat, or meeting.

    Screenshot shows the app being installed in different scopes.

    You successfully added your bot app to the Teams client.

    Screenshot shows the learn card in the bot on Teams client.

Learn what happens when you deployed your app to Azure

Before deployment, the application has been running locally:

  • The backend runs using Azure Functions Core Tools.
  • The application HTTP endpoint, where Microsoft Teams loads the application, runs locally.

Deployment is a two-step process. You provision the resources on an active Azure subscription, and then deploy or upload the backend and frontend code for the application to Azure.

  • The backend, if configured, uses various Azure services, including Azure App Service and Azure Storage.
  • The frontend application is deployed to an Azure Storage account configured for static web hosting.