Funky Whales and Traefik2

Funkwhale is my chosen music streamer for my selfhosted home-prod.

Going through the documentation, Funkwhale expects a few things:

1. nginx as a reverse proxy.
2. A single docker host.

There's no documentation for Traefik2 on Funkwhale's website, and the error it produces with a default configuration is confused easily with other Funkwhale issues.

Namely, Funkwhale will partially load and you'll see its lovely default orange and gray UI, and showing the source of that page will give you an error complaining that Javascript must be enabled.

Further, if you inspect the page and look at the resources loaded, you'll see all the /api resources return a 502 error.

The solution is to add the following below to

deploy: 
  labels:

        traefik.http.middlewares.funkwhale.headers.stsSeconds: '15552000'
        traefik.http.middlewares.funkwhale.headers.framedeny: 'true'
        traefik.http.middlewares.funkwhale.headers.stsIncludeSubdomains: 'true'
        traefik.http.middlewares.funkwhale.headers.customFrameOptionsValue: SAMEORIGIN
        traefik.http.middlewares.funkwhale.headers.stsPreload: 'true'
        traefik.http.middlewares.funkwhale.headers.sslredirect: 'true'

So the whole frontend container compose should look like this:

  funkwhale-front:
    restart: unless-stopped
    image: funkwhale/front:stable
    networks:
     - default
     - ldap_default
     - traefik_proxy_default
    depends_on:
      - funkwhale-api
    env_file:
      - .env
    volumes:
      # Uncomment if you want to use your previous nginx config, please let us
      # know what special configuration you need, so we can support it with out
      # upstream nginx configuration!
      #- "./nginx/funkwhale.template:/etc/nginx/templates/default.conf.template:ro"
      #- "./nginx/funkwhale_proxy.conf:/etc/nginx/funkwhale_proxy.conf:ro"
      - "${MUSIC_DIRECTORY_SERVE_PATH-/srv/funkwhale/data/music}:${MUSIC_DIRECTORY_PATH-/music}:ro"
      - "${MEDIA_ROOT}:${MEDIA_ROOT}"
      - "${STATIC_ROOT}:/usr/share/nginx/html/staticfiles:ro"
    ports:
      # override those variables in your .env file if needed
      - 5000:80
    deploy:
      labels:
        traefik.http.routers.funkwhale-insecure.entrypoints: web
        traefik.http.routers.funkwhale.entrypoints: websecure
        traefik.http.routers.funkwhale-insecure.rule: Host(`$SUB.$FQDN.$TLD`)
        traefik.http.services.funkwhale.loadbalancer.server.port: '80'
        traefik.http.routers.funkwhale-insecure.middlewares: funkwhale-https@docker
        traefik.http.routers.funkwhale.tls.certresolver: $RESOLVER
        traefik.http.routers.funkwhale.tls: 'true'
        traefik.http.routers.funkwhale.rule: Host(`$SUB.$FQDN.$TLD`)
        traefik.http.middlewares.funkwhale-https.redirectscheme.scheme: https
        traefik.enable: 'true'
        traefik.http.middlewares.funkwhale.headers.stsSeconds: '15552000'
        traefik.http.middlewares.funkwhale.headers.framedeny: 'true'
        traefik.http.middlewares.funkwhale.headers.stsIncludeSubdomains: 'true'
        traefik.http.middlewares.funkwhale.headers.customFrameOptionsValue: SAMEORIGIN
        traefik.http.middlewares.funkwhale.headers.stsPreload: 'true'
        traefik.http.middlewares.funkwhale.headers.sslredirect: 'true'