本内容来源于@什么值得买APP，观点仅代表作者本人 ｜作者：羊刀仙
大家好！之前咱们在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使用经验，咱们下期再见！
