CSS can't load in localhost when using asymetric port mapping with docker and nginx reverse proxy
Closed this issue · 5 comments
Describe the bug
I've seen already many issues related to the css handling when using nginx as a reverse proxy. Not sure at what extend this is the same issue.
My setup is the following: I have a docker image with a very basic nginx conf for reverse proxying a gradio app that also runs locally inside the docker.
When I launch the docker container to start the nginx server and the gradio app inside mapping local port 443 to 443, it works, although it still shows some errors (image below)
The funny behaviour comes when I map docker with a different port. This means using local port 4208 to container port 443, for handling the https requests. In this moment, the css can't be loaded.
I've tried with several releases of gradio. The result that is shown below belongs to gradio 4.31.0.
I leave here a mocked version of my gradio app, as well as the nginx conf file
I tried to follow your guide in https://www.gradio.app/guides/running-gradio-on-your-web-server-with-nginx as much as possible, as I know little to nothing about nginx.
And just in case you ask, the port mapping in docker comes from a production necessity in a real server, so I can't avoid it.
Thanks in advance
Have you searched existing issues? 🔎
- I have searched and found no existing issues
Reproduction
This is the mocked version of the gradio code:
import gradio as gr
with gr.Blocks() as demo:
start_btn = gr.Button(value="Start")
demo.queue()
demo.launch(
favicon_path=os.path.join(os.path.dirname(os.path.dirname(__file__)), "common/media/favicon.png"),
server_name="0.0.0.0",
server_port=5000,
root_path="/user-authentication-chatbot"
)This is the separate nginx conf file for that particular page in sites-available:
server {
listen 443 ssl;
server_name other.domain.com localhost;
ssl_certificate /apps/certs/cert.crt;
ssl_certificate_key /apps/certs/cert.key;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;
ssl_ciphers 'EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH';
location /user-authentication-chatbot/ {
proxy_pass http://127.0.0.1:5000/;
proxy_buffering off;
proxy_redirect off;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Proto $scheme;
}
}Screenshot
No response
Logs
No response
System Info
Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.31.0
gradio_client version: 0.16.2
------------------------------------------------
gradio dependencies in your environment:
aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==0.16.2 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.0
importlib-resources: 6.4.0
jinja2: 3.1.4
markupsafe: 2.1.5
matplotlib: 3.8.4
numpy: 1.26.4
orjson: 3.10.3
packaging: 24.0
pandas: 2.2.2
pillow: 10.3.0
pydantic: 2.7.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.4.4
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.29.0
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.
gradio_client dependencies in your environment:
fsspec: 2024.3.1
httpx: 0.27.0
huggingface-hub: 0.23.0
packaging: 24.0
typing-extensions: 4.11.0
websockets: 11.0.3Severity
Blocking usage of gradio
Can you try changing:
proxy_set_header Host $host;
to
proxy_set_header Host $http_host;
in your nginx configuration?
Still same behaviour
Hi @flacomalone could you see if installing this version of gradio fixes it?
I can gladly confirm that it does work now. Many thanks for the fix
Great! It’ll be out on pypi soon if it’s not already out
Kudos to @hannahblair for the fix!