Container Deployment to Azure WebApp with Github Action CI/CD

Hi everyone, how’s it going? Welcome back from clouddays.info. In this post, I gonna walk you through the Azure App Service container web app and deploy container image with github action. This course reference from MS Learn |  Automate Docker container deployments with Azure Pipelines . However, my devops account has a constrain in running parallel compute agent and therefore, manged to use github action for CI/CD purpose rather than using Azure Devops. You may request the form to Microsoft Azure Devops Parallelism Request with this link but waiting time is for 2 or 3 business days.

Overview

Docker container image is a lightweight, standalone, executable package of software that includes everything needed to run as an application: code, runtime, system tools, system libraries and settings.

This lab outlines the process to build Docker image, and push this image to Azure container registry (ACR). Then, that image will be used to deploy the application to the Docker container in the Azure App Service (Linux) using github action.

The Web App for Containers is manged service and allows the creation of custom Docker container images, easily deploy and then run container on Azure. Combination of Github action and Azure integration with Docker will enable the following:

1. Build custom Docker images using Github Action workflow
2. Push and store the Docker images in a private repository (ACR)
3. Deploy and run the images inside the Docker Container in Azure App service

Dependencies

• Github account
• Some basic knowledge of GitHub and Azure services
• Azure privileged account to create resources

Setting up Environment

1. Click thislink to GitHub repo and fork the repository to your account.

2. The following resources need to be configured for this lab:

• Azure Resource Group
• Azure Container Registry
• Azure Web App for Containers

3. Launch Azure Cloud shell from Azure portal and choose Bash terminal

4. Paste the following commands to set the default region and define parameters.

#set the nearest region for your lab resources
az configure --defaults location=southeastasia

resourceSuffix=$RANDOM
webName="spacegame101-web-${resourceSuffix}"
registryName="spacegame101acr${resourceSuffix}"
rgName='spacegame101-rg'
planName='spacegame101-asp'

5. Create resource group and azure container registry.

#create RG
az group create -n $rgName

#create ACR
az acr create --name $registryName \
  --resource-group $rgName \
  --sku Basic \
  --admin-enabled true

6. Create App service plan and azure webapp container

#create App service plan
az appservice plan create \
  --name $planName \
  --resource-group $rgName \
  --sku B1 \
  --is-linux

#create container app service
az webapp create \
  --name $webName \
  --resource-group $rgName \
  --plan $planName \
  --deployment-container-image-name $registryName.azurecr.io/web:latest

7. Run following command to view and note the hostname of your container webapp just deployed

az webapp list \
  --resource-group $rgName \
  --query "[].{hostName: defaultHostName, state: state}" \
  --output table

8. Run following command to view and note acr login server.

az acr list \
  --resource-group $rgName \
  --query "[].{loginServer: loginServer}" \
  --output table

Configure GitHub CI/CD Action

You might have forked the GitHub repo from the previous step. If you have not done so far, please go to this link and fork.

1. Get the WebApp PublishProfile and ACR username and password.

Download the PublicProfile key from overview page of your App service. And download the PublishProfile.

Go to your Azure Container Registry and find the username and password under Settings > Access keys. Please note PublishProfile, ACR username and password, they will require to authenticate in Github.

2. Set Github secrets for authentication to Azure.

In GitHub, browse your repository. Select Settings > Security > Secrets and variables > Actions > New repository secret.

Name the secret to AzureAppService_PublishProfile and paste the PublishProfile key downloaded in step1.

Create another secret and name it to AzureAppService_ContainerUsername and paste the username of ACR from step 1.

Create another secret and name it AzureAppService_ContainerPassword and paste the password of ACR from step1.

For more details to see Azure doc.

3. Go to your GitHub repository which you just folked and click “Add file” and “Create new file”.

Note: you can skip this step if you have already .github/workflows/.yml file in your repository.

4. Paste following codes to your .yml file.

name: WebApp container build and deploy workflow

env:
  AZURE_WEBAPP_NAME: spacegame101-web-6669
  AZURE_ACR_NAME: spacegame101acr6669.azurecr.io

on: [push]

jobs:
  build and deploy:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - uses: azure/docker-login@v1
      with:
        login-server: ${{ env.AZURE_ACR_NAME }}/
        username: ${{ secrets.AzureAppService_ContainerUsername }}
        password: ${{ secrets.AzureAppService_ContainerPassword }}
    
    - run: |
        docker build -f ./Tailspin.SpaceGame.Web/Dockerfile -t ${{ env.AZURE_ACR_NAME }}/web:${{ github.sha }} .
        docker push ${{ env.AZURE_ACR_NAME }}/web:${{ github.sha }}     

    - uses: azure/webapps-deploy@v2
      with:
        app-name: ${{ env.AZURE_WEBAPP_NAME }}
        publish-profile: ${{ secrets.AzureAppService_PublishProfile }}
        images: '${{ env.AZURE_ACR_NAME }}/web:${{ github.sha }}' 

Note: ensure your env: AZURE_WEBAPP_NAME, AZURE_ACR_NAME are replaced with your App service hostname and ACR login server which noted from previous step 7 & 8 .

5. Click commit changes, acknowledged and see your workflow steps under Action tab as seen below screenshot.  

Once the CI/CD workflow has been completed, time to browse your newly deployed application. Go to Azure portal> App Service> copy the app service URL and try browsing in browser.

Well done, Guys! Now you’ve done the hands-on lab for configuration and deployment of docker container to Azure App Service container. This lab covered the integration with Github, Azure and demonstrated how CI/CD process is. You might have noticed in Github workflow that docker image is built and push it to Azure container private registory and then deploy that image to app service from ACR repository. Thank you for reading this blog and see you guys in next tutorial.

The final step is to destroy your resources in Azure by typing in Cloud Shell:

az group delete -y -n <your resource group name>