Media path for nginx?

🚀 Deployment
1

This library is really cool, thanks devs!

So hosting with nginx is tricky, but I’ve gotten most of it to work with multiple proxy passes as suggested here: How to use Streamlit with Nginx?

However, media like images is still an issue and I can’t figure out how to configure the proxy pass for those. Here’s the full nginx config I got currently:

location /app {
	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 ^~ media {
	proxy_pass		https://127.0.0.1:8501/media/;
}
location /app/stream {
	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;
}

I’ve tried removing the trailing slash on media but that doesn’t work either. Anyone got any ideas? :slight_smile:

edit: forgot to write i’ve tried with and without https on the proxy pass for media, as the link when inspecting the html element looked like it was using https

2

Hey @fohria, welcome to the forums :tada::slight_smile: !

It would be good to have a look at the networking tab on the media file. I would be curious to see if there is any problem in the way we generate the urls.

3

Sorry for late reply, had to find time to get the app public. But you can see it at https://gamescapades.com/banditapp

From what I can see in the network dev tools tab, I get a 403 forbidden for the media files, using the nginx config I posted above (just with ‘banditapp’ instead of ‘app’). The fonts work fine, so it’s a bit curious media files don’t.

By the way, do you know why it’s the case we need so many proxy_pass commands? Whenever I’ve used other apps, for example ghost blog, it’s always sufficient with one proxy_pass.

4

If you are still facing the issue, I was facing the same issue for media and solved it by adding -
location ^~ /media {
proxy_pass http://127.0.0.1:8501/media;
}

2 Likes
5

Thanks for sharing that @Nishtha_Goswami, the next person to drop by with this issue will be grateful you did :+1:

1 Like
6

Still doesn’t work for me :frowning: Have tried /media /media/ media/ for the location and with and without trailing slash at end of the proxypass URL. All of these with and without https.

Also updated to latest streamlit (0.61.0).

nginx access log says

"GET /banditapp/media/d8acb14f24b10e2840edb56b70f2193a35febbd9f2f8cfce891c4245.png HTTP/1.1" 403 69 "https://gamescapades.com/banditapp"

Unfortunately the streamlit --log_level debug outputs absolutely nothing so it’s difficult to know what’s going on. Streamlit is copying and/or renaming the file and then serving it so it would have been very useful to have streamlit logs output something in terminal.

One of the image files is in same directory as streamlit python file with the same permissions. The other image file is automatically created by matplotlib so that should work even if permissions on the former mentioned file were wrong.

I’m probably missing something obvious :slight_smile:

What does the rest of your nginx config look like @Nishtha_Goswami?

7

Hi @fohria. So I have two streamlit apps running on 8501 and 8502(/help). Only web app running at 8502 has some media and thus require the /media path. I have attached my Nginx configuration for the same below.

        proxy_http_version 1.1;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        # streamlit specific:
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_read_timeout 86400;

        location / {
                proxy_pass http://127.0.0.1:8501;
        }

        location /help {
                rewrite ^/help(.*) /$1 break;
                proxy_pass http://127.0.0.1:8502;
        }

        location ^~ /help/static {
                proxy_pass http://127.0.0.1:8502/static/;
        }

        location ^~ /help/healthz {
                proxy_pass http://127.0.0.1:8502/healthz;
        }

        location ^~ /help/vendor {
                proxy_pass http://127.0.0.1:8502/vendor;
        }

        location ^~ /help/media {
                proxy_pass http://127.0.0.1:8502/media;
        }

        location /help/stream {
                proxy_pass http://13.233.201.68:8502/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;
        }
1 Like
8

hi there, I’m having an issue just setting up 2 different streams like so,

     location ^~ /app1 {
                proxy_pass http://127.0.0.1:8501/;
        }

        location ^~ /app2 {
                proxy_pass http://127.0.0.1:8502/;
        }

But I keep getting a 404 Not Found