Deploy containers to Azure App Service
This tutorial walks you through the process of using Visual Studio Code to deploy a container image from a container registry to Azure App Service, all within Visual Studio Code.
If you have any problems, feel free to file an issue for this tutorial in the VS Code documentation repository.
- An Azure account
- Visual Studio Code
- A suitable container that's been uploaded to a container registry. For details on creating a container with a Python web app, see Create a container.
- The Azure App Service extension for VS Code, which helps you create, manage, and deploy Web Apps to Azure App Service on Linux. For details, explore the App Service extension tutorial or visit the vscode-azureappservice GitHub repository.
- The Docker extension for VS Code, which helps you manage local Docker images, provides Docker commands, and simplifies deployment of app images to Azure. You can find an overview of the extension on the vscode-docker GitHub repository
Sign in to Azure
Once the Azure App Service extension is installed, sign into your Azure account by navigating to the Azure: App Service explorer, select Sign in to Azure, and follow the prompts.
After signing in, verify that you see the email account of your Azure around in the Status Bar and your subscription(s) in the Azure: App Service explorer:
Note: If you see the error "Cannot find subscription with name [subscription ID]", this may be because you are behind a proxy and unable to reach the Azure API. Configure
HTTPS_PROXYenvironment variables with your proxy information in your terminal:
# macOS/Linux export HTTPS_PROXY=https://username:password@proxy:8080 export HTTP_PROXY=http://username:password@proxy:8080 #Windows set HTTPS_PROXY=https://username:password@proxy:8080 set HTTP_PROXY=http://username:password@proxy:8080
Deploy the image to Azure
With a container image in a registry, you can use the Docker extension in VS Code to easily set up an Azure App Service running the container.
In the Docker explorer, expand Registries, expand the node for your registry (such as Azure), then expand the node for your image name until you see the image with the
Right-click the image and select Deploy Image to Azure App Service.
Follow the prompts to select an Azure subscription, select or specify a resource group, specify a region, configure an App Service Plan (B1 is the least expensive), and specify a name for the site. The animation below illustrates the process.
A Resource Group is a named collection the different resources that make up an app. By assigning all the app's resources to a single group, you can easily manage those resources as a single unit. (For more information, see the Azure Resource Manager overview in the Azure documentation.)
An App Service Plan defines the physical resources (an underlying virtual machine) that hosts the running container. For this tutorial, B1 is the least expensive plan that supports Docker containers. (For more information, see App Service plan overview in the Azure documentation.)
The name of the App Service must be unique across all of Azure, so you typically use a company or personal name. For production sites, you typically configure the App Service with a separately registered domain name.
Creating the app service takes a few minutes, and you see progress in VS Code's Output panel.
Once completed, you must also add a setting named
WEBSITES_PORT(notice the plural "WEBSITES") to the App Service to specify the port on which the container is listening. (If you're using an image from the Create a container tutorial, the port is 5000 for Flask and 8000 for Django). To set
WEBSITES_PORT, switch to the Azure: App Service explorer, expand the node for your new App Service (refresh if necessary), then right-click Application Settings and select Add New Setting. At the prompts, enter
WEBSITES_PORTas the key and the port number for the value.
The App Service restarts automatically when you change settings. You can also right-click the App Service and select Restart at any time.
After the service has restarted, browse the site at
http://<name>.azurewebsites.net. You can use Ctrl+click (Cmd+click on macOS) on the URL in the Output panel, or right-click the App Service in the Azure: App Service explorer and select Browse Website.
Make changes and redeploy
Because you inevitably make changes to your app, you end up rebuilding and redeploying your container many times. Fortunately, the process is simple:
Make changes to your app and test locally. (This step and the two that follow are explained on Create a container.)
Rebuild the Docker image. If you change only app code, the build should take only a few seconds.
Push your image to the registry. If again you change nothing but app code, only that small layer needs to be pushed and the process typically completes in a few seconds.
In the Azure: App Service explorer, right-click the appropriate App Service and select Restart. Restarting an app service automatically pulls the latest container image from the registry.
After about 15-20 seconds, visit the App Service URL again to check the updates.
From within VS Code, you can view (or "tail") logs from the running site on Azure App Service, which captures any output to the console as from
Find the app in the Azure: App Service explorer, right-click the app, and choose Start Streaming Logs.
Answer Yes when prompted to enable logging and restart the app. Once the app is restarted, the VS Code Output panel opens with a connection to the log stream.
After a few seconds, you see a message indicating that you are connected to the log-streaming service.
Connecting to log stream... 2018-09-27T20:14:26 Welcome, you are now connected to log-streaming service. 2018-09-27 20:14:59.269 INFO - Starting container for site 2018-09-27 20:14:59.270 INFO - docker run -d -p 24138:8000 --name vsdocs-django-sample-container_0 -e WEBSITES_PORT=8000 -e WEBSITE_SITE_NAME=vsdocs-django-sample-container -e WEBSITE_AUTH_ENABLED=False -e WEBSITE_ROLE_INSTANCE_ID=0 -e WEBSITE_INSTANCE_ID=02c705ae24eaf5f298e553a9c2724b9fe4485707c2d1c36137cd02931091e561 -e HTTP_LOGGING_ENABLED=1 vsdocsregistry.azurecr.io/python-sample-vscode-django-tutorial:latest 2018-09-27 20:15:06.216 INFO - Container vsdocs-django-sample-container_0 for site vsdocs-django-sample-container initialized successfully.
Navigate within the app to see additional output for various HTTP requests.
Clean up resources
The various Azure resources you created in this tutorial can incur ongoing costs. To clean them up, it's best to visit the Azure portal, select Resource groups from the left-side navigation pane, select the resource group that was created in the process of this tutorial, and then use the Delete resource group command.
You can learn more about the Docker and App Service extensions by visiting their respective repositories on GitHub: vscode-docker and vscode-azureappservice. Issues and contributions are also welcome.
To learn more about Azure services that you can use from Python, including data storage along with AI and Machine Learning services, visit Azure Python Developer Center.
There are also other Azure extensions for VS Code that you may find helpful. Just search on "Azure" in the Extensions explorer:
Some popular extensions are:
And again, if you encountered any problems in the course of this tutorial, feel free to file an issue for this tutorial in the VS Code documentation repository.