• 轻量级简约仪表板Dasherr


    什么 Dasherr ?

    这是老苏在逛 reddit 时偶然发现的,作者刚发布,这是一款全新的轻量级仪表板。

    官方目前没有提供 docker,但本身的安装方法并不复杂,只要将代码下载后,将 www 目录中的文件放入到 Web 服务器中发布目录就可以,像群晖也可用放到 Web Station

    虽然简单,不过老苏相信绝大部分人应该和老苏一样懒,最好是能一键搞定的那种 😂

    构建镜像

    如果你不想自己构建,可以跳过,直接阅读下一章节

    Dockerfile 很简单,就是在 nginx 中把源代码放进去了

    FROM nginx:1.12-alpine
    
    WORKDIR /app
    COPY . ./
    
    EXPOSE 80
    CMD ["sh", "run.sh"]
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    run.sh 做的事情是把源代码复制到了我们新建的用来映射的目录,这主要是为了方便对 settings.json 进行修改

    老苏只是简单的做了判断,避免重启或者升级时直接覆盖掉了 settings.json,记得备份才是根本;

    #!/bin/bash
    
    if [ ! -f "/usr/share/nginx/html/settings.json" ];then
    	echo "文件不存在"
    	cp -r ./www/. /usr/share/nginx/html
     else
    	echo "文件存在"
    fi
    
    nginx -g "daemon off;"
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    构建镜像和容器运行的基本命令如下👇

    # 下载代码
    git clone https://github.com/erohtar/Dasherr.git
      
    # 或者加个代理  
    git clone https://ghproxy.com/github.com/erohtar/Dasherr.git
      
    # 进入目录  
    cd Dasherr
    
    # 将 Dockerfile 放入当前目录
      
    # 构建镜像
    docker build -t wbsu2003/dasherr:v1 .
    
    # 运行容器
    docker run -d \
       --name dasherr \
       -p 18080:80 \
       -v $(pwd)/www:/usr/share/nginx/html \
       wbsu2003/dasherr:v1
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    安装

    在群晖上以 Docker 方式安装。

    在注册表中搜索 dasherr ,选择第一个 wbsu2003/dasherr,版本选择 latest

    docker 文件夹中,创建一个新文件夹 dasherr,并在其中建一个子文件夹 www

    文件夹装载路径说明
    docker/dasherr/www/usr/share/nginx/html存放设置和网页文件

    端口

    本地端口不冲突就行,不确定的话可以用命令查一下

    # 查看端口占用
    netstat -tunlp | grep 端口号
    
    • 1
    • 2
    本地端口容器端口
    1808080

    命令行安装

    如果你熟悉命令行,可能用 docker cli 更快捷

    # 新建文件夹 dasherr 和 子目录
    mkdir -p /volume2/docker/dasherr/www
    
    # 进入 dasherr 目录
    cd /volume2/docker/dasherr
    
    # 运行容器
    docker run -d \
       --name dasherr \
       -p 18080:80 \
       -v $(pwd)/www:/usr/share/nginx/html \
       wbsu2003/dasherr:latest
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

    version: '3'
    
    services:
      dasherr:
        image: wbsu2003/dasherr
        container_name: dasherr
        restart: unless-stopped
        ports:
          - 18080:80
        volumes:
          - ./www:/usr/share/nginx/html
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    然后执行下面的命令

    # 新建文件夹 dasherr 和 子目录
    mkdir -p /volume2/docker/dasherr/www
    
    # 进入 dasherr 目录
    cd /volume2/docker/dasherr
    
    # 将 docker-compose.yml 放入当前目录
    
    # 一键启动
    docker-compose up -d
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    运行

    在浏览器中输入 http://群晖IP:18080 就能看到主界面

    这是默认的 settings.json 的效果

    所以需要对 settings.json 进行配置

    配置

    page

    • title: 仪表板的标题,支持中文,但必须使用 UTF-8 编码格式;
    • theme: 来自 settings.json 文件中主题部分的当前主题名称,默认提供了 15 个主题可供选择;
    • openTab: 当您单击服务磁贴时,此设置决定它是在新选项卡还是同一选项卡中打开(可能的值newsame

    示例代码:

    	"page": {
    		"title": "老苏的仪表板",
    		"theme": "Onedark",
    		"openTab": "new"
    	},
    
    • 1
    • 2
    • 3
    • 4
    • 5

    保存后不需要重启容器,直接刷新页面就可以

    widgets

    目前只有一个,而且需要安装 Glances, 老苏以前写过 Glances

    文章传送门:Glances实时监视群晖运行状况

    不想看也可以执行下面的命令,一键安装

    # 一键启动
    docker run -d \
       --restart="always" \
       --name="glances" \
       -p 61208-61209:61208-61209 \
       -e GLANCES_OPT="-w" \
       -v /var/run/docker.sock:/var/run/docker.sock:ro \
       --pid host \
       nicolargo/glances
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • url: 以斜线结尾的服务 URL
    • refreshMs: 更新前等待多少毫秒(默认为 5000 毫秒或 5 秒)

    示例代码:

    "widgets": {
    	"glances": {
    		"url": "http://192.168.0.197:61208/",
    		"refreshMs": 5000
    	}
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    保存后刷新页面,已经有相关信息了

    sections

    这部分是分类

    • name:该分类的名称
    • tiles: 见下文
    • disable: (可选)如果设置为1,则不会显示此部分;

    tiles

    示例代码:

    	"sections": [
    		{
    			"name": "示例",
    			"tiles": [
    				{
    					"name": "群晖主页",
    					"url": "http://192.168.0.197:5000/",
    					"faIcon": "fa-solid fa-house"
    				},
    				{
    					"name": "Glances",
    					"url": "http://192.168.0.197:61208/",
    					"faIcon": "fa fa-microchip"
    				}
    			]
    		},
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    保存后刷新

    themes

    • background:本地或网络壁纸背景
    • colorBg: 页面的背景颜色(仅在background未设置时使用)
    • colorPr: 页面的主要文本颜色
    • colorSc: 页面的辅助文本颜色
    • colorOn启用服务的“点”的颜色
    • colorOf: 服务禁用“点”的颜色

    示例代码:

    		"Onedark": {
    			"background": "https://images2.alphacoders.com/540/540010.jpg",
    			"colorBg": "#282c34",
    			"colorPr": "#dfd9d6",
    			"colorSc": "#98c379",
    			"colorOn": "#98c379",
    			"colorOf": "#808080"
    		},
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    看来要让图片和主题颜色搭配还不是一件容易的事情

    在这里插入图片描述

    升级和备份

    因为采用了单文件设置,所以 settings.json 文件的备份很重要,不管是否升级,记得备份

    因为项目还在初期,所以大概率会经常升级,但老苏又太懒,所以如果想体验新版本,可以通过采用官方的方式,下载源代码,并将www目录放入 dasherr 目录,然后刷新网页就行了

    参考文档

    erohtar/Dasherr: A minimal and lightweight dashboard for your self-hosted services (and bookmarks)
    地址:https://github.com/erohtar/Dasherr

    Dasherr - A new minimalistic and lightweight dashboard for your self-hosted services (FOSS) : selfhosted
    地址:https://www.reddit.com/r/selfhosted/comments/ym0x0l/dasherr_a_new_minimalistic_and_lightweight/

  • 相关阅读:
    FPGA-HDMI-彩条显示实验(ZYBO Z7)
    2022家用投影仪首选!当贝F5强悍音画效果带来极致视听体验
    致敬逆行者网页设计作品 大学生抗疫感动专题网页设计作业模板 疫情感动人物静态HTML网页模板下载
    Electron 进程间通信的四种方式
    新势力 | 赛宁工控安全产品体系——护航工业网络安全
    Spring整合Mybatis案例(XML格式)
    超大规模系统下,MySQL到Redis的数据同步也不难吧?
    接口测试这件小事
    YOLOv5改进算法之添加CA注意力机制模块
    vivo鄢楠:基于OceanBase 的降本增效实践
  • 原文地址:https://blog.csdn.net/wbsu2004/article/details/127725410