| title | Tutorial: Containerized Python web apps on Azure: build image in Azure Container Registry |
|---|---|
| description | Build a containerized Python web app in the cloud. |
| ms.topic | conceptual |
| ms.date | 07/21/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 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 the containerized Python web app in the cloud.
In the previous optional part of this tutorial, a container image was build and run locally. In contrast, in this part of the tutorial, you'll build (containerize) a Python web app into a Docker image directly in Azure Container Registry. Building the image in Azure is typically faster and easier than building locally and then pushing the image to a registry. Also, building in the cloud doesn't require Docker to be running in your dev environment.
Once the Docker image is in Azure Container Registry, it can be deployed to Azure App service.
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-build-cloud.png" alt-text="A screenshot of the services using in the Tutorial - Containerized Python App on Azure with the build-in-cloud path highlighted." lightbox="./media/tutorial-container-web-app/containerization-of-python-apps-build-cloud.png":::
If you already have an Azure Container Registry you can use, go to the next step. If you don't, create one.
Sign in to the Azure portal and follow these steps to create an Azure Container Registry.
| Instructions | Screenshot |
|---|---|
| [!INCLUDE Include showing how to find container registries in Azure portal] | :::image type="content" source="./media/tutorial-container-web-app/portal-search-container-registries-240px.png" lightbox="./media/tutorial-container-web-app/portal-search-container-registries.png" alt-text="A screenshot showing how to search for container registries in Azure portal." ::: |
| [!INCLUDE Include showing how to start create of registry in Azure portal] | :::image type="content" source="./media/tutorial-container-web-app/portal-create-new-registry-240px.png" lightbox="./media/tutorial-container-web-app/portal-create-new-registry.png" alt-text="A screenshot showing how to create a new registry in Azure portal." ::: |
| [!INCLUDE Include showing how to review and create registry in Azure portal] | :::image type="content" source="./media/tutorial-container-web-app/portal-create-registry-form-240px.png" lightbox="./media/tutorial-container-web-app/portal-create-registry-form.png" alt-text="A screenshot showing how to specify a new registry in Azure portal." ::: |
| [!INCLUDE Include showing how to get qualified name of registry in Azure portal] | :::image type="content" source="./media/tutorial-container-web-app/portal-create-registry-login-server-240px.png" lightbox="./media/tutorial-container-web-app/portal-create-registry-login-server.png" alt-text="A screenshot showing how to find the login server value a registry in Azure portal." ::: |
| [!INCLUDE Include showing how to enable admin user for the registry in Azure portal] | :::image type="content" source="./media/tutorial-container-web-app/portal-create-registry-enable-admin-user-240px.png" lightbox="./media/tutorial-container-web-app/portal-create-registry-enable-admin-user.png" alt-text="A screenshot showing how to enable the admin user for the registry in Azure portal." ::: |
These steps require the Docker extension for VS Code.
| Instructions | Screenshot |
|---|---|
| [!INCLUDE Include showing how to open command palette in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-registry-tasks-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-registry-tasks.png" alt-text="A screenshot showing how to search for show registries tasks in Visual Studio Code." ::: |
| [!INCLUDE Include showing how to start create of registry in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-create-registry-240px.gif" lightbox="./media/tutorial-container-web-app/visual-studio-code-create-registry.gif" alt-text="An animated GIF showing how to create a registry in Visual Studio Code." ::: |
| [!INCLUDE Include showing how to review and create registry in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-registry-get-properties-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-registry-get-properties.png" alt-text="A screenshot showing how to get the properties of a registry in Visual Studio Code." ::: |
Azure CLI commands can be run in the Azure Cloud Shell or on a workstation with the Azure CLI installed.
[!INCLUDE Include showing how create registry with Azure CLI]
Building in the cloud doesn't require Docker to be running in your dev environment.
These steps require the Docker extension for VS Code.
| Instructions | Screenshot |
|---|---|
| [!INCLUDE Include showing how to check that Azure is connected to Docker extension in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-build-image-registries-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-build-image-registries.png" alt-text="A screenshot showing how to check that Azure is signed into Docker Extension in Visual Studio Code." ::: |
| [!INCLUDE Include showing how to invoke the build container image in Azure task in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-build-image-task-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-build-image-task.png" alt-text="A screenshot showing how to invoke build container in Azure task in Visual Studio Code." ::: |
| [!INCLUDE Include showing how to build the container image in Azure in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-build-image-prompts-240px.gif" lightbox="./media/tutorial-container-web-app/visual-studio-code-build-image-prompts.gif" alt-text="A screenshot showing how to provide information to build container in Azure in Visual Studio Code." ::: |
| [!INCLUDE Include showing how to confirm the container image in the registry in VS Code] | :::image type="content" source="./media/tutorial-container-web-app/visual-studio-code-build-image-confirm-240px.png" lightbox="./media/tutorial-container-web-app/visual-studio-code-build-image-confirm.png" alt-text="A screenshot showing how to confirm the information to build container in Azure in Visual Studio Code." ::: |
Azure CLI commands can be run in the Azure Cloud Shell or on a workstation with the Azure CLI installed.
[!INCLUDE Include showing how build an image in Azure with the Azure CLI]
If you can't build the image in Azure, and you receive and the message Error: failed to download context. Please check if the URL is incorrect. try the following and then try building again:
- In the REGISTRIES section, find your subscription and refresh the registry list.
- In the Docker Extension REGISTRIES section, make sure you see the registry you're building the image to.