How to use Streamlit with Nginx?

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

1 Like

I resolved this problem by disable CORS
`

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

enableCORS = false
`

2 Likes

@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?

image

image

2 Likes

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

1 Like

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

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

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.

3 Likes

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.

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

2 Likes

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?