Add way to serve custom error pages via traefik middleware

[niklasgrewe]

On my debian server i am using exoframe and traefik. I have services that i deployed with exoframe and there are some apps like directus or gitlab that i added manually. So far so good. Everything works fine. But if a service is not available, only the following text is displayed in the browser:

404 page not found

of course it doesn't look that professional... so I would like to display my own error pages, if

1. the service is not available or
2. when the server is unavailable for e.g. maintaince to install updates which requires reboot etc.

I read in the traefik documentation that you need an own service for the error pages. So I found this example:

version: '3'

networks:
  proxy:
    external: true

services:
  reverse-proxy:
    # The official v2.0 Traefik docker image
    image: traefik:v2.0
    # Enables the web UI and tells Traefik to listen to docker
    networks:
      - proxy
    ports:
      # The HTTP port
      - 80:80
      - 443:433
      # The Web UI localhost:8080 (enabled by --api.insecure=true)
      - 8080:8080
    volumes:
      # So that Traefik can listen to the Docker events
      - /var/run/docker.sock:/var/run/docker.sock
    command:
      - --log.level=DEBUG
      - --api.insecure=true
      - --providers.docker=true
      - --providers.docker.exposedbydefault=false
      - --entrypoints.web.address=:80
    labels:
      - "traefik.enable=true"
      - "traefik.http.middlewares.secured.chain.middlewares=app-basic-auth,error-page"
      - "traefik.http.middlewares.app-basic-auth.basicauth.users=test:$$apr1$$8nyeo2br$$eaGzBj0gKvjNiu7Ch7vl3." # test : test (use escape for generate 401 hope custome page)
      - "traefik.http.middlewares.error-page.errors.status=400-599"
      - "traefik.http.middlewares.error-page.errors.service=error-page@docker"
      - "traefik.http.middlewares.error-page.errors.query=/{status}.html"

  # Container used to serve custom error page to replace 502 Bad gateway error with a awesome page.
  # If you try localhost or unknown url, this container serve content in /htdocs but don't serve 404.html or others curtom page. I think have missed something.
  apache-error-page:
    image: httpd:alpine
    container_name: apache-error-page
    restart: unless-stopped
    security_opt:
      - no-new-privileges:true
    networks:
      - proxy
    volumes:
      # [!] create this folder with some html page for testing
      - ./errors:/usr/local/apache2/htdocs/ #contain my custom errors pages 401.html 404.html 502.html ...
    labels:
      - "traefik.enable=true"
      - "traefik.http.services.error-page.loadbalancer.server.port=80"

How can I apply the example shown above to my exoframe environment? Do i have to specify a separate service in each docker-compose file that displays the error pages, or can i define one globally? if so, how? Where do I have to specify which labels so that Traefik displays the error pages even if the desired service is not available?

What if the whole server is not available. Can I still display my own error pages even in this case? Can Traefik then address a backend server, which then displays the error pages? What do I have to configure here to make this work?

[yamalight]

There's currently no way to do that for all deployments (unless I'm missing something and traefik allows defining "default" middlewares).
The only way would be to all labels manually to each exoframe project config.
It does seem like a nice feature though 🤔

[niklasgrewe]

@yamalight ok it would be a cool feature i think, if you could set something in the exoframe config to set the labels automatically, when it is possible in any way. But for now... what do I have to do manually so that I can display my own error pages. Can you give me some instructions on this?

[yamalight]

Updated the ticket to reflect the feature!

For now you can just add your middleware labels to exoframe.json to define that error middleware and then use it in config, i.e.:

{
  // ... rest of your config
  "labels": {
    "traefik.http.middlewares.error-page.errors.status": "400-599",
    "traefik.http.middlewares.error-page.errors.service": "error-page@docker"
    "traefik.http.middlewares.error-page.errors.query": "{status}.html"
  },
  "middlewares": ["error-page@docker"],
}

I think that should be enough 🤔

[niklasgrewe]

@yamalight ok thank you i have understood that so far. 👍 Sorry for the question I am not quite familiar with docker and traefik yet, but do I have to create a own docker-compose file only for my error-page container or how can i define this container/service globally in docker or can i also use exoframe do deploy such a service?

[yamalight]

I'd simply create a new exoframe deployment for that apache with one additional label ("traefik.http.services.error-page.loadbalancer.server.port=80")