如何在Docker Compose中自定义Traefik错误页面？

当然可以自定义Traefik的错误页面，通过Traefik的errorPages中间件就能实现，以下是适配你Docker环境的具体步骤：

1. 准备自定义错误页面 #

创建存放错误页面的目录（比如./error-pages），并编写对应的HTML文件，示例502.html：

<!DOCTYPE html>
<html>
<head>
    <title>服务维护中</title>
    <style>
        body { text-align: center; padding: 60px; font-family: system-ui, sans-serif; }
        h1 { font-size: 48px; color: #333; }
        p { font-size: 20px; color: #666; }
    </style>
</head>
<body>
    <h1>服务更新中</h1>
    <p>我们正在升级应用，预计几分钟后恢复访问，请稍后再试~</p>
</body>
</html>

同理创建404.html，替换对应提示内容即可。

2. 配置Traefik错误页面中间件 #

在你的docker-compose.yml中，给Traefik容器添加中间件标签配置：

services:
  traefik:
    image: traefik:v2.10
    # 其他原有配置...
    labels:
      # 定义错误页面中间件
      - "traefik.http.middlewares.custom-error-pages.errors.status=404,502"
      - "traefik.http.middlewares.custom-error-pages.errors.service=error-page-svc"
      - "traefik.http.middlewares.custom-error-pages.errors.query=/{status}.html"

3. 部署错误页面静态服务 #

添加一个简单的静态文件服务（用nginx alpine镜像即可），让Traefik能访问到自定义错误页面：

services:
  # 原有traefik、js-app服务...
  error-pages:
    image: nginx:alpine
    volumes:
      - ./error-pages:/usr/share/nginx/html
    labels:
      - "traefik.enable=true"
      - "traefik.http.services.error-page-svc.loadbalancer.server.port=80"
      # 仅作为Traefik内部服务，无需对外暴露
      - "traefik.http.routers.error-page-router.entrypoints=web"
      - "traefik.http.routers.error-page-router.rule=Host(`internal-error-page`)"

4. 为JS应用路由绑定中间件 #

在你的JS应用容器标签中，将自定义错误中间件绑定到对应路由：

services:
  js-app:
    # 原有配置...
    labels:
      # 其他路由配置...
      - "traefik.http.routers.js-app-router.middlewares=custom-error-pages@docker"

关键说明 #

• 确保错误页面文件名和中间件query参数匹配（比如502.html对应/{status}.html中的502）
• 该方案适用于Traefik v2及以上版本，v1版本配置逻辑不同需调整
• 错误页面服务不需要对外提供访问，只要和Traefik在同一Docker网络下即可被访问

内容的提问来源于stack exchange，提问作者huuyui