| title | Tutorial: Containerized Python web apps on Azure: build and test locally |
|---|---|
| description | Build and test a containerized Python web app locally. |
| ms.topic | conceptual |
| ms.date | 07/07/2022 |
| ms.custom | devx-track-python |
| ms.prod | azure-python |
| author | jess-johnson-msft |
| ms.author | jejohn |
This article is part of a tutorial about how to containerize and deploy a containerized Python web app to Azure App Service. App Service enables you to run containerized web apps and deploy through continuous integration/continuous deployment (CI/CD) capabilities with Docker Hub, Azure Container Registry, and Visual Studio Team Services. In this part of the tutorial, you learn how to build and run the containerized Python web app locally. This step is an optional and isn't required to deploy the sample apps to Azure.
Running a Docker image locally in your development environment requires setup beyond deployment to Azure. Think of it as an investment that can make future development cycles quicker and easier, especially when you move beyond a sample app and you start to create your own web app. To deploy a sample app or other app that doesn't need modification, you can skip this step and move on to the next step in this tutorial. You can always return after deploying to Azure and work on these steps.
The service diagram shown in the Overview is shown below highlighting the components that this article deals with.
:::image type="content" source="./media/tutorial-container-web-app/containerization-of-python-apps-run-local.png" alt-text="A screenshot of the Tutorial - Containerized Python App on Azure with local part highlighted." lightbox="./media/tutorial-container-web-app/containerization-of-python-apps-run-local.png":::
If you're using one of the framework sample apps available for Django and Flask, you're set to go. If you're bringing your own sample app, make sure there's a Dockerfile in the root directory.
These instructions require Visual Studio Code, the Docker extension for VS Code, and Docker.
| Instructions | Screenshot |
|---|---|
| [!INCLUDE A screenshot showing how to open the Docker extension in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-open-docker-extension-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-open-docker-extension.png" alt-text="A screenshot showing how to open the Docker extension in Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to build the Docker image in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-build-image-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-build-image.png" alt-text="A screenshot showing how to build the Docker image in Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to confirm the built image in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-view-images-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-view-images.png" alt-text="A screenshot showing how to confirm the built image in Visual Studio Code." ::: |
These instructions require Docker.
[!INCLUDE Build an image with the Docker CLI]
At this point, you have built an image locally. The image you created has a name formatted as <repository-name>:<tag> where <repository-name> is based on the project name and <tag> is set to "latest" for this tutorial. Tags are a way to define version information, intended use, stability, or other information. For more information, see Recommendations for tagging and versioning container images.
Built images from VS Code or from using the Docker CLI directly can be viewed in the Docker Desktop application.
This tutorial assumes you have MongoDB installed locally or you have MongoDB hosted in Azure or anywhere else you have access to. Don't use a MongoDB database you'll use in production.
Step 1: Install MongoDB if it isn't already.
Check if it's installed:
mongo --version
Step 2: Edit the mongod.cfg file to add current IP address.
The mongod configuration file has a bindIp key that defines hostnames and IP addresses that MongoDB listens for client connections. Add the current IP of your local development computer. The sample app running locally in a Docker container communicates to the host machine with this address as configured in a subsequent step.
For example, part of the configuration file will look like this.
net:
port: 27017
bindIp: 127.0.0.1,<local-ip-address>
Restart MongoDB to pick up changes to the configuration file.
Step 3: Create a database and collection in that database.
Set the database name to "restaurants_reviews" and the collection name to "restaurants_reviews". You can use the VS Code MongoDB extension, the MonogoDB Shell (mongosh), or any other MondoDB-aware tool.
For the MongoDB shell, here are examples of commands to create the database and collection:
> help
> use restaurants_reviews
> db.restaurants_reviews.insertOne()
> show dbs
> exit
At this point, your local MongoDB connection string is "mongodb://127.0.0.1:27017/", the database name is "restaurants_reviews", and the collection name is "restaurants_reviews".
Step 1: Get connection information from an existing MongoDB database.
You can create an Azure Cosmos DB for MongoDB with Azure portal, Azure CLI, PowerShell, or VS Code. For the steps below, you'll need a connection string, a database name equal to "restaurants_reviews", and a collection name equal to "restaurants_reviews".
Step 2: Create or ensure that a database and collection exists in the database.
Set the database name to "restaurants_reviews" and the collection name to "restaurants_reviews". You can do this using the Azure Cloud Shell and the Azure CLI. For more information, see Create a database and collection for MongoDB for Azure Cosmos DB using Azure CLI.
At this point, your Cosmos DB MongoDB connection string is of the form "mongodb://<server-name>:<password>@<server-name>.mongo.cosmos.azure.com:10255/?ssl=true&<other-parameters>", the database name is "restaurants_reviews", and the collection name is "restaurants_reviews".
With information on how to connect to a MongoDB, you're ready to run the container locally. The sample app expects MongoDB connection information to be passed as environment variables. Locally, you'll specify this information through environment variables passed to the Docker container. There are several ways to get environment variables passed to container. Each has advantages and disadvantages in terms of security. You should avoid checking in any sensitive information or leaving sensitive information in code in the container.
Note
When deployed to Azure, the web app will get connection info from environment values set as App Service configuration settings and none of the modifications to VS Code files and Docker commands applies.
| Instructions | Screenshot |
|---|---|
| [!INCLUDE A screenshot showing how to add environment variables to a Docker container in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-settings-file-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-settings-file.png" alt-text="A screenshot showing the settings.json file Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to run a Docker container in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-run-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-run.png" alt-text="A screenshot showing how to run a Docker container in Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to confirm the Docker container is running in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-confirm-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-confirm.png" alt-text="A screenshot showing how to confirm a Docker container is running in Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to browse the endpoint of the container in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-open-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-open.png" alt-text="A screenshot showing how to confirm a Docker container is running in Visual Studio Code." ::: |
| [!INCLUDE A screenshot showing how to stop a container in Visual Studio Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-stop-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-docker-extension-container-stop.png" alt-text="A screenshot showing how to stop a running Docker container in Visual Studio Code." ::: |
Tip
You can also run the container selecting a run or debug configuration. The Docker extension tasks in tasks.json are called when you run or debug. What task is called depends on what launch configuration you have set. For the task "Docker: Python (MongoDB local)", specify "<YOUR-IP-ADDRESS>". For the task "Docker: Python (MongoDB Azure)", specify "<CONNECTION_STRING>".
[!INCLUDE Run an image with the Docker CLI]
You can also start a container from an image and stop it with the Docker Desktop application.