Edit

Share via

Deploy the App to Azure Functions and Azure Container Apps

Important

In addition to the pre-requisites listed for this tutorial, you'll also need to install the following tools on your machine to complete this exercise.

In this exercise you'll learn how to deploy the Microsoft Graph and ACS functions discussed in earlier exercises to Azure Functions. You'll also build a container image and deploy it to Azure Container Apps.

Azure Container Apps

Deploy to Azure Functions

Note

This section uses Visual Studio to publish the C# functions to Azure. If you'd prefer to use Visual Studio Code, you can follow the instructions in the Create a C# function in Azure using Visual Studio Code quickstart.

  1. Open the samples/acs-video-to-teams-meeting/server/csharp/GraphACSFunctions.sln project in Visual Studio.

  2. Right-click on the GraphACSFunctions project and select Publish.

  3. Select Azure in the target section, then click Next.

  4. Select Azure Function App (Windows), then click Next.

  5. Select your subscription, then select + Create New.

  6. Enter the following information:

    • Function name: A globally unique name is required. Example: acsFunctions<YOUR_LAST_NAME>.
    • Subscription: Select your subscription.
    • Resource Group: Select a resource group you created earlier in this tutorial, or you can also create a new one.
    • Hosting Plan: Consumption plan.
    • Location: Select the region you'd like to deploy to.
    • Azure Storage: Create a new one. (You can also select an existing storage account.)
    • Azure Insights: Create a new one. (You can also select an existing storage account.)

    Note

    A globally unique name is required. You can make the name more unique by adding a number or your last name to the end of the name.

  7. Once the Azure Function App is created you'll see a confirmation screen. Make sure the Run from package option is selected, then select Finish.

  8. Select Publish to deploy the function to Azure.

  9. Once the function is deployed to Azure, go to the Azure portal and select the Function App you created.

  10. Copy the URL for the function you deployed. You'll use the value later in this exercise.

  11. Select Settings --> Configuration in the left menu.

  12. Select + New application setting button and add the following keys and values in the Application settings. You can retreive these values from local.settings.json in the GraphACSFunctions project.

    # Retrieve these values from local.settings.json
TENANT_ID: <YOUR_VALUE>
CLIENT_ID: <YOUR_VALUE>
CLIENT_SECRET: <YOUR_VALUE>
USER_ID: <YOUR_VALUE>
ACS_CONNECTION_STRING: <YOUR_VALUE>

  13. Select the Save button to save the settings.

  14. Finally, you need to enable CORS (Cross-Origin Resource Sharing) for the function app to make the function app's APIs accessible from outside of your domain. Select Settings --> CORS in the left menu.

  15. Enter * (accessible from any domains) in the Allowed Origins textbox, then select the Save button.

Deploy to Azure Container Apps

  1. The first task you'll perform is to create a new Azure Container Registry (ACR) resource. Once the registry is created, you'll build an image and push it to the registry.

  2. Open a command window and run the following command to login to your Azure subscription:

    az login

  3. Add the following shell variables substituting your values for the placeholders as appropriate. Add your <GITHUB_USERNAME> as a lowercase value and substitute your Azure Functions domain for the <AZURE_FUNCTIONS_DOMAIN> value (include the https:// in the domain value).

    GITHUB_USERNAME="<YOUR_GITHUB_USERNAME>"
RESOURCE_GROUP="<YOUR_RESOURCE_GROUP_NAME>"
ACR_NAME="aca"$GITHUB_USERNAME
AZURE_FUNCTIONS_DOMAIN="<YOUR_AZURE_FUNCTIONS_URL>"

  4. Create a new Azure Container Registry resource by running the following command:

    az acr create \
    --resource-group $RESOURCE_GROUP \
    --name $ACR_NAME \
    --sku Basic \
    --admin-enabled true

  5. Open the client/react/Dockerfile file in your editor and notice that the following tasks are performed:

    • The React application is built and assigned to the build stage.
    • The nginx server is configured and the output of the build stage is copied into the nginx server image.

  6. Build the container image in Azure by running the following command from the root of the client/react folder. Replace <YOUR_FUNCTIONS_DOMAIN> with your Azure Functions domain that you copied to a local file earlier in this exercise.

    az acr build --registry $ACR_NAME --image acs-to-teams-meeting \
  --build-arg REACT_APP_ACS_USER_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerAcsToken \
  --build-arg REACT_APP_TEAMS_MEETING_FUNCTION=$AZURE_FUNCTIONS_DOMAIN/api/httpTriggerTeamsUrl .

  7. Run the following command to list the images in your registry. You should see your new image listed.

    az acr repository list --name $ACR_NAME --output table

  8. Now that the image is deployed, you need to create an Azure Container App that can run the container.

  9. Visit the Azure portal in your browser and sign in.

  10. Type container apps in the top search bar and select Container Apps from the options that appear.

  11. Select Create in the toolbar.

    Note

    Although you're using the Azure portal, a Container App can also be created by using the Azure CLI. For more information, see Quickstart: Deploy your first container app. You'll see an example of how the Azure CLI can be used at the end of this exercise as well.

  12. Perform the following tasks:

    • Select your subscription.
    • Select the resource group to use (create a new one if needed). You can use the same resource group that you used for your ACS resource if you'd like. Copy your resource group name to the same local file where you stored your Azure Functions domain.
    • Enter a Container app name of acs-to-teams-meeting.
    • Select a region.
    • Select Create new in the Container Apps Environment section.
    • Enter an Environment name of acs-to-teams-meeting-env.
    • Select the Create button.
    • Select Next: App settings >.

  13. Enter the following values in the Create Container App screen:

    • Deselect the Use quickstart image checkbox.
    • Name: acs-to-teams-meeting
    • Image source: Azure Container Registry
    • Registry: <YOUR_ACR_REGISTRY_NAME>.azurecr.io
    • Image: acs-to-teams-meeting
    • Image tag: latest
    • CPU and Memory: 0.25 CPU cores, -.5 Gi memory

  14. In the Application ingress settings section, do the following:

    • Select the Enabled checkbox.
    • Select the Accepting traffic from anywhere radio button.

    This will create an entry point (ingress) for your React application and allow it to be called from anywhere. Azure Container Apps redirects all traffic to HTTPS.

    • Target Port: 80

  15. Select Review + create. Once validation passes, select the Create button.

    If you get an error it may be due to your container apps environment being inactive for too long. The simplest solution will be to go through the process of creating the container app again. Alternatively, you can run the following command to create the container app using the Azure CLI:

    az containerapp create --name acs-to-teams-meeting --resource-group $RESOURCE_GROUP \
    --location westus --image acs-to-teams-meeting \
    --cpu 0.25 --memory 0.5 --environment-name acs-to-teams-meeting-env \
    --ingress-enabled true --ingress-target-port 80 --ingress-type External \
    --ingress-protocol Https --ingress-traffic Anywhere

  16. Once your container app deployment completes, navigate to it in the Azure portal and select the Application Url on the Overview screen to view the application running in the nginx container!

Next Step

Congratulations!

  • Last updated on