Search code examples
vue.jsreverse-proxytraefik

VueJS : relative resources doesn't work behind reverse proxy


Intro

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.

What I expect

  • Traefik redirecting /my-app to my vuejs container
  • VueJS app working clean.
  • VueJS app loads resources with relative paths like <link href=css/app.css>.

What I have instead

  • VueJS app not working because is not getting resources properly.
  • I am getting only index.html (root page of VueJS) behind https://localhost/my-app
  • My browser is trying to get relative resources on 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 redirection

Configuration files

See configuration files below.

docker-compose.yml

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"

vue.config.js

module.exports = {
  publicPath: './'
}

Solution

  • 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"