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 anAzure free account.
- For Students, you can use the freeAzure for Students offerwhich 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 loginUpon 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 suzarilshahLogin SucceededPull 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/apptestUsing default tag: latestlatest: Pulling from airilshahz/apptest59bf1c3509f3: Pull complete683dd8c3cc08: Pull completeae5b2724f19b: Pull complete39190df3f477: Pull completedd3448b85aa1: Pull completed73408ac8b5c: Pull complete26a6466d7ac5: Pull complete3db399cf7250: Pull completeDigest: sha256:249cb92c030c02d5a13b1beef894c306e77aa82e6847e7fc04d2ec46f8306579Status: Downloaded newer image for airilshahz/apptest:latestdocker.io/airilshahz/apptest:latestWhat's Next? View a summary of image vulnerabilities and recommendations → docker scout quickview airilshahz/apptestLet’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/apptestPush the Image on Azure Container Registry
docker push suzarilshah.azurecr.io/webapp/apptestUsing default tag: latestThe push refers to repository [suzarilshah.azurecr.io/webapp/apptest]177b596a6349: Pushed9707d450e65b: Pushed5bcf0d6dff6a: Pushed1b6b342bd971: Pushed49281578ca1a: Pushedc833154f20e9: Pushed5be440dc5019: Pushed8d3ac3489996: Pushedlatest: digest: sha256:249cb92c030c02d5a13b1beef894c306e77aa82e6847e7fc04d2ec46f8306579 size: 1998Now 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.
