| title | description | ms.topic | ms.date | ms.custom |
|---|---|---|---|---|
Build and run a containerized Python web app locally with MongoDB |
Build and run a containerized Python web app (Django or Flask) locally with MongoDB in preparation for deployment to Azure App Service. |
conceptual |
08/16/2022 |
devx-track-python |
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 optional and isn't required to deploy the sample app 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 easier, especially when you move beyond sample apps and you start to create your own web apps. To deploy the sample apps for Django and Flask, you can skip this step and go to the next step in this tutorial. You can always return after deploying to Azure and work through these steps.
The service diagram shown below highlights the components covered in this article.
:::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":::
Clone the repository:
# Django
git clone https://github.com/Azure-Samples/msdocs-python-django-container-web-app.git
# Flask
git clone https://github.com/Azure-Samples/msdocs-python-flask-container-web-app.git
Then navigate into that folder:
# Django
cd msdocs-python-django-container-web-app
# Flask
cd msdocs-python-flask-container-web-app
Visit https://github.com/Azure-Samples/msdocs-python-django-container-web-app or https://github.com/Azure-Samples/msdocs-python-flask-container-web-app.
Select Code, and then select Download ZIP.
Unpack the ZIP file into a folder and then open a terminal window in that folder.
If you're using one of the framework sample apps available for Django and Flask, you're set to go. If you're working with your own sample app, take a look to see how the sample apps are set up, in particular the Dockerfile in the root directory.
These instructions require Visual Studio Code and the Docker extension. Go to the sample folder you cloned or downloaded and open VS Code with the command code ..
| 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 the name "msdocspythoncontainerwebapp" and tag "latest". 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.
Images that are built from VS Code or from using the Docker CLI directly can also be viewed with the Docker Desktop application.
This tutorial assumes you have MongoDB installed locally or you have MongoDB hosted in Azure or elsewhere that 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 your computer's 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 will communicate to the host machine with this address.
For example, part of the configuration file should 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 the local MongoDB database.
Set the database name to "restaurants_reviews" and the collection name to "restaurants_reviews". You can create a database and collection with the VS Code MongoDB extension, the MonogoDB Shell (mongosh), or any other MondoDB-aware tool.
For the MongoDB shell, here are example 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: If needed, create a MongoDB database.
You can create an Azure Cosmos DB for MongoDB with Azure portal, Azure CLI, PowerShell, or VS Code.
Step 2: Create or ensure that a database and collection exists in the database.
Create a database named "restaurants_reviews" and a collection named "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. You can also use the VS Code Azure Database extension to create databases and collections.
At this point, you should have an Azure Cosmos DB for MongoDB connection string of the form mongodb://\<server-name>:\<password>@\<server-name>.mongo.cosmos.azure.com:10255/?ssl=true&\<other-parameters>, a database named restaurants_reviews, and a collection named restaurants_reviews.
If you are working in VS Code, you can right-click on the MongoDB server and get the connection string.
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 in environment variables. There are several ways to get environment variables passed to container locally. 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 for the local development environment scenario apply.
| 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 browse the endpoint of a Docker container 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. The task called depends on what launch configuration you select. 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.
[!div class="nextstepaction"] Build a container image in Azure