This Blog post and associated YouTube Video follows on from my previous posts where I build a Blazor WASM application and push this as a container into Azure Container Registry:

Using Docker to Containerise a Blazor Web Assembly (WASM) App for a 3D Printed Robot Arm running on a Raspberry Pi!

January 28, 2021March 4, 2022

Create and Push a Docker Image to Azure Container Registry

February 22, 2021March 4, 2021

This Blog post extends the above two posts by doing the following things:

• Utilises the docker-compose.yaml file to build and publish the Blazor WASM Application into a container via an Azure DevOps (ADO) Build Pipeline
• Utilises ADO to ‘Push’ this image into my Azure Container Registry.

These items are fundamentally comprise the ‘Build Pipeline’ element of this blog post.

Following on from here, we look to automate the deployment of this container image into an Azure Web App Service and Associated App Service Plan.

All of the code that this blog article refers to can be found in the following GitHub repository: https://github.com/jonnychipz/JonnychipzBlazorWebApp

You can follow along with this YouTube video:

A basic overview of how this solution is going to work:

Creating our ADO ‘Build’ Pipeline

So, to start off, you will recall in the previous article about pushing our container image into an Azure Container Registry, this process was completely manually and we broke down the commands needed to perform this task from our Docker Desktop. We will take this opportunity, to build our YAML Pipeline in ADO in order to not just build our project, but push this as a container image into our Azure Container Registry location in Azure.

In turn this ACR Image can be utilised in our Release pipeline as a running container in an Azure Web App Service Plan.

First things first, lets create our Build Pipeline to do the following:

• Build Our Application based on our docker-compose.yml
• Push Our Built Container image into Azure Container Registry.

This is the YAML File for my Build Pipeline:

variables:
- name: BuildParameters.azureContainerRegistry
  value: '{"loginServer":"jonnychipzacr001.azurecr.io", "id" : "/subscriptions/xxxxxxxxx-xxxx-xxxxxxxx-xxxxxxxxx/resourceGroups/jonnychipz-acr-rg/providers/Microsoft.ContainerRegistry/registries/jonnychipzacr001"}'
resources:
  repositories:
  - repository: self
    type: git
    ref: master
jobs:
- job: Job_1
  displayName: Agent job 1
  pool:
    vmImage: ubuntu-20.04
  steps:
  - checkout: self
  - task: DockerCompose@0
    displayName: Docker Compose
    inputs:
      azureSubscriptionEndpoint: xxxxxxxxxxx
      azureContainerRegistry: $(BuildParameters.azureContainerRegistry)
      dockerComposeFile: docker-compose.yml
      dockerComposeCommand: up --build --no-start
  - task: DockerCompose@0
    displayName: Push services
    inputs:
      azureSubscriptionEndpoint: xxxxxxxxxxxx
      azureContainerRegistry: '{"loginServer":"jonnychipzacr001.azurecr.io", "id" : "/subscriptions/xxxxxxxxxx/resourceGroups/jonnychipz-acr-rg/providers/Microsoft.ContainerRegistry/registries/jonnychipzacr001"}'
      dockerComposeFile: docker-compose.yml
      action: Push services

If I take Screen shots of each step you can see that this runs through fine.

I have opted to just use the default ‘latest’ tag for my image push, however you may wish to utilise the tag to coincide with your Build ID maybe for better traceability and roll back, however I have tried to keep this build and ACR push as simple as possible.

Then if we check on our ACR that we created in our Azure subscription(see previous blog post for this), we can see that we now have an image with the tag ‘latest’:

Creating our App Service Plan pointing to our Container Image

So now that we have a built container image in my container registry ‘jonnychipzacr001.azurecr.io’ with the name of ‘jonnychipz-blazorwasm’ and a tag of ‘latest’ we can move onto our ‘Releas ‘ pipeline to push this image to our Web App Service hosted in Azure.

Firstly I will create a new web app service in Azure:

I want to may my app service plan with a ‘Free’ SKU:

We now need to enable the admin user on the ACR, it is turned off by deault and you can use this guide to enable it:

https://docs.microsoft.com/en-us/azure/container-registry/container-registry-authentication#admin-account

I have obscured the passwords for this blog article

Within a matter of minutes our App Service is stood up and running my Blazor WASM application from my published container image:

With a slight tweak to my Robot arm firmware to reference the chat hub which is now located on my Azure App Service plan:

We have control!

As mentioned above, you can watch the YouTube video walk through this process and see that arm being controlled via a web portal on the internet over a 443 https SignalR configuration.

Summary

Firstly thank you for reading this blog post, I do hope you have found it insightfuyl and helpful with some ideas on how you can start to piece together the technical components at your disposal in Azure.

We have effectively utilised the Automation capabilities within Azure DevOps to create a build pipeline, this builds and publishes a Container image which is then stored in Azure Container Registry. That image is then used to run in an Azure App Service, which in turn holds a control page to control a Robot Arm via a Raspberry Pi!

I don’t intend on stopping here, I hope to configure a few sensors and start to publish some telemetry into Azure IoT Hub to explore the capabilities of the platform. Keep a look out for future blog posts!

Watch the demo here: