How to use Streamlit with Nginx?

[virusvn]

Hi guys,

Thanks for created great product.
I’m setting up Nginx proxy front of Streamlit, but unsuccessful.
The error in browser: “WebSocket connection to ‘ws…stream’ failed: Error during WebSocket handshake: Unexpected response code: 403”

My application is listing streamlit’s components
http://13.114.97.39:8501 => work
http://streamlit.fullstackstation.com => not work

[virusvn]

I resolved this problem by disable CORS
`

The value below was set in ~/.streamlit/config.toml

enableCORS = false
`

[Marc]

@virusvn

Awesome!

I have added you to the awesome-streamlit and the awesome-streamlit App.

Thanks for sharing. Hope it’s ok to share on the awesome-streamlit list?

MarcSkovMadsen/awesome-streamlit

[tc1]

@virusvn This looks great, thanks for sharing with the community!

[moh555m555]

I am trying to forward port 80 to 8501 but could not. Any idea ?

[nthmost]

Hi @moh555m555 – Setting up port forwarding can be a frustrating process, especially on cloud servers.

There are several webservers that can accomplish what you need. I often find Apache2 to be easier to set up for simple cases.

See my response on your earlier question: Permission denied in ec2 port 80

[virusvn]

This is my nginx configuration for setup streamlit at subpath https://fullstackstation.com/streamlit-components-demo:

location /streamlit-components-demo {
    proxy_pass http://127.0.0.1:8501/;
}
location ^~ /static {
    proxy_pass http://127.0.0.1:8501/static/;
}
location ^~ /healthz {
    proxy_pass http://127.0.0.1:8501/healthz;
}
location ^~ /vendor {
    proxy_pass http://127.0.0.1:8501/vendor;
}
location /stream { # most important config
    proxy_pass http://127.0.0.1:8501/stream;
    proxy_http_version 1.1; 
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_read_timeout 86400;
}

For subdomain, just setup the /stream part is enough.
Hope this help.

[tokestermw]

Hi virusvn,

Do you have a reproducible example using streamlit hello?

I can’t seem to get the websockets connection even with your nginx.conf.

WebSocket connection to 'ws://SOME_DOMAIN:8501/stream' failed: WebSocket is closed before the connection is established.

[tokestermw]

Actually, I was able to make it work. I was using port 3000 to test, which is I think privileged for development.

[danlester]

Thanks for the information here @virusvn.

This just about works for me except that: if I want the app to be hosted at /myapp, I find that streamlit looks for /myapp/stream and /myapp/healthz, but looks for static items at an absolute /static URL.

This is probably by design but it could easily conflict with /static based on the main site.

The sample nginx configuration given above implies that you are seeing something different - stream accessed at /stream instead of /streamlit-components-demo/stream (although my nginx knowledge is limited), so maybe I’m missing some other configuration you’ve already set.

Is there a configuration option in streamlit asking for static assets to be fetched from a relative URL, i.e. /myapp/static in my case?

[Anh_Chu]

@tokestermw Hi could you share some tips that made it work for you? My app is also encountering serious slow downs with Nginx using the same configs discussed here. WebSocket is closed before the connection is established
When I access the server directly using IP:8501, the app loads instantly but accessing through domain name and Nginx just keeps the app on Connecting... Please wait

[David_Faria]

@Anh_Chu Having the same problems as you do. Any ideas?

I’m using a reverse proxy with Nginx based on @virusvn recommendation on configuration: if I visit using IP:<streamlit-port> everything works just fine, if I visit going through Nginx IP/app (where I redirect to IP:<streamlit-port> with Nginx, it succesfully redirects, but streamlit remains stuck in Connecting... Please Wait. Nginx logs shows 403 forbidden errors on /healthz.

I’m using streamlit 0.56, and using Docker with docker-compose and 2 services: one container to deploy the app, and one container for nginx. They are both part of the network created by default, so callable by their service name.

Update:

The nginx configuration here helped me: Host streamlit app at a subfolder . The problem was that I was redirecting IP/app to IP:<streamlit-port> but I was doing so for the stream endpoint without prefixing with app. I set the location block to /app/stream/ (like in the list of the answer), and it worked.

[Anh_Chu]

Glad you resolved it. I think my problem is simply a DNS resolver problem on the WebSocket because end users of my app actually report spotless performance haha. Using the same settings as you do.

[Julien_Chaumond]

You can combine with the --server.baseUrlPath config option to make your nginx setup simpler (because everything will be nested inside your subfolder)

Here’s what I’ve been using for instance:

location /nlp/viewer/ {
	proxy_pass         http://34.70.xxx.yyy:8000/nlp/viewer/;
	proxy_set_header   Host      $host;
	proxy_set_header   X-Real-IP $remote_addr;
	proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
	proxy_set_header   X-Forwarded-Proto $scheme;
	proxy_buffering    off;
	proxy_http_version 1.1;
	# Also requires websocket:
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "upgrade";
	proxy_read_timeout 86400;
}