Streamlining Deployments with Azure App Service and Docker

Introduction

In this era of cloud computing, efficiency and simplicity in deployment processes have become paramount for developers. Leveraging the power of containerization with Docker and the flexibility of Microsoft Azure App Service, this blog aims to guide you through the process of deploying a public Docker image from your Docker Hub repository to Azure. This integration not only streamlines the deployment process but also enhances scalability and manageability of applications.

What is Docker?

Begin with a brief overview of Docker, emphasizing its role in creating, deploying, and running applications by using containers. Containers allow a developer to package up an application with all parts it needs, such as libraries and other dependencies, and ship it all out as one package.

What is Azure App Service?

Introduce Azure App Service, a fully managed platform for building, deploying, and scaling web apps. Highlight its key features like automated deployments, scalability, security, and integration with other Azure services.

Prerequisites

List the prerequisites for following the tutorial:

A Docker Hub account with a public image ready to deploy.
An active Azure subscription.

Step 1: Creating a Docker Image and Pushing It to Docker Hub

Creating a Docker image for provided application involves a few straightforward steps. Below, I'll guide you through creating a Docker image, tagging it, and then pushing it to your Docker Hub repository.

Step 1.1: Prepare the Application

First, Clone your github repository. For this example, we'll use a basic Node.js application.

Create a directory for your project and navigate into it:
```
  mkdir resturant-app && cd resturant-app
```
Clone your github repository with the following following command
```
  git clone https://github.com/Sir-Rumeh/easymunch.git .
```

Step 1.2: Dockerize the Application

Now, create a Dockerfile to specify how the Docker image should be built.

Create a Dockerfile in the same directory with the following content:

  # Use an official Node runtime as a base image for building the app
  FROM node:14-alpine AS builder

  # Set the working directory in the container
  WORKDIR /usr/src/app/frontend

  # Copy package.json and package-lock.json to the container
  COPY package*.json ./

  # Install frontend dependencies
  RUN npm install

  # Copy the rest of the application files to the container
  COPY . .

  # Build the frontend app
  RUN npm run build

  # Use NGINX as a lightweight base image to serve the app
  FROM nginx:alpine

  # Copy the built app from the previous stage
  COPY --from=builder /usr/src/app/frontend/build /usr/share/nginx/html

  # Expose port 80 to the outside world (default for HTTP)
  EXPOSE 80

This Dockerfile does the following:

Base Image:
- Uses the node:14-alpine image as the base for building the frontend application. This image includes Node.js version 14 and the Alpine Linux distribution known for its small size.
Working Directory:
- Sets the working directory within the container to /usr/src/app/frontend. This will be the starting point for all subsequent commands in the builder stage.
Dependency Installation:
- Copies package.json and package-lock.json files to the container. These files specify the frontend application's dependencies.
- Runs npm install to download and install all the required dependencies based on the information in package.json.
Application Code Copying:
- Copies all remaining application files from the current directory (.) into the container's working directory (/usr/src/app/frontend). This ensures the entire frontend codebase is present.
Frontend Build:
- Runs npm run build to initiate the frontend build process. This typically involves compiling code, minifying assets, and preparing the application for deployment.
NGINX Image:
- Switches the base image to nginx:alpine for the final stage. This image includes the lightweight NGINX web server.
Copying Built Files:
- Uses the --from=builder flag to copy the built application files from the builder stage.
- The specific path /usr/src/app/frontend/build points to the location where the build process likely generated the optimized frontend code.
- Copies these files to /usr/share/nginx/html which is the default location for NGINX to serve web content.
Port Exposure:
- Exposes port 80 of the container. Port 80 is the standard port for HTTP traffic, allowing external applications to access the served frontend application.

Step 1.3: Build the Docker Image

Build the Docker image using the docker build command. Tag it with your Docker Hub username. Replace this <siddhantbhattarai\> with your DockerHub username.

docker build -t siddhantbhattarai/resturant-frontend-app:latest .

Step 1.4: Run the build Image

Replace this <siddhantbhattarai\> with your DockerHub username.

docker run -d -p 80:80 siddhantbhattarai/resturant-frontend-app:latest

Step 1.4: Push the Image to Docker Hub

Before pushing the image, ensure you're logged in to Docker Hub via the command line.

Log in to Docker Hub:
```
  docker login
```
Push the Docker image to your Docker Hub repository: Replace this <siddhantbhattarai\> with your DockerHub username.
```
  docker push siddhantbhattarai/resturant-frontend-app:latest
```

And that's it! You've created a simple "siddhantbhattarai/resturant-frontend-app:latest" application, containerized it with Docker, and pushed the image to your Docker Hub repository.

Step 2: Setting Up Azure App Service

Setting up an App Service in the Azure portal to host a Docker-based application involves several steps. This guide will walk you through the process from start to finish.

Step 2.1: Log in to Azure Portal

Begin by signing in to the Azure Portal.

Step 2.2: Create a New App Service

Once logged in, click on Create a resource in the left-hand navigation pane.
In the search bar, type "App Service" and select it from the results.
Click the Create button to start configuring your App Service.

Step 2.3: Configure Basic Settings

Subscription: Choose the Azure subscription you want to use.
Resource Group: You can either select an existing resource group or create a new one by clicking Create new.
Name: Enter a unique name for your web app. This name will be part of the default domain name for your app.
Publish: Select Docker Container.
Operating System: Choose the operating system based on your Docker image's requirements (Linux or Windows).
Region: Select a region close to you or your customers.

Step 2.4: Configure the Docker Settings

Under the Docker tab, you'll need to specify the source of your Docker image.
Options: Choose Single Container if your app runs in a single container or Docker Compose if you have a multi-container setup (though Docker Compose is available only for Linux).
Image Source: Select Docker Hub for a public repository. You can also choose Azure Container Registry or another private registry if your image is not hosted on Docker Hub.
Access Type: Select Public.
Image and Tag: Enter the name of your Docker image and tag in the format yourusername/hello-world-app:latest.

Step 2.5: Review and Create

Review all the settings to ensure they are correct.
Click Review + create. Azure will validate your configuration.
Once validation passes, click Create to deploy your App Service.

After a few moments, Azure will finish deploying your App Service. You can then go to the Resource to see your new App Service. From here, you can manage your application, set up custom domains, configure scaling options, and much more.

Remember, the process described above assumes the use of a public Docker image. If you're using a private image, you'll need to provide additional authentication details for Azure to access your Docker Hub repository.

Step 3: Verifying Deployment and Troubleshooting

After deploying your Docker container to Azure App Service, it's crucial to verify that everything is running smoothly. Here's how you can ensure your deployment was successful and troubleshoot any issues that may arise.

Verifying the Deployment

Access the App's URL: Once your deployment is complete, Azure will provide a URL to access your app. Navigate to the Azure portal, select your App Service, and find the URL in the overview section. Open this URL in your web browser to see if your application is running correctly. If it's a "Hello World" application, you should see the expected message displayed.

Check the Logs: Azure App Service offers real-time logging capabilities. If your application isn't running as expected, navigate to "Diagnose and solve problems" in the App Service menu for potential issues and solutions. You can also find logs under "Log stream" to get live logging information.

Common Troubleshooting Steps

If you encounter issues, here are some common troubleshooting steps:

Container Startup Issues: Ensure your Docker container is configured to start correctly. The issue often lies in the Dockerfile's CMD or ENTRYPOINT instructions. Verify they are correctly specified.
Environment Variables: If your application depends on environment variables, make sure they are correctly set in the App Service configuration.
Port Configuration: Your application must listen on the port that Azure App Service provides. This is accessible via the PORT environment variable. Ensure your application is configured to listen on this port.
Docker Image Problems: If there's an issue with the Docker image itself, try running it locally on your machine to ensure it works as expected. This can help identify any image-related issues before deploying.
Dependencies: For applications that depend on external services or databases, ensure that these resources are accessible by your App Service and that the correct connection strings are in place.

Conclusion

Throughout this blog, we've explored the streamlined process of deploying a Docker container to Azure App Service. From creating and pushing a Docker image to Docker Hub to configuring and deploying your App Service, each step is designed to simplify the deployment process.

The integration of Docker and Azure App Service exemplifies the power of modern cloud solutions, offering scalability, ease of deployment, and a wide range of tools to manage and monitor your applications efficiently. By leveraging these technologies, developers can focus more on developing quality software and less on the intricacies of deployment and infrastructure management.

We encourage you to dive deeper into Docker, Docker Hub, and Azure App Service to explore the vast possibilities they offer. Whether you're developing a simple application or a complex, scalable web service, these tools provide a robust foundation for your development and deployment needs.

Remember, the journey doesn't stop here. The tech world is constantly evolving, and there's always something new to learn. So, keep experimenting, keep learning, and most importantly, keep building amazing things.