In this article, we see how to deploy a web app to Azure App Service using a Docker container. 👍/👎 this article or want more? Follow me on Twitter and give me your feedback.
If you prefer to learn by being hands on, why not try the Microsoft Learn module Deploy and run a containerized web app with Azure App Service
Why is Jim deploying a web app?
I'll start by saying I'm not a web developer. Not in the slightest. It's not an area I am interested in or have any abilities in. I don't understand the different frameworks, don't know the programming model for back end and front end code, don't understand all the buzzwords. In fact the only DOM I know about is a guy I went to university with called Dom Watkins who helped me install Linux for the first time.
But like most devs, sometimes I need to deploy or build something outside my area of expertise to enable me to do something I do know about. In todays case I needed to deploy a Node web app.
But, but, why?
I needed this web app to show off some cool IoT demos. In particular one written by the amazing Suz Hinton for the MXChip Azure IoT DevKit that allows you to upload animated GIFs (with a G, not a J) to a web site and show them on the OLED screen on the board.
The demo is here:
github.com/Azure-Samples/mxchip-gifs
It's a lovely little sample, and I wanted to run it on a couple of MXChip boards at the upcoming DubHacks this weekend.
This sample has two parts - the sketch file that is run on the device, and a Node.js web site that allows you to upload the GIF.
Deploying the sketch file is easy for me - I do this all the time with these boards. The hard part was the web site. The sample provides instructions to run it locally so I was able to do this, but I wanted to host the site in the cloud so students at DubHacks can upload gifs themselves and see the demo in action. So how could I do this?
Creating a web app in the cloud
This is a web app, so the obvious first step was to create a web app in the cloud to deploy to. I fired up my trusty Azure Portal from portal.azure.com as I'm not cool and hip enough to use the CLI, and created a Web App by selecting Create a resource and searching for Web app.
I started entering details to create the web app, not really thinking about how to deploy - that was a problem for later. Until I saw the options in the Instance Details section:
I was assuming that I would have to push code, but this gave me the option to push a docker container.
Docker all the things!
Nosing around in the sample, I had noticed a file called Dockerfile, and another called docker-compose.yaml. I've heard of this docker thing - you can package code up in containers and ship them to the cloud or something. This seemed like possibly the easiest way to deploy my code to my web app.
I decided to pause my web app creation and focus on creating a docker container. It's easy to create one from a Dockerfile, I ensured the Docker Desktop app was running (I normally quit it when I'm not using it as it can be a battery hog), then from the terminal inside VS Code I ran the build command:
docker build -t mxchip-gifs .
This built the image using the Dockerfile and docker-compose.yml files, and tagged it with mxchip-gifs.
Where to put all these containers?
Once I had a container, I needed to put it somewhere so that my web app could use it, so for this I needed a container registry. A container registry is a place you can put and manage containers, including updating them and deploying them to web sites.
I had no idea on how to do this, but luckily the Microsoft Docs had me covered with this great article on Pushing Docker images to a container registry
I opened up the Azure portal again, and this time created an Azure Container Registry.
I created the Container Registry with all the default options, except I turned on the Admin user. Turning this option allows me to log into the container registry using the Docker cli.
Once created, it was back to the terminal.
Uploading the docker image
From the terminal I needed to log in to my Container Registry:
docker login <my container registry>.azurecr.io
Where <my container registry> is the name I used for the Container Registry when I created it.
The user name and password come from the Settings -> Access Keys section of the blade in the Azure Portal for my Container Registry.
Once logged in, I tagged my image in the repository, then pushed it up.
docker tag mxchip-gifs <my container registry>.azurecr.io/samples/mxchip-gifs
docker push <my container registry>.azurecr.io/samples/mxchip-gifs
It took a few seconds for the image to be pushed, and once done I could see it in the Repositories tab in the Azure Portal.
Back to the web app
Now I had my web app in a Docker image in my Container Registry, I was ready to deploy. I headed back to the Azure Portal where I was creating my web app and ensured in the basic settings I had Docker Container selected for the Publish option.
The next step in the creation options was the Docker options. In this I selected Single Container as I wanted to deploy existing containers, rather than have them built from source each time. I set the Image Source to Azure Container Registry, then selected my registry, and the new image I had created.
Once set, I created the web app. It took a few seconds to create, and once created it launched the Docker image. I could then navigate to the web app URL and see the app running straight away.
Result! With no experience or clue about web app deployment I had deployed a site using Docker!
What about updates?
I noticed a few tweaks I wanted to make to the site, so I dived into the HTML and added a link to the source for the sample project. Adding this <a> tag was about the limit of my HTML skills. Next question was how can I deploy this change?
From the Azure App Service blade in the portal is a Container Settings blade, with a Continuous Deployment option, which defaults to Off. I turned this to On, meaning every time the App Service is restarted it will pull the latest container from the Container Repository, and saved the change.
Next from my terminal I re-ran the commands to build, tag and push the image.
docker build -t mxchip-gifs .
docker tag mxchip-gifs <my container registry>.azurecr.io/samples/mxchip-gifs
docker push <my container registry>.azurecr.io/samples/mxchip-gifs
This sent the updated image to my Container Repository. I then restarted the App Service from the portal, and the latest image was downloaded and used.
I could see the change as soon as I refreshed my browser window.
Would you like to know more?
If you want to learn more about this you can read the Azure Container Registry docs.
If you'd rather learn this with self guided hands on learning, using an Azure sandbox so you don't even need to sign up for an account check out our Microsoft Learn Module, which you can complete in 45 minutes:
Deploy and run a containerized web app with Azure App Service
Want an MXChip to play with IoT? These are excellent prototyping board and you can grab them from Amazon here.
Top comments (0)