群晖性能监控系统简介与部署

制作理由

因为群晖每天都有用到，主要使用文件同步、备份、下载（迅雷、DownloStation）、VideoStation等，所以并不是有的人说的那样放在角落被遗忘，每天都会用到的东西自然免不了每天都去看看，去听听硬盘咕咕咕的声音，顺便还看下其他设备的情况；东西也是摆在比较显眼的位置。所以自然就有了制作一个群晖监控屏的想法，功能虽然少但是可能是无限的，而且个人比较喜欢这种酷黑风格，看上去比较有科技感。既然我会花时间做这么个东西出来那说明至少我是有需求的，不是所有的东西都一概而论的。

群晖

写作目的

今天我除了教大家部署这套系统以外，还会给大家分享扩展的方法，同时希望有兴趣的小伙伴能继续研究，懂设计的小伙伴能美化美化。

系统简介：

这套系统主要是利用了群晖的web api接口进行获取群晖系统信息，是建立在群晖系统提供的接口上的，不会破坏原有系统，也不用对群晖做任何的改造，大概试了下7.0系统和6.2系统都支持，开发文档可以在群晖官网找到，群晖的基础组件基本上都有， 理论上你可以根据以下文档完全为自己定制一套群晖页面或者app，更或者是微信小程序，所以理论上可能是无限的。不过需要注意的是官方文档有相当多的坑，因为文档只有英文版，而且文档相当老旧了好多接口在7.0系统上甚至是6.2系统上都无效，有的接口可能需要自己去群晖管理端网页上找了。

https://kb.synology.cn/zh-cn/search?sources[]=developer_guide

使用的接口和技术：

接口：

1. /api/webapi/query.cgi?api=SYNO.API.Info&version=1&method=query&query=all 获取所有的webapi接口

2. /api/webapi/auth.cgi?api=SYNO.API.Auth&version=3&method=login 登陆

3. /api/webapi/entry.cgi?api=SYNO.Core.System.Utilization&method=get&version=1 获取系统信息

4. /api/webman/modules/SystemInfoApp/SystemInfo.cgi?query=storage 获取磁盘信息

技术：

1. Vue2

2. ElementUi

3. DataV

4. EChars

因为页面比较简单，功能也比较少，所以就直接写在了一张页面上，因为不是专业的所以写得也比较丑，本次就不放源码了；

系统部署：

因为是纯网页，所以部署方式很多，本次主要讲如何在群晖上进行部署，本次需要用到Docker和Docker版Nginx，群晖其实是自带Nginx的，理论上使用群晖的WebStation也可以部署的，但是因为可能涉及到跨域的问题，需要进行反向代理而群晖的反向代理功能比较弱（也可能是我没仔细研究 ）所以在不对系统造成任何破坏的前提下使用Docker再安装一个Nginx就好了，有兴趣折腾的朋友也可以直接SSH修改群晖Nginx的配置文件，不过目前我对NAS就两个需求，一个是稳，另一个是简，折腾了好几年群晖，上过各种车，也倒腾过各种影音套件，刮削器啥的，最终我还是投入了白群的怀抱，目前使用VideoStation感觉真香，使用各种群晖套件也是真香，所谓的大道至简大概就是这个意思。

准备工作：下载网页文件

上Gitee搜索SynologyDataV_dist项目,下载文件;

Gitee

下载

步骤一：安装Docker

直接套件中心安装Docker，相信折腾群晖的没几个不用Docker的，如果你已经安装则跳过该步骤；

步骤二：安装Nginx

1. Docker注册表中搜索Nginx，第一个0颗星的就是了，至于为啥变成0颗星了估计是和目前局势有关，右键选择下载该映像；

Nginx

2. 在映像中选择刚下载好的Nginx镜像点击启动进行配置，点击高级选项，进行设置；

高级选项

3. 配置存储空间映射，主要是把配置文件和网站文件夹映射出来，也就是我标出来的配置好，其余两个是可选项；

映射存储空间

3. 配置端口，配置端口映射，注意这里不能使用80端口，因为80端口已经被群晖自带的Nginx用了，所以我用了一个8006的端口，映射到容器的也是8006端口，这两个端口其实都是随意配置的；本地端口用于访问，容器端口是配置文件里面配置的端口；

端口配置

4. 其他的均采用默认配置即可，将网站文件夹放入本地的网站文件夹下，就是第二步中映射的本地web文件夹；

网站路径

5. 创建配置文件，在第二步中映射的config文件夹下建立nginx.conf文件；

创建配置文件

6. 输入配置，其他的都是默认配置，这里我们监听8006端口（步骤3的容器端口）；按下面的进行配置即可，注意需要将带有“/api”前缀的接口地址代理为自己的群晖 地址+端口，简单说一下各参数的用途；listen：监听的端口，server_name：服务名，有域名的可以用于监听域名，没有的默认即可；location-root：本地的网站目录地址；location-index：首页名字主要配置index.html即可；location /api - proxy-pass：即代理配置为自己的群晖内网地址+端口即可，其实就是让自己的群晖访问自己；

配置文件

使用：

以上步骤完成后重启nginx即可通过群晖IP+8006（自己配置的端口）进行访问了，如果有防火墙需要开放该端口；

启动页面

点击右上角不明显的登陆二字并输入账号密码即可开始采集信息了；

登陆

信息采集

左上的面积图是CPU，内存，硬盘，网络等的一个综合展示；左中部分是硬盘情况展示，最多支持4块硬盘的位置，多了可能就超出去了；左下是上行、下行网络的情况；右上是时间和天气；右中是CPU和内存使用比例；右下为CPU，内存使用情况走势，中间的全都是装饰；后期可以更改为其他信息的展示；页面能适配大部分常规的分辨率，太奇葩的也没试，全屏观看的效果更好；

如何更改标题和展示图？

因为一开始是想自己用的所以这些东西都是固定的，但是只需要自己修改一下就好了；

修改标题：

找到网站文件下的/web/SynologyDataV/js/app.xxxxxxx.js并使用文本编辑器打开搜索220找到title:"DSM 220+"的部将引号内的文字改为自己想要的标题就好了，注意你的文件名中间的那串字符可能和我的不一样，前后一样就好了；

修改标题

修改展示图：

找到网站文件下的/web/SynologyDataV/img文件下将图片替换成自己的即可，注意不要改变文件名包括后缀；至于图片哪里来，给大家推荐直接去官网介绍页面另存下来即可，当然也可以换成自己的自拍照 ，方形透明底的效果最好；

修改展示图

修改以上东西不需要重启nginx，刷新页面就可以了；登陆这个页面的浏览器如果再登陆群晖可能导致这边掉线，大概是Cookie的原因，所以建议另外使用一个浏览器进行观看；

以上就是该网站的部署方式了，喜欢的朋友可以评论点赞加关注；有兴趣的朋友可以更深入的研究；

下期预告

由于本人比较喜欢看电影，没有囤货的习惯，也没有高清需求（MeiQian），也不混什么PT站BT站啥的，平时喜欢到一些小网站下电影，最好是压制好有字幕的，还带澳门新葡京广告的那种，一般看完不是特别喜欢的电影就直接删了。群晖VideoStation刮削器其实非常好用，目前我没遇到过搜索不到信息的电影、电视剧或者动漫，相信大家的海报墙目前应该都差不多吧，都是才出来的电影就下下来。

群晖海报墙

但是群晖的字幕组件非常不好用，反正我是懒得花时间去找字幕的，所以平时主要喜欢在《电影天堂》和一些山寨网站下载电影，知道的朋友都清楚，这些网站下载免费，速度也是岗岗的，就是多数时候一点就是广告，广告各种样式的，有时候随便一点就有渣渣辉出来叫你砍他的那种；

这样的

这样的

还有这样的

鉴于以上情况我也并不喜欢天天逛这些网站，所以我就做了个小东西帮我每天去这些网站上找资源就好了；

任务状态

下载情况

电影海报和简介

邮箱通知

功能大概就是自己设定时间去电影天堂网站获取电影信息，如果是近两天并且是没有记录的新电影那么就把电影的信息，地址，下载地址等信息采集下来保存起来，并通过邮件通知我；在电影列表中可以对电影进行管理，可以查看电影海报、简介等，也可以删除或者直接添加到DownloadStation中下载,并可在列表中查看下载情况；目前也是部署在群晖Docker中，测试了两天运行良好，就算自动任务失败了也可以手动获取，也不用进网站看广告的；

如果有喜欢的朋友记得留言点赞加关注，有需要的朋友可以留言如果人数多下期分享软件和部署方法；

作者声明本文存在利益相关性，请大家尊重作者及分享的内容，友善沟通，理性决策~