Docker 篇十九：无比炫酷，近乎全能的监控面板：Dashy保姆级搭建教程

大家好！之前咱们在NAS上搭建过个人link聚合、网站健康监控、网站流量监控等应用，最近又启动了一套完整的流媒体服务，就非常需要一个服务器的监控应用。

上周逛ga yhu b发现了Dashy，起初就觉得界面蛮惊艳，但仔细看过官方手册后发现它同样非常强大，自定义程度极高！请看效果图！

监控搭建平台：威联通 TS-464C2，N5095 四核四线程，8GB内存

本篇涉及SSH服务，教程基本通用，若要使用本篇完整功能（服务器监控），建议配置2核2GB起步～另外可自定义内容实在太多，强烈建议配合官方手册完整消化，若有疑问可评论区留言或私聊

项目特点

• 📃 支持多页面

• 🚦 每个应用程序/链接的实时状态监控

• 📊 使用小部件显示来自自托管服务的信息和动态内容（巨多插件，官方手册也十分详细）

• 🔎 按名称、域名或标签进行即时搜索 + 可自定义的热键和键盘快捷键

• 🎨 许多内置颜色主题，带有 UI 颜色编辑器并支持自定义 CSS（自身内置25个以上）

• 🧸 许多图标选项 - Font-Awesome、homelab 图标、自动获取 Favicon、图像、表情符号等。

• 💂 具有多用户访问、可配置权限和 SSO 支持的可选身份验证

• 🌎 多语言支持，包括 10 多种人工翻译的语言，以及更多即将推出的语言

• ☁ 提供可选的、加密的、免费的异地云备份和恢复功能

• 💼 工作区视图，可同时在多个应用程序之间轻松切换

• 🛩️ 最小视图，用作快速加载的浏览器起始页

• 🖱️ 选择应用程序启动方式：新选项卡、同一选项卡、剪贴板、弹出模式或在工作区视图中打开

• 📏 可定制的布局、大小、文本、组件可见性、排序顺序、行为等。

• 🖼️ 全屏背景图像、自定义导航栏链接、HTML 页脚、标题等选项。

• 🚀 使用 Docker、裸机或一键式云部署即可轻松设置

• ⚙️ 基于 YAML 的简单单文件配置，以及通过 UI 配置应用程序的选项

• ✨ 正在积极开发中，定期添加改进和新功能

• 🤏 小捆绑包大小、完全响应式 UI 和用于基本离线访问的 PWA

• 🆓 100% 免费和开源

• 🔐 高度重视隐私

• 🌈 以及更多......

部署流程

先于App Center添加软件源，URL：https://www.myqnap.org/repo.xml，添加完毕后搜索下图工具并下载

之后便控制台开启SSH服务并连接到NAS

登陆后依次输入以下命令

#进入我们的Docker目录下 cd /share/Container #创建dashy文件夹，并在其下创建icons和public两个目录 mkdir -p dashy/{icons,public} #打开docker-compose.yml文件进行编辑 vim docker-compose.yml

修改并粘贴以下代码，图标库点我查看，关于图标的官方说明点我查看

version: "3.8" services: dashy: container_name: Dashy image: lissy93/dashy:latest # image: lissy93/dashy:arm64v8，支持其他架构（ arm32v7、arm64v8等）和版本标签 ports: - 8484:80 # 冒号左侧改成未被占用端口 volumes: - /share/Container/dashy/public/conf.yml:/app/public/conf.yml # 配置挂载目录 - /share/Container/dashy/icons:/app/public/item-icons/icons # 本地图标库,可以图标补充或将所有图标文件保存在这里 restart: unless-stopped

英文状态下按[i]键，进入编辑模式；

编辑完毕后，按下[ESC]键；

英文状态下，同时按住[SHIFT]和[:]，输入[wq]并回车即可保存退出

继续输入命令

#进入public文件夹 cd public #打开conf.yml文件进行编辑 vim conf.yml

将以下内容修改并粘贴进去，以下是官方提供模版，加注释部分大多为我个人修改。更多详细内容请看手册

--- # 1、页面元信息编辑，标题、描述、页脚文本及导航连接，此板块支持创建后Web端再修改 pageInfo: title: Dashy # 仪表盘大标题，可自定 description: hello the world # 仪表盘描述，可自定 navLinks: # 导航栏，至多添加六例 - title: GitHub # 自己起个名 下同 path: https://github.com/Lissy93/dashy # 对应的域名/IP 下同 target: newtab # 点击导航是的打开方法，默认newtab - title: Documentation path: https://dashy.to/docs target: newtab # 按照上面的格式还可新增四例 footerText: hello # 页脚内容 logo: # 可为本地或远程图像，不想设置可删除此条 # 2、一些可选配置，后续基本可以再修改 appConfig: theme: colorful # 初始默认的主题名称 layout: auto # 主页布局，默认auto iconSize: medium language: cn # 默认 en auth: users: - user: admin # 改为用户名 hash: 564446139a71d6cea5ba24d2d625832263b4092b8b6517134a4f08e9026bae71 # SHA256 哈希加密，去生成一个 type: admin # 管理员权限 - user: YDXian # 配置完后就用这个账户访问 hash: 1f3314esdsd343423bd4295f461f6453dd0447a3bf248a75eb0ae734f3fg22fg type: normal # 普通用户 # 未经身份验证的用户有只读访问的仪表板 # 3、一些模块等，同样支持创建后再修改 sections: - name: Getting Started icon: fas fa-rocket items: - title: Dashy Live description: Development a project management links for Dashy icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png url: https://live.dashy.to/ target: newtab - title: GitHub description: Source Code, Issues and Pull Requests url: https://github.com/lissy93/dashy icon: favicon - title: Docs description: Configuring & Usage Documentation provider: Dashy.to icon: far fa-book url: https://dashy.to/docs - title: Showcase description: See how others are using Dashy url: https://github.com/Lissy93/dashy/blob/master/docs/showcase.md icon: far fa-grin-hearts - title: Config Guide description: See full list of configuration options url: https://github.com/Lissy93/dashy/blob/master/docs/configuring.md icon: fas fa-wrench - title: Support description: Get help with Dashy, raise a bug, or get in contact url: https://github.com/Lissy93/dashy/blob/master/.github/SUPPORT.md icon: far fa-hands-helping

编辑保存后退出

继续输入命令

#返回上级目录 cd .. #进入icons文件夹 cd icons #拉取库，下载图标文件；nas没有魔法的可以手动下载丢进去！ git clone https://github.com/walkxcode/dashboard-icons.git

上面应用图标已经基本够用，不够的话可以去 https://simpleicons.org 看看，个人比较喜欢下载到本地图库～

下载完毕后接着输入命令

#返回docker-compose.yml所在的dashy目录下 cd .. #启动和运行 docker compose up -d # 有的linux系统可能为 docker-compose

到这里安装完毕，根据上文，此时Web输入 NAS_IP:8484 即可进行访问

反向代理

参照之前的文章，十分简单，填写对应参数即可！

使用教程

Web输入 NAS_IP 或 域名 即可进行访问，密码不要输入哈希值，是我们转换成哈希值的那个密码

初始是啥也没有，点击右上角的笔样式图标进行编辑

暂存本地指的是保存在本地浏览器缓存，保存才是真正的更改配置；前面已经设置admin账户，这样就可防止他人随意更改

点击上图中【添加新的Section】,先把NAS监控整上去，如下图所示，其实只要填写两个内容保存即可。

图标库网址：https://fontawesome.com.cn；https://fontawesome.com

关于图标，也可从本地提取，换成真正的NAS外观图，路径咱们后面会一起说

如下图所示

继续添加NAS内部署的各种服务！ 点击上图的【Add New Item】，如下填写保存即可

图标路径填写看下图：

之前下了一大堆图标嘛！我们需要填写进去的路径为 icons/dashboard-icons/png/qbittorrent.png

效果图如下，emby胡乱塞了个网址，亮红说明不通

鼠标悬停，描述、域名、延迟信息都能显现出来

到这里其实也差不多，大伙可以按照这个套路进行编辑设计自己的仪表盘！

话说CPU、RAM这些信息还没有呢，咋添加呢？！咱们继续往下看～

监控面板安装

此处我们需要部署Glances，依次输入以下命令

#创建文件目录 mkdir -p /share/Container/glances #进入该目录下 cd /share/Container/glances #打开docker-compose.yml文件进行编辑 vim docker-compose.yml

复制粘贴以下内容，上面已经操作过一次，大家应该很熟悉

version: '3.8' services: glances: image: nicolargo/glances:latest container_name: glances restart: unless-stopped volumes: - /var/run/docker.sock:/var/run/docker.sock:ro ports: - "61208:61208" pid: "host" privileged: true environment: - GLANCES_OPT=-w - PUID=1000 - PGID=1000 - TZ=Asia/Shanghai

保存退出后输入命令

docker compose up -d

接着进行HTTPS反向代理，若想Dashy远程查看监控数据，这一步是必须的

成功通过域名访问

参考配置

这里放一下我的 conf.yml 配置（文章开头那张图），大家可自行调整。

后期可以用威联通自带的文本工具进行再编辑，保存后重启容器即可完成配置更新，很方便～

更多组件配置，请参阅https://github.com/Lissy93/dashy/blob/master/docs/widgets.md#current-memory-usage

更多版式配置，请参阅https://github.com/Lissy93/dashy/blob/master/docs/configuring.md

更多主题配置，请参阅https://github.com/Lissy93/dashy/blob/master/docs/theming.md

都介绍的非常详细～

pageInfo: title: 羊刀仙 description: 我爱说实话。 navLinks: - title: 哔哩哔哩 path: www.bilibili.com target: newtab - title: Github path: https://github.com/1945251yyq target: newtab - title: 羊刀仙的日常 path: boke.ddd.xyz target: newtab logo: # 自己指定位置 footerText: 笑话太烂，就是在浪费时间。 appConfig: theme: dashy-docs layout: auto iconSize: medium language: cn auth: users: - user: YDXian hash: 564446139a71d6cea5ba24d2d625832263b4092b8b6517134a4f08e9026bae71 type: admin - user: user hash: 221b37fcdb52d0f7c39bbd0be211db0e1c00ca5fbecd5788780463026c6b964b type: normal enableGuestAccess: true sections: - name: CPU 利用率 icon: fas fa-tachometer displayData: rows: 2 widgets: - type: gl-current-cpu options: hostname: https://glances.xxx.love # 有端口号的记得带上，并且不要填成https://glances.xxx.love/ - type: gl-current-cores options: hostname: https://glances.xxx.love - name: 内存使用率 icon: fas fa-memory widgets: - type: gl-current-mem options: hostname: https://glances.xxx.love - name: 温度 icon: fal fa-thermometer-half widgets: - type: gl-cpu-temp options: hostname: https://glances.xxx.love units: C - name: 网络接口 icon: fas fa-ethernet widgets: - type: gl-network-interfaces options: hostname: https://glances.xxx.love limit: 500 - name: TS-464C2 icon: far fa-server displayData: sortBy: default rows: 1 cols: 1 collapsed: false hideForGuests: false items: - title: qBittorrent description: 无情下载器 icon: icons/dashboard-icons/png/qbittorrent.png url: https://download.xxx.love:8888/ target: newtab statusCheck: true - title: EMBY description: 无情播放器 icon: icons/dashboard-icons/png/emby.png url: http://10.12.21.36:8096 target: newtab statusCheck: true - title: Vaultwarden description: 密码管理 icon: icons/dashboard-icons/png/vaultwarden-light.png url: https://download.xxx.love:8888/ target: newtab statusCheck: true - title: uptime-kuma description: 网页运行状态监控 icon: icons/dashboard-icons/png/uptime-kuma.png url: http://10.12.21.36:8096 target: newtab statusCheck: true - title: Microbin description: 便捷粘贴板 icon: icons/dashboard-icons/png/microbin.png url: https://download.xxx.love:8888/ target: newtab statusCheck: true - title: It-Tools description: 在线工具集合 icon: icons/dashboard-icons/png/it-tools-light.png url: http://10.12.21.36:8096 target: newtab statusCheck: true - name: CPU 使用记录 icon: fas fa-microchip displayData: cols: 2 widgets: - type: gl-cpu-history options: hostname: https://glances.xxx.love limit: 60 - name: 系统警示 icon: fas fa-sensor-alert widgets: - type: gl-alerts options: hostname: https://glances.xxx.love - name: 系统负载 icon: fas fa-tasks-alt widgets: - type: gl-system-load options: hostname: https://glances.xxx.love displayData: sortBy: default rows: 1 cols: 1 collapsed: true hideForGuests: false - name: 硬盘空间 icon: fas fa-hdd widgets: - type: gl-disk-space options: hostname: https://glances.xxx.love - name: 硬盘 IO icon: fas fa-disc-drive widgets: - type: gl-disk-io options: hostname: https://glances.xxx.love displayData: sortBy: default rows: 1 cols: 1 collapsed: true hideForGuests: false

最后

综合来说很不错！不过主题相关部分，给人的感觉是这个团队里可能没有设计师大佬有能力的朋友可以进去做做贡献，毕竟这么好的项目！

本篇教程到此，如果觉得不错，欢迎点赞，收藏，留言！能点点关注最好啦

后续我也会继续分享好用、好玩的Docker项目及NAS使用经验，咱们下期再见！