Deploying Streamlit with Nginx on a Custom URL Path

jia@jiatool.com (Jia) — Sat, 09 Nov 2024 20:40:00 +0800

(This article was translated by AI and then reviewed by a human.)

Preface

After creating a web app using Streamlit , aside from deploying it on Streamlit Community Cloud, we also have the option to self-host it (for example, using Docker or Kubernetes).

* Previous post: (2023年新版) 使用 Streamlit 簡單又快速建立 Dashboard 網頁

I've recently had a need to set up a reverse proxy using Nginx, but instead of routing to the root path (/), I wanted to specify a different path (like /myapp).

However, after going through several online articles and still struggling with the setup, I'm sharing the final successful configuration here to help others avoid similar issues.

Setup Details

I needed to configure Nginx so that when another computer connects to a specific path on my host machine (e.g., https://mysite.com/myapp), it forwards the request to the Streamlit app's port (e.g., http://localhost:8000).

Environment

I'm running a Docker environment within WSL (Linux subsystem) on Windows 11, where my Streamlit app is running.

I also ran an Nginx server (v1.24.0) on Windows so that other computers within my company can connect to my localhost.

Nginx Configuration

Since Streamlit uses WebSocket, a few extra configurations were needed.

WebSocket is a kind of network protocol used to create a “persistent, two-way communication” channel between a server and a client. It’s a continuous connection where the server can actively send data to the client without having to wait for a request from the client.
This makes WebSocket especially suitable for real-time applications, such as instant messaging and online games.

Edit the nginx.conf file, which can typically be found in the nginx installation path, /usr/local/nginx/conf, /etc/nginx, or /usr/local/etc/nginx.

http {
...
map $http_upgrade $connection_upgrade {
default upgrade;
'' close;
}
server {
listen 80;
listen 443 ssl;
ssl_certificate "(ellipsis)/conf/certs/demo.pem";
ssl_certificate_key "(ellipsis)/conf/certs/demo.key";
# Streamlit app
location /myapp {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
}
}

I also found another way to set up the # Streamlit app part, which can achieve the same result:

 location /myapp/_stcore/stream {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection $connection_upgrade;
}
location /myapp {
proxy_pass http://localhost:8000;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}

Streamlit command

This is a crucial part. Many articles focus on Nginx configuration but don't mention the necessary parameters for the streamlit run command:

1

streamlit run streamlit.py --server.port 8000 --server.enableCORS false --server.enableXsrfProtection false --server.baseUrlPath "myapp"

As a side note, you can disable sending usage statistics to Streamlit:

1

--browser.gatherUsageStats false

Conclusion

I'm not sure if this is the best configuration, but at least it works for me (🤣.

I've listed a few reference articles below. If the above steps don't help, you can check these links for more information.

References:
config.toml | Streamlit API reference
How to use Streamlit with Nginx? | Streamlit Discuss
Deploy Streamlit with NGINX with SSL | Streamlit Discuss
Deploy streamlit with nginx + docker | Streamlit Discuss
Run streamlit app on specific URL path | Streamlit Discuss

平靜的海面造就不出優秀的水手。