大家好!之前咱们在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
保存退出后输入命令
接着进行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使用经验,咱们下期再见!