Possible to run behind Traefik when hosted under a subpath?

[aodj]

I'm running a number of administrative websites behind Traefik, with each being under a specific path: traefik.mydomain.com/prometheus, traefik.mydomain.com/grafana and so on, and wish to do the same with Kowl.

When I set Kowl up under traefik.mydomain.com/kafka the running pod returns an error about the requested path not being found:

{"level":"debug","ts":"2020-08-11T09:25:59.153Z","msg":"requested file not found","file":"/kafka/"}

This is easily fixed by using Traefik's StripPrefix middleware to remove the /kafka path from the forwarded request. This results in the pod responding to the initial requests, but then subsequently failing to load any resources, since the paths being returned are simply relative to the root (ie /). The resource paths are all missing this extra /kafka element: ie loading traefik.mydomain.com/static/css/2.93c9421b.chunk.css instead of traefik.mydomain.com/kafka/static/css/2.93c9421b.chunk.css.

This is mentioned in the Traefik docs:

If your backend is serving assets (e.g., images or Javascript files), chances are it must return properly constructed relative URLs.
Continuing on the example, the backend should return /products/shoes/image.png (and not /images.png which Traefik would likely not be able to associate with the same backend).

The X-Forwarded-Prefix header can be queried to build such URLs dynamically.

Is there a way to inform the frontend about this extra prefix and have it return urls that resolve?

[rikimaru0345]

The backend actually doesn't return any URLs at all.
All everything is constructed by the frontend.

I could change the requests we're starting ourselves in the frontend,
but I most likely won't be able to change the "hardcoded" (by the frontend "compiler", create-react-app build) URLs.

I'll investigate if there's some way to workaround this though... 👍

[rikimaru0345]

How do you solve this in Grafana?
Is there some config option you set? (and if so, what is it called?)

[rikimaru0345]

Alright, I found a solution.

The backend can simply "hotfix" all the static urls/resources in index.html when it sees the X-Forwarded-Prefix header.

The dynamic urls (calls to /api/...) are even easier beacuse I can actually control those.

I'll add that right now... 😄

[aodj]

How do you solve this in Grafana?

Grafana allows configuration of the path it's at: see here for more information. The link provides an example setup:

[server]
domain = example.com
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana/
serve_from_sub_path = true

[rikimaru0345]

update: I'll probably finish this feature today

[rikimaru0345]

@aodj
The feature is done 😄
Please try it out and let me know if everything works.
See https://github.com/cloudhut/kowl/blob/master/docs/config/hosting.md#config-entries for documentation

[aodj]

Is there a new build available? I grabbed a build that was listed in the Github Actions output, since the quay.io listing doesn't show available builds :

$ docker pull quay.io/cloudhut/kowl@sha256:f0c9ff5bb2d8b5945729b3e444d9290ab2c7ac0992fdbbc083e966d0bf63f06e

Edit turns out I just don't know how to use quay.io 🤦

[aodj]

And yes, works great! Thanks for the efforts of everyone to make this work, it's greatly appreciated.

[weeco]

Perfect glad it's working, thank you for reporting back.