Deploy Teams Toolkit for Visual Studio app from GitHub to Azure App Service

With Teams Toolkit for Visual Studio you will end up hosting your application mostly in an Azure Web App. But what about an automatic deployment? Especially in enterprise scenarios including staging mostly developers are not allowed to deploy from within Visual Studio anymore and for good reasons.

This post will show how easy it is to establish a basic deployment setup from GitHub code repository towards an Azure App Service. Another one might show the same scenario coming from a NodeJS based yeoman generator app.

Assuming the basic app is already developed and checked in to a GitHub code repository.

Next there is a need to establish an Azure App Service. This sample description uses a Windows based one although with .Net Core Linux based makes no big difference in deployment.

Having that, the initial setup is pretty straightforward. From the „Deployment Center“ tab only connect to the existing GitHub repository providing the right account and the initial setup is done. A GitHub Actions file is created and checked in, while every check-in into the selected branch now triggers a new deployment.

Wasn’t that easy? But let’s take a short look what happened behind the scenes. As said at first a GitHub Actions workflow .yml file was created. This is split up in two parts: A build part that builds the solution and uploads the output for later pickup. And a deploy part that downloads the built output and deploys it to the Azure App Service.

name: Build and deploy ASP.Net Core app to Azure Web App - mmoTabDevopsDemo

on:
  push:
    branches:
      - master
  workflow_dispatch:
jobs:
  build:
    runs-on: windows-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up .NET Core
        uses: actions/setup-dotnet@v1
        with:
          dotnet-version: '6.0.x'
          include-prerelease: true
      - name: Build with dotnet
        run: dotnet build --configuration Release
      - name: dotnet publish
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: .net-app
          path: ${{env.DOTNET_ROOT}}/myapp

deploy:
    runs-on: windows-latest
    needs: build
    environment:
      name: 'Production'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
      - name: Deploy to Azure Web App
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: 'mmoTabDevopsDemo'
          slot-name: 'Production'
          publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_7D5C976A2A814DC0A5E4548A8C93FCCB }}
          package: .

But how does it work that GitHub is allowed to (authenticates in a secret manner!) deploy to Azure? This is handled with the so-called PublishProfile. The first hint can be found near the bottom in the .yml file:

publish-profile: ${{ secrets.AZUREAPPSERVICE_PUBLISHPROFILE_7****** }}

So it seems there is “kinda secret” called AZUREAPPSERVICE_PUBLISHPROFILE_7******something . This in fact can be found in GitHub under Settings | Secrets and Variables | Actions:

This PublishProfile is a significant XML block containing the necessary information on the target Azure App Service including a generated userName and a userPWD for deployment access. To download, analyze or even reset it, this can be done under “Deployment Center” in the Azure App Service resource:

For a simple but working setup this can be all you need. But especially when dealing with frontend, that is, JavaScript files you might soon come to following limitation:

This can significantly slow down the process (20 – 30+ mins) and zipping before upload and eventually unzipping after downloading speeds up the process. To do so, in a Windows environment PowerShell cmdlets work well so insert the following into the created.yml:

build:
...
      - name: dotnet publish
        run: dotnet publish -c Release -o ${{env.DOTNET_ROOT}}/myapp
      - name: Compress archive
        run: Compress-Archive ${{env.DOTNET_ROOT}}/myapp/* release.zip     
      - name: Upload artifact for deployment job

deploy:
...
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: .net-app
      - name: Expand-Archive
        run: Expand-Archive release.zip -DestinationPath .\
      - name: Deploy to Azure Web App

Of course there is more to professionalize the process but this should be a good starter to get you up to speed. Further steps and feedback always welcome. Also find a simple demo repository here.

Markus is a SharePoint architect and technical consultant with focus on latest technology stack in Microsoft 365 Development. He loves SharePoint Framework but also has a passion for Microsoft Graph and Teams Development. He works for Avanade as an expert for Microsoft 365 Dev and is based in Munich. In 2021 he received his first Microsoft MVP award in M365 Development for his continuous community contributions. Although if partially inspired by his daily work opinions are always personal.

• Allgemein