Traefik Error Page

Series: Drupal Docker

tl;dr: The default Traefik error page is not great, but it can be improved with these steps.

Tags: DevOps

Series Description: This series details my development environment and CI/CD deployment pipeline. The first post in the series provides an overview and the code for the entire demonstration can be found in my GitLab. You can navigate other posts in the series using the list of links in the sidebar.

The Problem

Traefik helps manage routing for having multiple services on the same Docker swarm. I've covered some use of using traefik in my local developer environment setup. By default, though, if one of the services is not currently available, you get a very basic "404 not found" page, white text on a black background. That's not very helpful as a way to capture when a service isn't working.

The Solution

Example code for this can be found in my Codeberg.

The Docker Compose

This will add another Docker service that exists solely to provide error pages. I went with one based on nginx. The most important part are the deploy labels, but here's a full docker-compose that adds that service:

version: '3.8'

services:
  404_page:
    image: nginx:alpine
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./404.html:/usr/share/nginx/html/404.html:ro
      - ./logo.jpg:/usr/share/nginx/html/logo.jpg:ro
    networks:
      - proxy
    deploy:
      labels:
        - "traefik.enable=true"
        - "traefik.http.routers.catchall.rule=HostRegexp(`{host:.+}`) && PathPrefix(`/`)"
        - "traefik.http.routers.catchall.priority=1"
        - "traefik.http.services.error-service.loadbalancer.server.port=80"
        - "traefik.http.routers.catchall.tls=true"
        - "traefik.http.routers.catchall.entrypoints=https"
networks:
  proxy:
    external: true

Some of this would need to be changed depending on the traefik setup to join it to, such as the name for the https entrypoint (above it is simply "https") and the network name (above it is "proxy"). Those need to match the rest of the projects in the same traefik setup.

The Nginx Configuration

This configures the nginx:

server {
    listen 80;
    server_name _;

    # Allow the logo to be served normally (HTTP 200)
    location = /logo.jpg {
        root /usr/share/nginx/html;
    }

    # Intercept everything else and force a 404 status
    location / {
        return 404;
    }

    error_page 404 /404.html;

    location = /404.html {
        root /usr/share/nginx/html;
        internal;
    }
}

This allows showing a logo through, but otherwise returns as 404 and shows a page at /404.html.

The HTML File

This is my error page, relatively simple with a logo and some centred text:

<html>

<head>
  <title>Service Not Found</title>
  <style>
    body {
      text-align: center;
    }
  </style>
</head>

<body>
  <h1>Service Not Found</h1>
  <img src="logo.jpg"
    alt="Alliteration Applications logo, a pair of a's.">
  <p>This service is currently not available. Please check back later.</p>
</body>

</html>

Drupal Module - Filter Bold Headings