ACR Tasks to Automatically Update Azure Web App Containers – Part 3

In Part 1, we looked at cloning a sample Docker Container based on Python Django. We tested this Container Image by running it to ensure it operates correctly. We then created a new GitHub Repository and pushed our Docker Container Source Code into your own GitHub Repository.

In Part 2, we looked at creating an ACR, pushing our image up to ACR, and setting up Azure Web App to use our container image and tested the website for production readability.

In this third part, we take a look at making an update to our container image in a way as to not affect our original image, we test our new container image, we set up our ACR Task with a trigger for Source Code, we set up our Azure Web App for Continuous Deployment, push our updated source code to GitHub, validate our ACR Task detected the change, validate ACR builds the new image, validate Azure Web App pulls the updated image, and finally validate our Azure Web App website is reflecting the new production change.

Part 1

Part 2

Part 3

Creating an ACR Task to Build New Images on Git Commits

As mentioned in Part 1, one of the features of ACR Tasks is to detect source code changes in either a GitHub or Azure DevOps Github Repository, and upon detection of an update, trigger a new build and store that new build in ACR.

Create a GitHub personal access token

In order to trigger a task on a git commit, we need a GitHub Personal Access Token (PAT). Navigate to the PAT creation page on GitHub here.

Give the PAT a name and choose Full Repo Control. Full Repo Control is required for a private repository. For a public Repository, you only need repo:status and public_repo.

Choose Generate Token at the bottom.

You will see your token. Be sure to copy your token as you won’t see it again. This token was deleted at the end of writing this blog series.

Create the build task

Back in Azure Cloud Shell, we’ll want to save some variables and then create our ACR Task. The variables to define are as follows:

ACR_NAME=<registry-name>        # The name of your Azure container registry
GIT_USER=<github-username>      # Your GitHub user account name
GIT_PAT=<personal-access-token> # The PAT you generated in the previous section

For us, we’ll use the following:

ACR_NAME=ElanACR       # The name of your Azure container registry
GIT_USER=ElanShudnow      # Your GitHub user account name
GIT_PAT=c56bf3cb154b987dee9a0641e3f979e562299ad2 # The PAT you generated in the previous section

We’ll want to then create our ACR Task by running the following:

az acr task create \
    --registry $ACR_NAME \
    --name taskacrtasksblog \
    --image mydockerwebimage:latest \
    --context https://github.com/$GIT_USER/ACRTasksBlog.git \
    --file Dockerfile \
    --git-access-token $GIT_PAT

Take note of the following:

• The name is the name of the Azure Web App with the word task at the beginning.
• The image is the name of the image that should be created.
• The context is the https path to your git repository
• The name of your Dockerfile that exists within your GitHub Repository

Let’s go ahead and execute the above.

We get some JSON results back showing us the configuration of our ACR Task and our provisioningState. The following is a snippet of the JSON Results.

If we wanted to list out the tasks that we have in our ElanACR ACR, we can run the following in Azure Cloud Shell:

az acr task list -r ElanACR -o table

If we didn’t want there to be a trigger for BASE_IMAGE and only have a trigger based on SOURCE, when we ran az acr task create, we could have added the following line:

--base-image-trigger-enabled false

Test a Container Image Update on Local File System

Let’s make a small change to the container image on our local file system and test it our before we commit and push the code update to GitHub.

We are going to make a change to the index.html file located in the ACRTasksBlog > app > templates > app folder. Open the index.html

On line 31, change the line to:

<h1 class="text-center v-center" style="padding-bottom:20px">Get started with App Service on Linux with ACR Tasks</h1>

Now let’s rebuild the image locally and run the image to test on our local machine before pushing the change up to GitHub.

If we check our current images, we can see mydockerwebimage was created two hours ago. We’re going to create the image with a new Tag Version so we don’t affect the image we know is currently good.The following shows us our current images.

Run the following command:

docker build --tag mydockerwebimage:v1.1 .

When the image is done building, we get the following:

If we run docker images again, we can see the new container.

Let’s run this container again, but this time, let’s run it with a host port of 8001 and a container port of 8000 just to ensure there’s no overlap with the original container. We do this by running the following:

docker run -p 8001:8000 mydockerwebimage:v1.1

If we go to https://127.0.0.1:8001, we see the new updated container.

If we immediately change the URL to https://127.0.0.1:8000, we see the old container.

This is why we chose to run the updated image with the 8001 host port. We want to not overwrite the working/good image/container in case there’s an issue that and we need to redo our work.

Configuring Continuous Deployment with Azure Web App

Back in the Azure Portal, in the Azure Web App, go to Container Settings and flip Continuous Deployment to On. Click Save at the bottom.

That’s it! Yep… It’s that easy. Any changes it detects to the image in the ElanACR registry to the image mydockerwebimage with the Tag of latest, a new image will be downloaded. What’s nice is that it will only need to download the specific container layers that were changed and not the entire image. So it doesn’t take too long for the updated image to come down to the Azure Web App.

Git Commit on the Updated Docker Image Files

Now that we have Continuous Deployment configured for our Azure Web App, let’s go ahead and use git in our local terminal to take the changes made and commit/push them out to our GitHub Repository.

Run the following command to see there was a change made to index.html

git status

Let’s add the index.html file to our staging area. Run the following command:

git add . 

Or

git add app/templates/app/index.html

git add . will add all modified files. Or if you have multiple modified files and only want to push out one modified file to GitHub, you can do a git add app/templates/app/index.html to add only that file to be committed/pushed.

Now that we’ve added our file, it now displays as green.

Add a meaningful commit message by running the following command:

git commit -m "Updated index.html to demonstrate a webpage/container change."

Finally, push the change out to GitHub by running the following command:

git push

Back on the GitHub page, we can see the commit has been made and pushed.

Validating our Changes

Back in Azure Cloud Shell, run the following command:

az acr task logs --registry ElanACR

We can see the following couple pieces of important output.

As we can see, the ACR Task detected the source code change, and updated the image.

Now we if we to our Azure Web App and go to Container settings, we can see that Continuous Deployment detected a newer image and downloaded it.

And the final test? Let’s go to our website and see if the change was detected.

Voila! Successful!

Thanks for reading all the way to the end. Hopefully you found this valuable. And if you have any questions, as always, feel free to comment.