Traefik with Vue

Traefik Traefik v2
1

Hello,
I have setup Traefik for my Vue application within a Docker container, which works quite well. The problem is that when I refresh a page on my application which is not my main ('/') page, I get a blank page. No 404, just blank. From here I get that I have to do the following:

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

(because I want the html5 Mode).

This is my current Docker-compose setup:


traefik:
  image: "traefik:v2.5"
  container_name: traefik_prod
  command:
    - "--api.insecure=true"
    - "--providers.docker=true"
    - "--providers.docker.exposedbydefault=false"
    - "--entrypoints.websecure.address=:443"
    - "--certificatesresolvers.myresolver.acme.tlschallenge=true"
    - "--certificatesresolvers.myresolver.acme.email=noreply@mydomain.com"
    - "--certificatesresolvers.myresolver.acme.storage=/letsencrypt/acme.json"
    - "--entrypoints.web.address=:80"
    - "--entrypoints.web.http.redirections.entryPoint.to=websecure"
    - "--entrypoints.web.http.redirections.entryPoint.scheme=https"
    - "--entrypoints.web.http.redirections.entrypoint.permanent=true"
  ports:
    - 80:80
    - 443:443
  volumes:
    - "./letsencrypt:/letsencrypt"
    - "/var/run/docker.sock:/var/run/docker.sock:ro"
  restart: always

frontend:
  build:
    context: ./vue
    dockerfile: Dockerfile.prod
  container_name: vue_prod
  depends_on:
    - fastapi
  restart: always
  labels:
    - "traefik.enable=true"
    - "traefik.http.routers.frontend.rule=Host(`mydomain.com`) && PathPrefix(`/`)"
    - "traefik.http.routers.frontend.entrypoints=websecure"
    - "traefik.http.routers.frontend.tls.certresolver=myresolver"

Or is that not possible and do I have to add a web-server to my setup? I understood that Traefik does not serve static files. I'm quite new to all of this.

2

Traefik is not a web server, it is a reverse proxy. It will forward all requests to a target service, depending on the rule, usually domain (and path).

To serve files, you need an additional web server. In your case a web server, that is configured to always serve root, independent of the path.

3

Hello @bluepuma77,

That is already what I thought more or less, but I thought that there was maybe a way. But after a day of looking, I figured it out myself with nginx :-). Thanks you for your reply nonetheless!

Kind regards,
Cass