Serve relative paths behind traefik pathprefix

What did you do?

I want to serve all types of services behind my traefik reverse proxy, like nodejs apps (that works perfectly) or vuejs apps.
Actually, I am trying to serve a vuejs app into a container.
This application is deploy is deployed with CI/CD behind these traefik configuration:

  • Router rule : PathPrefix(`/easydeploy-front`)
  • Middleware : StripPrefix(`/easydeploy-front`)

What did you expect to see?

Vuejs app working clean.
Vuejs app loads resources with relative paths like <link href=css/app.css>.
So my browser have to call https://myserver/easydeploy-front/css/app.css to get my resource properly.

What did you see instead?

Vuejs app not working because my browser is Calling https://myserver/css/app.css at the root of my traefik. I Don't understand why the browser is Calling the root of my server knowing that i'm using relative paths.
My app works clean when this is served behind a web server like IIS.

Output of traefik version: (What version of Traefik are you using?)

2.0

I found the solution, I use a middleware that add a / at end of request, like this the relative resources are loaded as expected.

See my labels (for traefik) in my docker service:

      - "traefik.enable=true"
      - "traefik.http.routers.my-app-router.tls=true"
      - "traefik.http.routers.my-app-router.rule=PathPrefix(`/my-app`)"
      - "traefik.http.middlewares.test-redirectregex.redirectregex.regex=^(https|http)://([a-zA-Z0-9_.-]+)/([a-zA-Z0-9_.-]+)$$"
      - "traefik.http.middlewares.test-redirectregex.redirectregex.replacement=$${1}://$${2}/$${3}/"
      - "traefik.http.routers.my-app-router.middlewares=test-redirectregex@docker,path-strip@file"

@ldez this should be the intended behaviour. Is there any solution apart from this?

1 Like

I'm having a very similar problem and tried your example, but traefik comes up with the error 'path-strip@file' not known. Do you reference it elsewhere in your docker service? or any idea how I can fix this?