Deploy a Dash application in Azure using Docker

Introduction

I will guide you in this post to deploy a Dash application in Microsoft Azure using Docker and Azure Web App services.

Table of contents

• Create a Dash application running on Docker: We will start with a setup to be used during development. However, we will need to change the Dockerfile to build an image suitable for deployment.
• Create an Azure web app from a Docker image: In this section, we will deploy our docker image in Azure as a web application. We will need to: (i) create a Container Registry in Azure to register our Dash application image, (ii) push the image to the container registry and, (iii) set up a Web App in Azure that deploys our Dash application image.

Simplify schema of what we aim to explain in this post.

Create a Dash application running on Docker

The first step is to create a docker image that we can use to develop and deploy our Dash application. In this repository, I provide a very simple boilerplate to start developing a Dash application on Docker. You can directly pull the docker image:

docker pull vioquedu/dash-dev:latest

And create a dash_app.py file as follows:

import os
import dash
import dash_core_components as dcc
import dash_html_components as html
app = dash.Dash(__name__)
app.layout = html.Div([
    html.H1("Hello Dash")
])
if __name__ == "__main__":
    # Get port and debug mode from environment variables    
    port = os.environ.get('dash_port')
    debug = os.environ.get('dash_debug')=="True"
    app.run_server(debug=debug, host="0.0.0.0", port=port)

Now we can run our docker container as follows:

docker run -d -p 8050:8050 -v $(pwd):/app vioquedu/dash-dev:latest

Now you could go to your browser and see the Dash application running:

IN-DEPTH: The docker command above is mapping the folder where the command is executed (and where our Dash code should be) with the folder /app in the Docker container: -v $(pwd):/app. That allows us to edit our Dash application code and see the results reflected in the docker container automatically. This setup is very useful during development, as we don’t need to rebuild the image every time we edit the application code. However, for deployment, we will need to include the application code in the docker image. We will see in the next section how to do it.

NOTE: You could also have cloned the repository to modify the Dockerfile or any other file and build the docker image yourself.

Create a production-ready docker image

You finished the first version of your Dash application and you want to deploy it. Great! The first thing is building a docker image that includes the application code. You can use the Dockerfile.prod available in this repository for that. Looking closer the only difference between Dockerfile and Dockerfile.prod is that we are copying the application code into the image: COPY . /app/ . You can build a new image as follows:

docker build -t dash-prod-example:1.0 -f Dockerfile.prod .

Let’s run our image to check it works:

docker run -d -p 80:80 dash-prod-example:1.0

You should be able to visit your Dash application in your browser.

NOTE: We don’t need to change the Debug mode or port, as those variables are defined as environment variables in the Dockerfile.prod .

if __name__ == "__main__":
    # Get port and debug mode from environment variables    
    port = os.environ.get('dash_port')
    debug = os.environ.get('dash_debug')=="True"
    app.run_server(debug=debug, host="0.0.0.0", port=port)

Create an Azure web app from a Docker image

At this point, we have a docker image in our local machine with our Dash application ready to be deployed. In order to deploy our application in Azure we need to do two things:

1. We need to register our docker image into a container registry from which Azure can pull it. The most common option would be to use Docker Hub or Microsoft Docker Registry.
2. We need to create a Web App in Azure to host our application.

Create an Azure Container Registry

I chose Azure Container Registry over Docker Hub in this post just to limit the number of services for which I would need an account. You can think of container registries as the code repositories for Docker images: a place where you can store and keep track of our Docker images, and from where other services or people can access them.

• In the Azure portal Marketplace look for the service Container Registry

• Create a Container Registry

Keep the container registry name, as we will need it to register our docker image.

Register a Docker image in the Azure Container Registry

Once we have a container registry, it’s time to upload our Docker image to it. Since we are using the Azure Container registry we will need to have the Azure CLI installed in our machine.

If you have not done it yet, you will need to log in Azure using the Azure CLI, just run in your terminal:

az login

Follow the login process through the web browser. After this you could log in your Azure container registry:

az acr login --name <name_of_your_registry>

If you see the message Login Succeeded we can continue! Now we can push our docker images to our Azure container registry:

docker tag dash-prod-example:1.0 <name_of_your_registry>.azurecr.io/dash-prod-example:1.0
docker push <name_of_your_registry>.azurecr.io/dash-prod-example:1.0

Once the push process is finished, you should see your image as a repository in your container registry:

Deploy the Docker container as a Web App

We already have registered our image in a container registry from which Azure can pull the image and deploy it as a web app. In this last section, we will see how to deploy our Dash application as an Azure web app.

• In the Azure Marketplace select the service Web App

• Set up the app’s name and plan:

• Select the Docker container registry and docker image

• Finally, review the configuration and create the web app

Once you create the Web application, Azure will allocate the resources, pull the Docker image from the container registry, and run a container with that image as a web application. Navigate to the service to check out the details of your web application:

You can click on the “Browse” button to navigate to your web application. In my case it looks like this:

Congratulations, our Dash application is finally running in the cloud!

Summary

We’ve covered a lot! Hopefully, you have a better idea now of how to deploy Dash applications in Microsoft Azure using Docker. In the following post, I will explain how to automatically deploy changes in our application, so we don’t need to manually rebuild and push our Docker image to the container registry.