Containerising a Web App and Deploying it to Azure using Azure Container Apps

In a recent project (click here to see), I deployed a Web App to Azure leveraging Azure App Service. For today’s project, I will deploy the same Web App but using Azure Container Apps

I have followed these steps to achieve that:

Step 1: Containerise the Web App locally

1. Clone the 2048 Game Repository

2. Create a Dockerfile:

touch dockerfile
vim dockerfile

# Use an official Nginx runtime as a parent image
FROM nginx:alpine

# Remove the default Nginx configuration file
RUN rm -rf /etc/nginx/conf.d/*

# Copy the custom Nginx configuration file
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Copy the game files to the Nginx html directory
COPY . /usr/share/nginx/html

# Expose port 80
EXPOSE 80

# Start Nginx server in foreground
CMD ["nginx", "-g", "daemon off;"]

3. Create a nginx.conf file

touch nginx.conf
vim nginx.conf

server {
    listen 80;
    server_name localhost;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

4. Build the Docker Image

docker build -t 2048-game .

Check the image was created

docker images

5. Test the Docker Image Locally

docker run -d -p 80:80 2048-game

It’s working

Step 2: Push the Docker Image to Azure Container Registry

1. Create a Resource Group:

az group create --name 2048-container-app --location eastus

2. Create a Container Registry:

az acr create --resource-group 2048-container-app --name semoacr --sku Basic

3. Log in to the Container Registry:

az acr login --name semoacr

4. Tag the Docker Image:

docker tag 2048-game-nginx semoacr.azurecr.io/2048-game-nginx:v1

5. Push the Docker Image:

docker push semoacr.azurecr.io/2048-game-nginx:v1

Step 3: Deploy to Azure Container Apps

1. Create Azure Container Apps Environment:

az containerapp env create --name 2048-environment --resource-group 2048-container-app --location eastus

2. Deploy the Container App:

az containerapp create \
  --name semo2048app \
  --resource-group 2048-container-app \
  --environment semo2048 \
  --image semoacr.azurecr.io/2048-game \
  --target-port 80 \
  --ingress 'external' \
  --registry-username semoacr \
  --registry-password <password> \
  --registry-server semoacr.azurecr.io \
  --cpu 0.5 --memory 1.0Gi
  

3. Validate

Once deployed I have checked for the FQDN of my deployed app. Then I opened a browser and navigate to that FQDN to see if my 2048 game is running.

I have successfully built a Docker image for the 2048 game with Nginx, pushed it to Azure Container Registry, and deployed it using Azure Container Apps. This setup allows to easily manage and scale applications using Azure services.