This tutorial guides you through the process of containerizing a web application and deploying it to Azure App Service using a Docker container image. Azure App Service provides a fully managed platform for building, deploying, and scaling web applications, making it an excellent choice for containerized workloads.

Prerequisites

Before you begin, ensure you have the following:

  • An Azure account with an active subscription. If you don't have one, you can create one for free.
  • The Azure CLI installed and configured.
  • Docker installed locally.
  • A sample web application (e.g., Node.js, Python Flask, .NET Core). For this tutorial, we'll assume you have a basic web application ready.

Step 1: Containerize Your Web Application

To deploy your application to App Service as a container, you need to create a Dockerfile. This file contains instructions for building your Docker image.

Create a file named Dockerfile in the root directory of your web application:

# Example Dockerfile for a Node.js application
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 80

CMD [ "npm", "start" ]

Explanation:

  • FROM node:18-alpine: Specifies the base image.
  • WORKDIR /app: Sets the working directory inside the container.
  • COPY package*.json ./: Copies the package files.
  • RUN npm install: Installs application dependencies.
  • COPY . .: Copies the rest of your application code.
  • EXPOSE 80: Informs Docker that the container listens on port 80. App Service will map requests to this port.
  • CMD [ "npm", "start" ]: Defines the command to run when the container starts.

Tip

Ensure your application listens on the port specified in the EXPOSE instruction (or uses an environment variable for the port, which is common for App Service).

Step 2: Build and Push Your Docker Image

Build the Docker image locally and push it to a container registry like Docker Hub or Azure Container Registry (ACR).

Option A: Push to Docker Hub

Log in to Docker Hub:

docker login

Build the image (replace your-dockerhub-username and my-web-app with your details):

docker build -t your-dockerhub-username/my-web-app .

Push the image:

docker push your-dockerhub-username/my-web-app

Option B: Push to Azure Container Registry (ACR)

First, create an Azure Container Registry:

az acr create --resource-group myResourceGroup --name myContainerRegistryName --sku Basic

Log in to your ACR:

az acr login --name myContainerRegistryName

Build the image, tagging it for your ACR:

docker build -t myContainerRegistryName.azurecr.io/my-web-app .

Push the image:

docker push myContainerRegistryName.azurecr.io/my-web-app

Note

For ACR, you'll need to configure your App Service to pull from this private registry. This typically involves creating an identity for the App Service and granting it permissions to pull from the ACR.

Step 3: Create an Azure App Service

Now, create an App Service instance that will host your container.

Create a resource group if you don't have one:

az group create --name myResourceGroup --location eastus

Create the App Service:

az appservice plan create --name myAppServicePlan --resource-group myResourceGroup --sku B1 --is-linux

Create the Web App, specifying the container image (replace with your registry and image name):

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name myUniqueWebAppName --deployment-container-image-name your-dockerhub-username/my-web-app:latest

Tip

If using ACR, the command would be: 

az webapp create --resource-group myResourceGroup --plan myAppServicePlan --name myUniqueWebAppName --deployment-container-image-name myContainerRegistryName.azurecr.io/my-web-app:latest
You might need additional configuration for ACR authentication.

Step 4: Configure Container Registry Authentication (If using ACR)

If you're using Azure Container Registry, you need to tell App Service how to authenticate. This is best done by assigning a managed identity to the App Service and granting it permissions.

Enable managed identity for the App Service:

az webapp identity assign --resource-group myResourceGroup --name myUniqueWebAppName

Get the principal ID of the managed identity:

az webapp show --resource-group myResourceGroup --name myUniqueWebAppName --query identity.principalId --output tsv

Grant the managed identity the AcrPull role on your ACR:

az role assignment create --assignee <PRINCIPAL_ID> --scope <ACR_RESOURCE_ID> --role AcrPull

You'll need to get the ACR Resource ID from the Azure portal or using az acr show --resource-group myResourceGroup --name myContainerRegistryName --query id.

Step 5: Set Environment Variables (Optional but Recommended)

It's good practice to configure application settings and connection strings as environment variables in App Service. For example, if your app needs to know which port to listen on:

az webapp config appsettings set --resource-group myResourceGroup --name myUniqueWebAppName --settings WEBSITES_PORT=80

If your container needs specific configurations, you can set them here:

az webapp config appsettings set --resource-group myResourceGroup --name myUniqueWebAppName --settings APP_SETTING_1=value1 APP_SETTING_2=value2

Step 6: Deploy and Verify

Once the App Service is created and configured, Azure will automatically pull the specified container image and start the container.

You can find your web app's URL by:

az webapp show --resource-group myResourceGroup --name myUniqueWebAppName --query "defaultHostName" --output tsv

Open this URL in your browser to see your deployed web application.

Note

It might take a few minutes for the container to be pulled and started. You can monitor the deployment logs in the Azure portal.

Next Steps

Explore further configurations for Azure App Service, such as:

  • Configuring custom domains.
  • Setting up SSL certificates.
  • Enabling auto-scaling.
  • Integrating with CI/CD pipelines for automated deployments.
  • Monitoring and diagnostics.