一天一个开源项目（第218篇）：Homepage —— 给你所有自托管服务配一个优雅的统一面板

没有面板的自托管生活：
  Jellyfin   → http://192.168.1.100:8096
  Nextcloud  → http://192.168.1.100:8080
  Sonarr     → http://192.168.1.100:8989
  Portainer  → http://192.168.1.100:9000
  Grafana    → http://192.168.1.100:3000
  ……（还有十几个）
 
问题：
  - IP + 端口全靠记忆或书签
  - 服务挂了不知道，等到用时才发现
  - 媒体库新增了什么、下载队列有多少——要进去才能看
 
有了 Homepage：
  一个页面 → 所有服务入口
  服务卡片 → 实时显示状态（在线/离线/响应时间）
  Widget   → 直接展示关键指标（剧集数、正在播放、磁盘使用率……）

services:
  homepage:
    image: ghcr.io/gethomepage/homepage:latest
    container_name: homepage
    ports:
      - 3000:3000
    volumes:
      - ./config:/app/config          # YAML 配置目录
      - /var/run/docker.sock:/var/run/docker.sock:ro  # Docker 自动发现（可选）
    environment:
      HOMEPAGE_ALLOWED_HOSTS: your-domain.dev  # 或局域网 IP
    restart: unless-stopped

# 在其他容器的 docker-compose 中添加 labels
services:
  sonarr:
    image: linuxserver/sonarr
    labels:
      homepage.group: Media
      homepage.name: Sonarr
      homepage.icon: sonarr.png
      homepage.href: http://sonarr:8989/
      homepage.description: Series management
      homepage.widget.type: sonarr
      homepage.widget.url: http://sonarr:8989
      homepage.widget.key: your-api-key

# services.yaml 中用占位符
widget:
  type: sonarr
  url: http://sonarr:8989
  key: {{HOMEPAGE_VAR_SONARR_KEY}}   # 占位符
 
# docker-compose.yml 中注入真实值
environment:
  HOMEPAGE_VAR_SONARR_KEY: your-actual-api-key

- 媒体:
    - Jellyfin:
        icon: jellyfin.png
        href: http://jellyfin:8096/
        description: 媒体服务器
        siteMonitor: http://jellyfin:8096/
        widget:
          type: jellyfin
          url: http://jellyfin:8096
          key: {{HOMEPAGE_VAR_JELLYFIN_KEY}}
          fields: ["movies", "series", "episodes"]
 
    - Sonarr:
        icon: sonarr.png
        href: http://sonarr:8989/
        description: 剧集管理
        widget:
          type: sonarr
          url: http://sonarr:8989
          key: {{HOMEPAGE_VAR_SONARR_KEY}}
          fields: ["wanted", "queued", "series"]
 
- 网络:
    - AdGuard Home:
        icon: adguard-home.png
        href: http://adguard:80/
        widget:
          type: adguard
          url: http://adguard:80
          username: admin
          password: {{HOMEPAGE_VAR_ADGUARD_PASS}}
          fields: ["queries", "blocked", "filtered"]

大多数 Dashboard 工具的渲染方式：
  浏览器请求页面 → 服务端每次动态渲染 → 返回 HTML
  ↑ 每次加载都有延迟
 
Homepage 的方式：
  构建时静态生成 HTML/CSS/JS → 直接返回静态文件
  Widget 数据 → 单独的 API 路由实时拉取
  ↑ 页面骨架秒开，Widget 数据异步填充

# 方案一：只读挂载（Homepage 只需读权限）
volumes:
  - /var/run/docker.sock:/var/run/docker.sock:ro
 
# 方案二：使用 Docker Socket Proxy（推荐）
# 在 Homepage 和 Docker socket 之间加一个代理，只开放只读 API
services:
  socket-proxy:
    image: tecnativa/docker-socket-proxy
    environment:
      CONTAINERS: 1   # 只允许读容器信息
      POST: 0         # 禁止所有写操作
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
 
  homepage:
    environment:
      # 连接代理而非直接 socket
      HOMEPAGE_DOCKER_HOST: socket-proxy
      HOMEPAGE_DOCKER_PORT: 2375