基于Docker部署门户主页

发表于 更新于 分类于 ， ， 本文字数： 7.5k 阅读时长 ≈ 8 分钟

基于 Docker 容器，部署多种门户主页，已测试的有：Dashy1，Flare2，Homepage3

展示

Dashy

Dashy展示

Flare

Flare展示

Homepage

Homepage展示

部署

Dashy

在NAS上部署Dashy个人导航页，实现内外网访问，别让NAS吃灰了！Docker部署Dashy导航页教程

1
2
3
4
5
6
7
8
9
10
11
# 定义服务端口号
PORT=8080
# 定义配置文件路径
CONFIG=/path/to/conf.yml

docker run -d \
    --restart always \
    --name dashy \
    -p $PORT:80 \
    -v $CONFIG:/app/public/conf.yml \
    lissy93/dashy:latest

Flare

用NAS打造专属个人导航页，一键直达应用后台！NAS安装Flare导航页！

自定义启动参数:

docker-flare/advanced-startup.md at main · soulteary/docker-flare

设置用户名密码:

docker-flare/application-account.md at main · soulteary/docker-flare

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 定义服务端口号
PORT=5005
# 定义配置文件夹路径
CONFIG=/path/to/conf/dir
# 定义管理用户名
FLARE_USER=your_name
# 定义管理密码
FLARE_PASS="your_password"

docker run -d \
    --restart always \
    --name flare \
    -p $PORT:5005 \
    -e FLARE_DISABLE_LOGIN=0 \
    -e FLARE_USER="$FLARE_USER" \
    -e FLARE_PASS="$FLARE_PASS" 
    -v $CONFIG:/app \
    soulteary/flare:latest

Homepage

首发！NAS上部署HomePage个人导航页！非常精美的界面、强大的功能！威联通、群晖、绿联NAS部署HomePage

本项目并未托管在DockerHub

1
2
3
4
5
6
7
8
9
10
11
12
# 定义服务端口号
PORT=3000
# 定义配置文件夹路径
CONFIG=/path/to/conf/dir

docker run -d \
  --restart always \
  --name homepage \
  -p $PORT:3000 \
  -v $CONFIG:/app/config \
  -v /var/run/docker.sock:/var/run/docker.sock:ro \
  ghcr.io/benphelps/homepage:latest

配置

Dashy

可以通过 WEB UI 修改几乎全部的功能，不需要直接接触 YAML 文件配置，更多插件等需求待后续完善。Widgets | Dashy

Flare

应用及书签可以通过 WEB UI 完成，不需要接触 YAML 配置文件，仅提供 config.yml 的说明。Config 也可以通过 WEB UI 编辑

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
# 标题
Title: 个人主页
# 页脚
Footer: "Footer of html"
# 在新窗口打开应用
OpenAppNewTab: true
# 在新窗口打开书签
OpenBookmarkNewTab: true
# 显示标题
ShowTitle: true
# 欢迎语，参见 flare/guide
Greetings: 早上好；中午好；下午好；晚上好
# 显示搜索组件
ShowSearchComponent: false
# 关闭搜索功能自动锁定焦点
DisabledSearchAutoFocus: false
# 显示日期时间
ShowDateTime: true
# 显示应用
ShowApps: true
# 显示书签
ShowBookmarks: true
# 隐藏设置按钮
HideSettingButton: true
# 隐藏帮助按钮
HideHelpButton: false
# 主题
Theme: lime
# 显示天气
ShowWeather: true
# 天气地址
Location: 北京市
# 启用加密链接
EnableEncryptedLink: false
# 图标模式
IconMode: DEFAULT
# 保留字母大小写
KeepLetterCase: false

Homepage

基础配置

Services

更新时间: 2023-01-09

参考文档:

  1. Services - Homepage

图标地址:

  1. walkxcode/dashboard-icons: ❤️ The best icons for your personal dashboard.
  2. Material Design Icons
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
- 组名称:
    - 服务名称:
        # 跳转链接
        href: https://cn.bing.com
        
        # 描述信息
        description: 必应搜素
        
        # 测速地址
        ping: https://cn.bing.com
        
        # 图标地址，使用 Dashboard-icon（带不带后缀都可以）
        icon: bing
        # 图标地址，使用 Material Design Icons（需以 mdi- 开始）
        # icon: mdi-microsoft-bing
        # 图标地址，使用网络地址（需以 http:// 或 https:// 开始）
        # icon: https://xxxxxx.com/a/b/c/d.png
        # 图标地址，使用本地文件（需挂载 /app/public/icons 目录，且以 /icons/ 开始，并指定文件，如 /icons/myicon.png）
        # icon: /icons/myicon.png
        
        # 指定 Docker 服务名称，服务需预先在 `docker.yaml` 中定义
        server: my_docker
        # 指定 Docker 容器名称
        container: waline
        
        # 指定关联插件
        widget:
          # 插件类型，可在 `widgets.yaml` 中定义自定义插件
          type: watchtower
          
          # 指定展示的内容
          fields:
            - containers_scanned
            - containers_updated
            - containers_failed
          # 指定访问 URL
          url: 'http://your_api_endpoint'
          # 指定认证信息
          key: your_api_key

Widget

更新时间: 2023-01-09

参考文档:

  1. Service Widgets - Homepage
  2. Information Widgets - Homepage

有帮助的文档:

  1. Intl.DateTimeFormat() constructor - JavaScript | MDN
  2. 系统运维|Glances：多功能 Linux 系统监控工具

Glances服务(记得修改可执行文件路径)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[Unit]
Description=Glances Server
ConditionFileIsExecutable=/root/anaconda3/bin/glances
After=syslog.target network.target

[Service]
StartLimitInterval=5
StartLimitBurst=10
ExecStart=/root/anaconda3/bin/glances -w
Restart=always
RestartSec=120

[Install]
WantedBy=multi-user.target

可能会提示Bottle module not found. Glances cannot start in web server mode.

需执行: pip install bottle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
- resources:
    # 标签名称
    label: 系统运行情况
    # 是否展示CPU
    cpu: true
    # 是否展示内存
    memory: true
    # 展示磁盘路径，可以通过 list 书写多个，但是群晖不支持~ 所以这里我就留根目录
    disk: /
# 天气插件，推荐使用，不需要 API 密钥
- openmeteo:
    # 标签名称
    label: 大兴区
    # 纬度
    latitude: 39.74
    # 经度
    longitude: 116.33
    # 时区
    timezone: Asia/Shanghai
    # 单位，摄氏度：`metric`，华氏度：`imperial`
    units: metric
    # 刷新时间，以分钟计算
    cache: 5
- search:
    # 搜索服务提供商，支持：google, duckduckgo, bing, baidu or custom
    provider: duckduckgo
    # 自定义搜索需要指定搜索 URL
    # url: https://lougle.com/?q=
    # 打开方式
    target: _blank
- logo:
    # LOGO 信息 URL 地址
    icon: 'https://a.b.com/c/d/e.png'
- greeting:
    # 欢迎语大小
    text_size: xl
    # 欢迎语文字
    text: Greeting Text
- datetime:
    # 时间展示大小
    text_size: xl
    # 本地化
    locale: zh-CN
    # 格式，见：Intl.DateTimeFormat()
    format:
      # 日期格式
      dateStyle: long
      # 时间格式
      timeStyle: medium
- glances:
    # 地址信息
    url: http://your_host_or_ip:61208
    # 可选，用户名
    # username: user
    # 可选，密码
    # password: pass
    # 可选，标签名称
    label: MyMachine

其他服务暂未用到，待后续补充

Bookmarks

更新时间: 2023-01-09

参考文档:

  1. Bookmarks - Homepage

图标地址:

  1. walkxcode/dashboard-icons: ❤️ The best icons for your personal dashboard.
  2. Material Design Icons
1
2
3
4
5
6
7
8
- 书签分组名称:
    - 书签名称:
          # 文字缩写，没有图标的情况下会展示文字
        - abbr: VT
            # 图标信息，同 Service 相同
            icon: vultr
            # 链接地址
          href: https://my.vultr.com/

Docker

更新时间: 2023-01-09

参考文档:

  1. Docker - Homepage
1
2
3
4
5
6
7
8
9
# 远程 Docker 服务地址
# my-docker:
#   host: 127.0.0.1
#   port: 2375

# 本地服务地址
local:
  # 需挂载本地 /var/run/docker.sock 到容器
  socket: /var/run/docker.sock

Settings

更新时间: 2023-01-09

参考文档:

  1. Settings - Homepage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 网页标题
title: 私人主页

# 背景图案，支持本地路径，详见文档
background: https://a.b.com/c/d/e.jpeg
# 背景图案透明度
backgroundOpacity: 0.2
# 头部样式
headerStyle: boxed
# 语言
language: zh-CN
# 服务提供商
providers:
  openweathermap: openweathermapapikey
  weatherapi: weatherapiapikey

配置较少，其他我都没有用上，待后续用上的时候补充，官网手册很详细

添加 WatchTower 支持

参考文档:

  1. Watchtower - Homepage

前置条件

  1. 设置 HTTP API Token Arguments - Watchtower
  2. 开启 HTTP API Metrics Arguments - Watchtower

综合 Docker 运行命令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 设置变量
PORT=8888
API_TOKEN="98f1ac242bf6d2f10af3a4cf0af74204"

# 启动容器
docker run -d \
    --restart always \
    -p $PORT:8080 \
    --name watchtower \
    -v /var/run/docker.sock:/var/run/docker.sock \
    -v /etc/localtime:/etc/localtime:ro \
    containrrr/watchtower \
    --cleanup \
    --http-api-metrics \
    --http-api-token $API_TOKEN

# 检查命令
# https://containrrr.dev/watchtower/http-api-mode/
curl -H "Authorization: Bearer $API_TOKEN" localhost:$PORT/v1/update

添加服务

有帮助的文档:

  1. Feature: Added support to watchtower statistics by FauFra · Pull Request #455 · benphelps/homepage
1
2
3
4
5
6
7
8
9
10
11
12
# 以下内容需填写到 `services.yaml` 中，并不是 `widgets.yaml`
- WatchTower:
    icon: watchtower
    href: 'http://your_host_or_ip:your_port/v1/metrics'
    widget:
      type: watchtower
      fields:
        - containers_scanned
        - containers_updated
        - containers_failed
      url: 'http://your_host_or_ip:your_port'
      key: your_api_token

效果

WatchTower信息显示

添加 Portainer 支持

参考文档:

  1. Portainer - Homepage

前置条件

  1. 使用 Portainer API Accessing the Portainer API - Portainer Documentation

添加服务

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 以下内容需填写到 `services.yaml` 中，并不是 `widgets.yaml`
- Portainer:
    href: https://your_host_or_ip:your_port
    description: Docker 容器管理页面
    ping: https://your_host_or_ip:your_port
    icon: portainer
    server: my_docker
    container: portainer
    widget:
        type: portainer
        url: https://your_host_or_ip:your_port
        # 这里需要访问指定的环境页面，提取位于 `#!/endpoints/XXX` 中的 XXX
        env: 2
        key: your_portainer_api_key

效果

Portainer信息显示

添加 Jellyfin 支持

参考文档:

  1. Jellyfin - Homepage

前置条件

  1. 添加 Jellyfin API，访问：web/index.html#!/apikeys.html

添加服务

1
2
3
4
5
6
7
8
9
10
11
12
# 以下内容需填写到 `services.yaml` 中，并不是 `widgets.yaml`
- Jellyfin:
    href: https://your_host_or_ip:your_port
    description: Jellyfin 媒体服务器
    ping: https://your_host_or_ip:your_port
    icon: jellyfin
    server: my_docker
    container: jellyfin
    widget:
        type: jellyfin
        url: https://your_host_or_ip:your_port
        key: your_jellyfin_api_key

效果

Jellyfin插件

我应该选择哪个？

我最终选择了 Homepage，因为相比之下，综合速度/美观程度/插件支持情况等，Homepage 都是最适合我的。对比见下表：

性能及基本功能

类型 资源占用 载入速度 搜索 多语言支持 天气信息 在线编辑 测速功能 插件支持 主题支持
Dashy ⭐⭐⭐ ⭐ ⭕ ⭕ ⭕ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐ ⭐⭐⭐
Flare ⭐ ⭐⭐ ⭕ ⭕ ⭕ ⭐⭐ ❌ ❌ ⭐
Homepage ⭐⭐ ⭐⭐⭐ ⭕ ⭕ ⭕ ❌ ⭐⭐ ⭐⭐ ⭐⭐

图标支持

类型 自定义图标 Material Design Icons Font Awesome Icons emoji Icons Dashboard Icons
Dashy ⭕ ⭕ ⭕ ⭕ ❌
Flare ⭕ ⭕ ❌ ❌ ❌
Homepage ⭕ ⭕ ❌ ❌ ⭕

附加功能

类型 认证功能 多视图功能 云备份 自定义
Dashy ⭐⭐⭐ ⭕ ⭕ ⭐⭐⭐
Flare ⭐ ❌ ❌ ❌
Homepage ❌ ❌ ❌ ⭐⭐

  1. Dashy | Dashy↩︎

  2. soulteary/docker-flare: Flare ✨ Lightweight, high performance and fast self-hosted navigation pages, resource utilization rate is <1% CPU, MEM <30 M, Docker Image < 10M↩︎

  3. Installation - Homepage↩︎