Beginner Guide to Streamlit Deployment on Azure
Complete guide to deploying a Hello World Streamlit app on Microsoft Azure with a free SSL certificate in 15 minutes
Streamlit is an amazing open-source app framework commonly used by data scientists to quickly make responsive web apps. Streamlit’s intuitive framework is very simple to learn, and can create beautiful dashboards and even more complex web applications within minutes.
However, many data scientists put off thoughts of deployment until the end of their project. Instead, by starting their projects with the deployment stage programmers can quickly visualize their changes within the final UI as they work. This can save you a lot of stress down the road in the event that you complete the machine learning phase only to realize there are many unexpected issues when trying to deploying your project.
When trying to deploy a recent project of mine, I realized that there weren’t many explanations of how to deploy a Streamlit app on Azure with SSL encryption. The SSL certificate is very important for any client-facing pages. If you have a certificate, visitors to your page will not face a browser warning that the site is unsafe. This browser warning is unprofessional, and can potentially block users from connecting successfully (depending on the browser and settings). Therefore, after many days of experimenting, researching and parsing deprecated or incomprehensible solutions, I have developed a minimal step-by-step guide to deploy a Hello World Streamlit app online with SSL. For this we will use Microsoft Azure (Repository, Storage Account and Container Instance), certbot (for SSL), and NGINX as a reverse proxy web server. Don’t worry if you don’t understand one (or all!) of those — this guide is step-by-step, and should have you up and running within 15 minutes. Without further ado, let’s get started!
Part 1: Run Streamlit Locally
First, we will set up a new virtual environment. I recommend using Anaconda, which is a great tool with which to set up a virtual environment. If you don’t have Anaconda yet, it can be downloaded here. Once Anaconda is installed, we can create a new python 3.8 virtual environment with
conda create -n NAME_OF_ENV python=3.8If prompted y/n, enter y to install the required packages. NAME_OF_ENV is a placeholder for whatever you want to call your environment. I named my environment azure_demo. Afterwards, activate your environment with
conda activate NAME_OF_ENVWe will only install one package for this minimal project, although more can easily be added later in a similar fashion. We install Streamlit using
pip install streamlitOur environment is now ready! Let’s add it to PyCharm (or another Python IDE if you prefer). First create a new project (mine is named demo_azure), and add the new conda environment you created as an interpreter.
Our coding environment is now ready! Let’s add a folder which will hold our main Python code. I called mine project_contents. Inside, let’s make another folder called app. In here, create a new Python file called app.py.
We are now ready to create our Streamlit app. Since the focus of this tutorial is on deployment, rather than building web pages using Streamlit, we will simply create an app with a title “Hello World!”. This can be done with two lines — one to import Streamlit, and one to add the title.
That’s it! We are ready to run our Streamlit app locally. Open a terminal (for example Terminal in mac or Anaconda prompt in Windows), navigate to your project root, ensure you have activated the virtualenv you created earlier, then run the command
streamlit run project_contents/app/app.pyEnter localhost:8501 in any browser and you should be greeted with your app.
Congratulations! You have deployed your Streamlit app locally, our first milestone! For reference, the entire project code is available on Github here. You can now kill the app by typing Ctrl+C in your terminal, and move on to Part 2.
Part 2: Dockerize your Streamlit App
In part 2, we will take our Streamlit app and coordinate its deployment in Docker. Docker will containerize our app, making it ready for deployment on a variety of cloud platforms. If you don’t have Docker installed yet, click here.
To begin, we will create a Dockerfile in our project’s root directory (moving forward, all files created will be placed in the project’s root directory):
For this deployment, we are using the micromamba image. Be sure to replace the project directory name from demo_azure to your project name on lines 3–5.
Next, we will create the run.sh file that is referenced in line 14 of our Dockerfile. Here, we simply run app.py using Streamlit. I added in the — theme.base “dark” to set a dark theme, although this is completely optional (and completely cool!).
Next, we will create our environment file, referenced in lines 7–9 in the Dockerfile. Create a file called environment.yml, and add the following code. This file will instruct Docker to install the necessary packages to run our app. Once you are done with this tutorial, feel free to add any additional packages your app needs by simply adding to the bottom of the file “- NAME_OF_PACKAGE” on a new line.
Our container is now ready! Let’s run it locally using
docker build -t azure_demo:v1 .docker run --rm -p 8880:8501 azure_demo:v1
The flags — rm delete the image after the container stops running, and — p 8880:8501 maps our local port 8880 to the container’s port 8501. Therefore, when we navigate to localhost:8880 in our browser, we should see the following:
Congratulations! You have containerized your Streamlit app, and have now completed part 2. Feel free to stop your running Docker container. Let’s wrap up the tutorial by deploying our container to Azure. The container could also be deployed to another cloud platform (such as AWS or GCP) if you prefer, although only Azure will be covered here.
Part 3: Deploy your Dockerized App to Azure
Now that our application is containerized in a Docker container, we can deploy our application so it will be accessible on the internet. Before we continue, make sure you have the Azure CLI installed. Log in using
az loginAlso, make sure you have a resource group with which you can create a container instance and container registry. My resource group will be called AMAZING_RESOURCE_GROUP for the purpose of the demo.
Our first task will be to upload our container image from our computer to Azure Container Registry. We can create a new registry using
az acr create --resource-group AMAZING_RESOURCE_GROUP --name NAME_OF_REGISTRY --sku BasicRemember, change the name of the resource group and the name of your registry for your needs. You can check that the registry exists by logging into the Azure portal and navigating to container registries. Your registry should be there.
You can now log in to your registry using
az acr login -n NAME_OF_REGISTRYYou should see “login succeeded”. You can upload a container image using the portal, but we will be using the CLI in this tutorial. The following commands will build our image and push it to our new registry:
docker build -t azure_demo:v1 .docker tag azure_demo:v1 NAME_OF_REGISTRY.azurecr.io/azure_demo:v1docker push NAME_OF_REGISTRY.azurecr.io/azure_demo:v1
Remember: change the name of the registry to match your own. If you did not name your image azure_demo in the first line, make sure to use the same name in lines 2 and 3 as well so the image name is consistent. An optional check can be done by navigating to your registry in the Azure portal and verifying your image is in the registry (under Services>Repositories).
Excellent! Our image is now in a repository in our Azure registry. This makes it much easier to deploy. The next step is to create a file called deployment.yml in our project directory, with the following contents:
The deployment.yml file contains all the information Azure needs to know in order to deploy our container. This yml file contains the minimum needed to deploy our app — if you would like to add more, the YAML reference on Azure is a great resource. Remember to set line 2 to your location (for example, eastus), and set line 3 to a unique project name, lines 8, 19 and 20 with your registry name. The FQDN on line 30 refers to what you would like your domain name to be — for example, if you write myvacation in place of FQDN_NAME on line 30, your website can be reached by visiting myvacation.AZURE_LOCATION.azurecontainer.io. Lastly, we must provide credentials to access our container registry to pull our container image (line 21). In order to get this password, run the following commands:
az acr update -n NAME_OF_REGISTRY --admin-enabled trueaz acr credential show --name NAME_OF_REGISTRY
This will output your registry’s password in the terminal. Copy that password, and paste it in line 21. Our deployment.yml is now ready.
Before we deploy our app, we will create a file called nginx.conf in our project directory. This will reroute web traffic from our FQDN to Streamlit’s port 8501. Without this, you would have to specify port 8501 in the domain name (for example, myvacation.eastus.azurecontainer.io:8501 — yikes). You can copy paste the following code into nginx.conf:
The only lines that must be changed are lines 22 and 53, where FQDN_NAME is the FQDN name you chose in line 30 of deployment.yml, and AZURE_LOCATION is the location you chose in line 2 of deployment.yml. Overall, this nginx server will listen to port 80 (default port when connecting to our website), and reroute traffic to localhost port 8501. The locations I included (/healthz, /vendor, /stream) are important for Streamlit — Streamlit will not work if those lines are omitted.
Perfect! Now we just have to add our newly created nginx.conf file to our Dockerfile.
Modify your Dockerfile to this new version, which includes some installations steps to install nginx (and other packages we will use for SSL) and includes the command to copy over our nginx.conf file.
We must also update our run.sh, adding lines 2 and 3 to start nginx.
Phew! Time to see our website up and running on the internet. But first, since we made changes to our project we must recreate our container, and push this new container to Azure container registry in place of the old container. We can use the same code to build our image and push it as before:
docker build -t azure_demo:v1 .docker tag azure_demo:v1 NAME_OF_REGISTRY.azurecr.io/azure_demo:v1docker push NAME_OF_REGISTRY.azurecr.io/azure_demo:v1
Now, run the following command in your terminal to deploy your app:
az container create --resource-group AMAZING_RESOURCE_GROUP --name demo_azure -f deployment.ymlThis command creates a container instance using our file deployment.yml. Make sure the — name flag matches the name you provided in deployment.yml line 3. The deployment may take a few minutes. You can confirm that your instance has been deployed using the Azure portal (navigate to container instances). You will be able to access your application using the FQDN you chose (FQDN_NAME.AZURE_LOCATION.azurecontainer.io). This name can also be confirmed in the portal:
Congratulations! Your Streamlit app is now up and running online on your custom domain name.
Conclusion
Remember, after any changes to our project, in order for those changes to be reflected on your web app, you must rebuild your image, push the image, delete the running container instance on Azure, and build your container instance again.
Be sure to read the second part of this two part series, where I will discuss how to create a free SSL certificate, how to store that SSL certificate, and how to automatically schedule the renewal of your certificate. I’ll also mention some more advanced tips to faster development.
I hope this tutorial saved you lots of time and stress during your Streamlit deployment! Feel free to follow me for more hands-on tutorials about machine learning and data science. Thank you for reading!
Links:
Linkedin: https://www.linkedin.com/in/sergei-issaev/
Github: https://github.com/sergeiissaev
Kaggle: https://www.kaggle.com/sergei416
Medium: https://medium.com/@sergei740
Twitter: https://twitter.com/realSergAI
Learn more about Vooban: https://vooban.com/en
