I have developed and deployed web services using Streamlit on a cloud service recently. To ensure that users can use the services safely and securely, it is necessary to introduce an SSL/TLS certificate. This article describes how a free SSL/TLS certificate called Let's Encrypt is deployed on Ubuntu 22.04 and how to enable HTTPS for a web service using Streamlit.
Please note that, I used Alibaba Cloud Elastic Compute Service (ECS) for virtual computing, but this method also applies to AWS EC2, Azure VM (Virtual Machines), and Google Cloud Compute Engine.
※ The public IP address mentioned in the article is for blog creation purposes only and has already been deleted.
※ Before proceeding with the process, it is essential to have a domain beforehand.
Streamlit is an open-source web service framework that can be built with Python. Streamlit uses Python to intuitively describe UI components and quickly visualize data. Streamlit also has templates, which can be used together with widgets from the library. You can freely customize web services using widgets such as sliders, text inputs, checkboxes, radio buttons, charts, and maps.
I prefer developing web services using JSX in environments such as React and Deno. However, I don’t want to spend much time on building the web services this time due to the specifications and requirements. Therefore, Streamlit is used for the building process.
When you run the streamlit hello command to publish a website, Streamlit normally provides a URL based on HTTP and Port 8501.
To publish a web service using Streamlit to the public, the public port will be changed to the port used by general users while enabling HTTPS. An SSL certificate is required for HTTPS. In this case, Nginx is used to route the Streamlit web services to HTTP (port 80). Nginx must be configured to redirect to HTTPS with SSL/TLS certificate.
The workflow is as follows:
Step1: Deploy Streamlit
Step2: Deploy Nginx
Step3: Use Nginx to route Streamlit web services while redirecting to HTTP
Step4: Implement AOSSL using Let's Encrypt with Nginx
Overall workflow
Install Nginx on the web server. As mentioned earlier, Alibaba Cloud ECS is used.
sudo apt update && sudo apt install nginx
During the installation, an input prompt will appear. Select Y here.
A screen with a pink background will appear. Press the Enter key here.
After Nginx is successfully installed, check its status.
systemctl status nginx
※ Press Ctrl + C to exit.
If the status of Nginx is active (running), proceed to the next step. Otherwise, please take measures, such as restarting using systemctl restart nginx.
If the status is active (running), enter the public IP address of the web server (Alibaba Cloud ECS) into the browser to check if Nginx can be displayed. Please note that ports 80 and 443 must be opened in advance for virtual computing.
Now that Nginx has been installed and the website can be viewed in the browser, let’s use Nginx to route the Streamlit web services.
First, check the Streamlit web services by running the following Streamlit command in the terminal:
streamlit hello
For http://47.91.18.116:8501 that is output here, http://47.91.18.116 is the public IP address of the web server, and 8501 is the default Streamlit port. By using this port for communication, you can view Streamlit web services from the browser.
※ Please replace the global IP address with the IP address of your own environment.
What will happen if port 8501 is removed from this URL? As a result, the Nginx page is displayed.
Therefore, to view the page via port 80 (that is, HTTP page) instead of Streamlit page via port 8051, you need to set the routing for Streamlit web services in Nginx to redirect to HTTP.
Note that, though you can set the --server.port argument in Streamlit command to 80 to browse the Streamlit web services via port 80, the ultimate purpose of Streamlit web services with HTTPS cannot be realized. In this case, Nginx can be used for routing and displaying the Streamlit web services with HTTPS.
First, check whether Nginx can perform routing successfully. In the previous steps, it has already been verified that it can access http://47.91.18.116:8501. Now, configure it so that it can also access the address even when the port is not specified (http://47.91.18.116). Open the sites-available and sites-enabled folders of Nginx and check the contents.
cd /etc/nginx/
The focus here is the Nginx paths. There is one folder for the domain configuration file and another folder for linking the domain configuration file, so we use these folders to set up routing. Note that if the setting process stops halfway, you will have to reconfigure Nginx or, in the worst case, repurchase the web server (ECS instance). Therefore, it is necessary to finish the setting without stopping.
/etc/nginx/sites-available # folder for domain configuration files
/etc/nginx/sites-enabled # folder for linking domain configuration files
Set up nginx.conf as follows:
vi /etc/nginx/nginx.conf
server {
listen 80;
listen [::]:80;
server_name _;
root /usr/share/nginx/html;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location / {
}
error_page 404 /404.html;
location = /40x.html {
}
}
Next, grant write permissions to the sites-available and sites-enabled folders using the following commands:
sudo chmod 777 /etc/nginx/sites-available
sudo chmod 777 /etc/nginx/sites-enabled 
After modifying the permissions of the sites-available and sites-enabled folders, add the Nginx routing configuration to route from HTTP port 80 to Streamlit port 8501.
Create a "streamlit-webservice" file for the routing configuration of Nginx in the following path (you can use any filename). This streamlit-webservice file includes the following settings.
It is used for setting up the redirection with "proxy_pass" as the routing information when a browser accesses the server specified by "server_name" and port specified by "listen".
vi /etc/nginx/sites-available/streamlit-webservice
server {
listen 80;
server_name 47.74.21.181; # Domain name or IP address
location / {
proxy_pass http://0.0.0.0:8501/; # Route from HTTP port 80 to Streamlit port 8501
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
After the streamlit-webservice file is configured, create a symbolic link. A symbolic link enables you to refer to the target file or directory when it is accessed on the file system. On Unix, use the -s option in the ln command.
ln -s /etc/nginx/sites-available/streamlit-webservice
/etc/nginx/sites-enabled/streamlit-webservice
After the above configuration is completed, restart Nginx.
sudo service nginx restart
sudo service nginx status 
After setting the Nginx configuration file, try starting Streamlit as a test.
streamlit hello 
Check the routing by Nginx. Start with the browser with port 8501.
The Streamlit web service is successfully displayed.
Next, check the result of normal access when port 8501 is not specified (that is, port 80 is used).
The Streamlit web service with port 80 is also successfully displayed. The routing configuration of Nginx is completed.
Install Certbot (Let's Encrypt) to use the SSL certificate.
sudo apt install certbot python3-certbot-nginx
Issue an SSL certificate for a domain using the following command. In this example, an SSL certificate for the domain search.xxxxxx.com is issued.
sudo certbot --nginx -d ＜Domain＞In the process, you will be asked to enter an email address. You need to enter the email address of the certificate signer.
After the SSL configuration is completed, change the public IP address to the domain name in the Nginx configuration file. Under the previous configuration, when a browser accesses the web server using the public IP address in the URL, the access is redirected to the Streamlit web service based on the routing information. Now, when a browser performs URL access by domain, the access is redirected to the Streamlit web service.
vi /etc/nginx/sites-available/streamlit-webservice
server {
listen 80;
server_name search.xxxxxx.com; # Domain name or IP address
location / {
proxy_pass http://0.0.0.0:8501/; # Route from HTTP port 80 to Streamlit port 8501
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}Then, under the same configuration, redirect any HTTP request to HTTPS through an SSL certificate. To do so, update the following configuration information:
server {
listen 80;
server_name search.xxxxxx.com; # Domain name or IP address
location / {
proxy_pass http://0.0.0.0:8501/; # Route from HTTP port 80 to Streamlit port 8501
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_http_version 1.1; # If you do not upgrade, the loading hangs
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
listen 443 ssl;
ssl_certificate /etc/letsencrypt/live/search.xxxxxx.com/fullchain.pem; # Authenticate with a certificate from Certbot
ssl_certificate_key /etc/letsencrypt/live/search.xxxxxx.com/privkey.pem; # Authenticate with a certificate from Certbot
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
server {
listen 80;
server_name search.xxxxxx.com;
return 301 https://$server_name$request_uri; # Redirect an HTTP request to HTTPS
}
After the setup is done, the default Streamlit port 8501 will no longer be used. Disable (delete) this port as a network rule for the web server.
Next, set the SSL protocol in nginx.conf as needed. As of April 2023, TLS 1.0 and 1.1 are no longer supported for SSL/TLS communication. The SSL protocol must be modified in nginx.conf due to a vulnerability problem if you are publishing an external website.
Modify nginx.conf as follows:
vi /etc/nginx/nginx.conf
-omitted-
#ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE # comment out
ssl_protocols TLSv1.2 TLSv1.3; # Dropping SSLv3 TLSv1 TLSv1.1 , ref: POODLE
ssl_prefer_server_ciphers on;
-omitted-
After the configuration is modified, restart Nginx.
sudo service nginx restartNow you will be able to view Streamlit web services via HTTPS.
You can use DevTools of Chrome to make sure the SSL certificate is available.
The SSL certificate of Let's Encrypt is free but has a validity period of 90 days. You can add a systemd timer in the Certbot package to automatically renew the certificate even if it is about to expire. The script is executed twice a day to automatically renew a certificate that will expire in 30 days.
Use systemctl to check the status of the timer.
sudo systemctl status certbot.timer
Check whether the automatic update is configured correctly. If yes, the following command will return Succeed.
sudo certbot renew --dry-run
This article describes the steps to publish Streamlit web services with HTTPS using a free SSL/TLS certificate called Let's Encrypt.
SSL certificate is an important tool used to enhance the security of web services and applications.
By using SSL certificates, communication between websites and applications is encrypted, making it difficult for third parties to intercept or tamper with data. For example, robust encrypted communication technology is required to protect personal information, such as login information and address, and sensitive data, such as credit card information. Additionally, SSL certificates are issued by the Certificate Authority (CA), which verify the owner's identity and prove to users that the website is trustworthy, protecting them from phishing attacks and scam sites. Furthermore, a trustworthy website that uses an SSL certificate also has the advantage of ranking higher in search results for SEO (search engine optimization) on engines such as Google and Yahoo.
There are three types of server certificates used on websites and applications: Domain Validation (DV), Organization Validation (OV), and Extended Validation (EV). Their usage depends on the reliability of the website itself. Let's Encrypt used in this article is a DV certificate, which is easy to obtain and adjust for free. OV is generally recommended for websites of companies, foundations, and corporations. In Japan, SSL certificates are issued with reference to corporate registration and Teikoku Databank. Although the hurdle of using certificates is raised, the certificates help to differentiate organizations’ websites from a site used by general users. EV, which is a higher-level OV, is mandatory for websites of organizations that handle money, such as banks (account usage) and brokerage firms.
SSL/TLS certificates can also be used for security enhancement, vulnerability countermeasures and risk avoidance. You can use this article as a reference.
This article is a translated piece of work from SoftBank: https://www.softbank.jp/biz/blog/cloud-technology/articles/202305/https-streamlit/
Building an Active-Active Multi-Zone Application with Lindorm
Use Anomaly Detection in Time Series Data with Alibaba Cloud Lindorm Machine Learning
9 posts | 0 followers
FollowAlibaba Cloud Community - June 30, 2023
Alibaba Cloud Community - March 23, 2022
Alibaba Cloud Community - March 31, 2022
Alibaba Clouder - July 15, 2019
Alibaba Clouder - January 25, 2018
Alibaba Clouder - March 28, 2018
The error I needed to fix was that certbot by default installs the certificate on /sites-enabled/default even if when I had /sites-enabled/www.strativesandbox.uk symlinked to /site-available/www.strativesandbox.uk which is certbot bug.The solution is to delete the default file and its symlink and then run the "sudo certbot --nginx -d ＜Domain＞" again so certbot installs it on the only available config and will say "Successfully deployed certificate for www.example.com to /etc/nginx/sites-enabled/www.example.comCongratulations! You have successfully enabled HTTPS on www.example.com" instead of /etc/nginx/sites-enabled/default in the path.
9 posts | 0 followers
Follow
HTTPDNS
HTTPDNS is a domain name resolution service for mobile clients. It features anti-hijacking, high accuracy, and low latency.
Learn More
Big Data Consulting for Data Technology Solution
Alibaba Cloud provides big data consulting services to help enterprises leverage advanced data technology.
Learn More
Cloud Migration Solution
Secure and easy solutions for moving you workloads to the cloud
Learn More
Data Security on the Cloud Solution
This solution helps you easily build a robust data security framework to safeguard your data assets throughout the data security lifecycle with ensured confidentiality, integrity, and availability of your data.
Learn MoreMore Posts by Hironobu Ohara
Dikky Ryan Pratama June 27, 2023 at 12:48 am
awesome!