Learn how to host images on Azure Container Registry and deploy a Web App via the App Service plan. A step-by-step guide by Suzaril Shah

Welcome to my latest blog post! I’m Suzaril Shah, a Gold Microsoft Learn Student Ambassador, and today I’m excited to share a detailed, step-by-step guide on how to efficiently host your images on Azure Container Registry (ACR) and deploy a web application using an App Service plan. Whether you’re a developer, IT professional, or just a tech enthusiast looking to expand your Azure knowledge, this guide is designed to walk you through the process seamlessly. From setting up your ACR to deploying your app, I’ll cover all the necessary steps and best practices to ensure you can get your web app up and running with ease. Let’s dive in and start deploying on Azure!

Prerequisites:

Azure CLI

Steps to install Azure CLI

Azure subscription

If you don’t already have one, you can sign up for an Azure free account.
For Students, you can use the free Azure for Students offer which doesn’t require a credit card only your school email.

Step 1 – Prepare the Docker Container

For this demonstration, I cloned this Docker Hub Image and tagged the image to my own Docker Hub account. This image particularly contains web pages, which is useful to display that the web app is served and accessible via the internet. However, if you have your own Docker image, feel free to use them.

Step 2 – Setting the Container Registry on Azure

Go to Azure Portal (portal.azure.com) and search for “Container Registries” on the Search bar and click on it. Create a new registry by clicking on the “+ Create” button.

Select your Subscription and Resource Group from the dropdown and name your registry.

Click on “Next >” button until you have reached the “Review + create”. Click on “Create” button to finalize the registry creation.

Once the Deployment is complete, click on the “Go to resource” button to view the registry. At this point the registry is ready to store the image in the registry.

Enable Admin user on the Azure Container Registry

Each container registry includes an admin user account, which is disabled by default. You can enable the admin user and manage its credentials in the Azure portal, or by using the Azure CLI, Azure PowerShell, or other Azure tools. The admin account has full permissions to the registry.

To enable Admin user, you can go to the container registry page you have created earlier and head to “Settings” > “Access Keys” subsection. Click on the checkbox for “Admin User”. Two passwords should be generated.

Step 3 – Push image to Azure container registry from Docker Hub

On the Azure Container Registry page, click on the “Push an Image” button to get started with the hosting the image on Azure registry.

Follow the instructions given on Azure to login, pull & tag image to ACR and push the image to the Azure registry.

Login to Azure on a CLI.

az login

Upon logging in to Azure via CLI, you should be redirected to complete browser authentication and see this page:

Now login to your Azure Container registry

az acr login –name [REGISTRY_NAME]

You should receive an output resembling the following:

az acr login –name suzarilshah
Login Succeeded

Pull the image on Docker Hub and tag the image to ACR.

Now pull an image to your host machine so we can prepare and host them on Azure Container Registry. In this case, I will use the image in Step 1.

docker pull airilshahz/apptest
Using default tag: latest
latest: Pulling from airilshahz/apptest
59bf1c3509f3: Pull complete
683dd8c3cc08: Pull complete
ae5b2724f19b: Pull complete
39190df3f477: Pull complete
dd3448b85aa1: Pull complete
d73408ac8b5c: Pull complete
26a6466d7ac5: Pull complete
3db399cf7250: Pull complete
Digest: sha256:249cb92c030c02d5a13b1beef894c306e77aa82e6847e7fc04d2ec46f8306579
Status: Downloaded newer image for airilshahz/apptest:latest
docker.io/airilshahz/apptest:latest

What’s Next?

View a summary of image vulnerabilities and recommendations → docker scout quickview airilshahz/apptest

Let’s tag the image following the tag format: [REGISTRY_ENDPOINT/REPOSITORY/IMAGE]. You can find the Registry Endpoint at the ACR Overview page (Login server)

docker tag airilshahz/apptest suzarilshah.azurecr.io/webapp/apptest

Push the Image on Azure Container Registry

docker push suzarilshah.azurecr.io/webapp/apptest
Using default tag: latest
The push refers to repository [suzarilshah.azurecr.io/webapp/apptest]
177b596a6349: Pushed
9707d450e65b: Pushed
5bcf0d6dff6a: Pushed
1b6b342bd971: Pushed
49281578ca1a: Pushed
c833154f20e9: Pushed
5be440dc5019: Pushed
8d3ac3489996: Pushed
latest: digest: sha256:249cb92c030c02d5a13b1beef894c306e77aa82e6847e7fc04d2ec46f8306579 size: 1998

Now you have an image stored on Azure Container Registry. You can check the image you pushed on ACR by going to the “Services” > “Repositories” section on the ACR page.

Step 4 – Deploy the Image to App Service from ACR

Head to “App Service” by searching for them on the Search bar on Azure portal. Click on the “+ Create” > “Web App” button to create a Web App.

Select Subscription from the drop down menu and specify the resource group. Then, name your web app endpoint. Follow the configuration as specified below. Please ensure that you have selected “Container” for the “Publish” configuration.

Create a new Linux Plan under the “Pricing plans” section. For this demonstration, I will use the Free tier to host my web app. Then, click on Next to proceed with creating the web app.

On the “Container” tab, make sure to Select “Azure Container Registry” as the Image Source. Select the Registry you have created earlier and specify the Image and Tag.

On the “Networking” tab, please make sure to turn on the “Enable public access” settings. This ensures that our web app is accessible to everyone on the Internet. Turn this off, if you do not intend to allow external users to access your web app.

Click on the “Review + create” button to finalize the Web App configuration. Click on “Create” button to deploy the web app.

After the Web App is deployed successfully, click on the “Go to resource” button to view the Web App overview page.

To view your Web App, click on the “Browse” button on the Web App overview page or copy and paste the information from the “Default domain” section to access your web app.

Voila! The Web App is now accessible on the Internet.

Learning takeaways

This comprehensive guide provides a detailed walkthrough on using Azure Container Registry (ACR) and Azure App Service to host and deploy web applications. Readers should be able to set up ACR, host images to ACR, and deploy the images hosted on ACR via App Service. This tutorial not only enhances technical skills in managing cloud-based applications but also offers practical insights into integrating and leveraging Azure services to publish applications on the internet.

​Microsoft Tech Community – Latest Blogs –Read More