Running prefect behing a proxy

[igonro]

Hello, I'm trying to use prefect behind a proxy using Nginx.

In order to do this, I have my prefect server running with:

prefect server start --use-volume --volume-path ~/.prefect/pg_data

So I can access the Prefect UI in http://localhost:8080 correctly.

Now I have a Django website with the following Nginx configuration:

server {
  server_name               mywebsite.com;
  listen                    80;
  return                    307 https://$host$request_uri;
}
server {
  location / {
    proxy_pass              https://localhost:8000;  # gunicorn
    proxy_set_header        Host $host;
    proxy_set_header        X-Forwarded-Proto $scheme;
  }
  location /static {
    autoindex on;
    alias /var/www/mywebsite.com/static;
  }
  location /prefect {
    proxy_pass http://localhost:8080;  # prefect
    auth_basic "Restricted Content";
    auth_basic_user_file /etc/nginx/.htpasswd;
  }
  location /graphql {
    proxy_pass              http://localhost:4200;  # prefect graphql
    auth_basic              "Restricted Content";
    auth_basic_user_file    /etc/nginx/.htpasswd;
  }
  listen 443 ssl;
  ssl_certificate /var/www/mywebsite.com/my.crt;
  ssl_certificate_key /var/www/mywebsite.com/my.key;
}

But when I access https://mywebsite.com/prefect it keeps stucked in the loading screen, because it cannot load the fonts, css and js files. It looks like it's looking for these public assets in the url https://mywebsite.com/fonts, instead of https://mywebsite.com/prefect/fonts.

Then I saw this issue:
PrefectHQ/legacy-ui#109

And tried to set a base_url in the .prefect/config.toml like this:

[server]
  [server.ui]
    apollo_url="https://mysebsite.com/graphql"
    base_url="https://mywebsite.com/prefect"

But when I run again the prefect server a message appears saying Missing the PREFECT_SERVER__BASE_URL environment variable. Using default. I looked at the code and I think there is a bug, so I opened this issue; but I'm not 100% sure.

[majikman111]

@igonro I had to make modifications to the app and build my own docker container, essentially the changes in this PR with the base path set to prefectui PrefectHQ/legacy-ui#450.
I've published the image here https://hub.docker.com/repository/docker/majikman111/prefect-ui-proxy

[arp220517]

Hi @majikman111 - I'm trying to use prefect behind a traefik reverse proxy and I am facing this issue(UI loads, but cannot render the css. Keeps loading for ever), while exposing the prefect ui using an ingressroute. Strangely, the apollo service, when exposed as ingressroute is accessible. The traefik dashboard indicates all the routes and services are healthy.
I tried to use ingress instead of ingressroutes to see if it works (since the ui and apollo was working when deployed behind nginx using ingress), but in vain. Any thaughts?

[MrChadMWood]

For reference: #10452 (comment)