I serve all types of containers (docker) behind a reverse proxy (traefik 2.0), like backend apps (nodejs) or frontend apps (vuejs).
Actually, I am trying to serve a VueJS behind a path like https://localhost/my-app
.
/my-app
to my vuejs container<link href=css/app.css>
.https://localhost/my-app
https://localhost/css/app.css
instead of https://localhost/my-app/css/app.css
Have you an idea how to serve VueJS with relative resources behind my /my-app
redirectionSee configuration files below.
version: "3.7"
services:
vuejs:
restart: always
build:
context: .
dockerfile: ./Dockerfile
image: my-vuejs-app:latest
labels:
- "traefik.enable=true"
- "traefik.http.routers.my-app-router.rule=PathPrefix(`/my-app`)"
- "traefik.http.routers.my-app-router.tls=true"
- "traefik.http.middlewares.path-strip.stripprefixregex.regex=^/[a-zA-Z0-9_.-]+"
- "traefik.http.routers.my-app-router.middlewares=path-strip@docker"
module.exports = {
publicPath: './'
}
I used a middleware that adds a /
at the end of the request. This way, the relative resources are loaded as expected.
Example: (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"