Serving UI behind a reverse proxy with a URL prefix

[nmaludy]

Problem Description

I'm trying to serve the Fabio UI behind an nginx reverse proxy with a URL prefix of /fabio. This means i would like the URL of the UI to be https://server.domain.tld/fabio/routes and the API to be https://server.domain.tld/fabio/api. The health check should be https://server.domain.tld/fabio/api and the manual should be https://server.domain.tld/fabio/manual.

I have the following nginx config:

server {
  listen       *:443 ssl;

  ssl on;

  ssl_certificate           /etc/ssl/node.crt;
  ssl_certificate_key       /etc/ssl/node.key;
  ssl_session_cache         shared:SSL:10m;
  ssl_session_timeout       5m;
  ssl_protocols             TLSv1 TLSv1.1 TLSv1.2;
  ssl_ciphers               EECDH+AESGCM:EDH+AESGCM:AES256+EECDH:AES256+EDH:ECDHE-RSA-AES128-GCM-SHA384:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA128:DHE-RSA-AES128-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES128-GCM-SHA128:ECDHE-RSA-AES128-SHA384:ECDHE-RSA-AES128-SHA128:ECDHE-RSA-AES128-SHA:ECDHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA128:DHE-RSA-AES128-SHA128:DHE-RSA-AES128-SHA:DHE-RSA-AES128-SHA:AES128-GCM-SHA384:AES128-GCM-SHA128:AES128-SHA128:AES128-SHA128:AES128-SHA:AES128-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!MD5:!PSK:!RC4;
  ssl_prefer_server_ciphers on;

  access_log            /var/log/nginx/ssl.access.log combined;
  error_log             /var/log/nginx/ssl.error.log;

  add_header              Front-End-Https on;
  add_header              X-Content-Type-Options nosniff;

  location /consul/ {
    rewrite ^/consul/(.*)  /$1 break;
    
    proxy_pass       http://127.0.0.1:8500/;
    proxy_redirect   / /consul/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
  # consul hard codes their API endpoint URL in their web UI, have to reverse proxy this also
  location /v1/ {
    proxy_pass       http://127.0.0.1:8500/v1/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location /fabio/ {
    proxy_pass       http://127.0.0.1:9998/;
    proxy_redirect   / /fabio/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
  }
}

Using this config i can hit /fabio/ and it redirects me to /fabio/routes, however the screen that is rendered has a blank routes list.

Looking at the code it appears that the UI has a hard coded path that it's using for the API in Javascript

https://github.com/fabiolb/fabio/blob/master/admin/ui/route.go#L123-L139

So /api/routes and /api/paths are hard coded. To get around this i had to add another reverse location for /api/:

  location /api/ {
    proxy_pass       http://127.0.0.1:9998/api/;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-Host $host:$server_port;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
  }

Ideas

It would be great if we could specify a custom prefix in the config so i could serve everything from the /fabio/ prefix with a single reverse proxy location.

FYI: it appears that Consul has the same problem with their API endpoint (it's hard coded as /v1/)

[scalp42]

Same issue here, we have to add the following routes on the ALB side:

• /api/
• /routes
• /logo.svg

If we could just route /fabio-ui/ or something like this, it would be much easier.

[Chrislevi]

Hitting the same wall, used -ui-content-path to serve Consul UI behined Traefik with PathPrefix rules.. Is there any progress with this?

[scalp42]

If using ALB, this will work: