自建私有仪表盘：Dashlet 部署与公网访问全教程

前言

本文围绕轻量级自托管仪表盘 Dashlet 展开，介绍其轻量高效、可深度自定义的特性，以及在极空间设备上的部署流程。

通过 Docker 或 Docker Compose 可快速安装 Dashlet，它能汇聚各类服务链接与系统指标，实现本地私有化管理；搭配 cpolar 内网穿透，还能将这个私有仪表盘映射到公网，无需公网 IP 即可随时随地访问，既保障数据隐私，又能灵活掌控各类服务状态。

轻装上阵，掌控全局------从Dashlet开始。

1.Dashlet优势是什么？

轻量高效 ：基于原生 JavaScript 与 SCSS 构建，无重型框架依赖，确保极速加载与流畅运行。
玻璃磨砂美学 ：采用现代化视觉设计，搭配细腻的动态过渡与交互动画，带来沉浸式用户体验。
配置驱动架构 ：所有服务与设置均通过 public/config.json 文件集中管理，无需修改代码即可灵活调整。
多主题支持 ：内置系统自动、深色、浅色三种模式，并支持完全自定义配色方案；用户还可通过 URL 设置个性化背景壁纸。
智能排序机制 ：支持按名称、URL、描述自动排序，也允许手动拖拽自定义顺序，灵活组织你的服务列表。
直观拖放交互 ：通过简单的拖放操作，即可实时调整服务图标位置，所见即所得。
清爽布局设计 ：固定式控制面板与响应式网格布局相结合，界面整洁有序，信息一目了然。
深度自定义能力：支持上传自定义 CSS 与 JavaScript 文件，满足高级用户的个性化与功能扩展需求。

2.前提条件

2.1ssh远程连接到极空间

开启【SSH 服务】
使用终端（Windows PowerShell / Mac Terminal）登录：

shell 复制代码

ssh root@IP

没有ssh的小伙伴可以到cpolar官网参考这篇文章：极空间别再吃灰了！开启SSH，秒变全能服务器！

连接成功：

2.2验证docker是否开启

使用命令：

shell 复制代码

docker -v 
systemctl status -v

没有docker的小伙伴可以到cpolar官网参考这篇文章：极空间开箱实录：从拆箱到远程访问保姆级教程，30分钟上手！

3.安装Portainer

新建文件夹dashlet目录并进入:

shell 复制代码

 mkdir Dashlet

docker命令安装：

shell 复制代码

docker run -d \
  --name dashlet \
  --restart unless-stopped \
  -p 8989:8989 \
  -v $(pwd)/data:/app/public \
  ghcr.io/jaberio/dashlet:latest

也可以使用Docker Compose（本文使用）:

shell 复制代码

services:
  dashlet:
    image: ghcr.io/jaberio/dashlet:latest
    container_name: dashlet
    restart: unless-stopped
    ports:
      - "8989:8989"
    volumes:
      - ./data:/app/public

在浏览器中输入 http://极空间IP:8989 就能看到登录界面：

点击设置，点击导入按键：

点击打开文件，就可以看到如下啦：

编辑后，点击导入配置文件：

编辑内容（自定义，仅参考）：

shell 复制代码

{
  "settings": {
    "theme": "system",
    "appTitle": "Dashlet",
    "greeting": "Welcome",
    "accentColor": "#3b82f6",
    "blur": true,
    "animations": true,
    "openNewTab": true,
    "layout": "list",
    "wallpaper": "",
    "searchProvider": "https://duckduckgo.com/?q=",
    "customCSS": "",
    "disableDragDrop": false,
    "dragDelay": 0,
    "searchEnabled": true,
    "footerText": "Powered by",
    "footerColor": "",
    "sortBy": "manual"
    },
"services": [
  {
    "id": "1",
    "name": "GitHub",
    "description": "Code hosting",
    "url": "https://github.com",
    "icon": "https://github.githubassets.com/favicons/favicon.png"
  },
  {
    "id": "2",
    "name": "YouTube",
    "description": "Watch videos",
    "url": "https://youtube.com",
    "icon": "https://www.youtube.com/s/desktop/10c3d9b4/img/favicon_144x144.png"
  },
  {
    "id": "3",
    "name": "Google",
    "description": "Search engine",
    "url": "https://www.google.com",
    "icon": "https://www.google.com/favicon.ico"
  },
  {
    "id": "4",
    "name": "Gmail",
    "description": "Email service",
    "url": "https://mail.google.com",
    "icon": "https://ssl.gstatic.com/ui/v1/icons/mail/rfr/gmail.ico"
  },
  {
    "id": "5",
    "name": "Notion",
    "description": "All-in-one workspace",
    "url": "https://notion.so",
    "icon": "https://www.notion.so/images/favicon.ico"
  },
  {
    "id": "6",
    "name": "Reddit",
    "description": "Social news & discussion",
    "url": "https://reddit.com",
    "icon": "https://www.redditstatic.com/desktop2x/img/favicon/favicon-32x32.png"
  },
  {
    "id": "7",
    "name": "Twitter / X",
    "description": "Social media",
    "url": "https://twitter.com",
    "icon": "https://abs.twimg.com/favicons/twitter.3.ico"
  },
  {
    "id": "8",
    "name": "Stack Overflow",
    "description": "Developer Q&A",
    "url": "https://stackoverflow.com",
    "icon": "https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico"
  },
  {
    "id": "9",
    "name": "Wikipedia",
    "description": "Free encyclopedia",
    "url": "https://en.wikipedia.org",
    "icon": "https://en.wikipedia.org/static/favicon/wikipedia.ico"
  },
  {
    "id": "10",
    "name": "Netflix",
    "description": "Streaming movies & shows",
    "url": "https://netflix.com",
    "icon": "https://assets.nflxext.com/us/ffe/siteui/common/icons/nficon2016.ico"
  },
  {
    "id": "11",
    "name": "Spotify",
    "description": "Music streaming",
    "url": "https://open.spotify.com",
    "icon": "https://open.scdn.co/cdn/images/favicon32.c6a9e59d8375a83e22c7b79e9b7a3e3d.png"
  },
  {
    "id": "12",
    "name": "Weather",
    "description": "Check local forecast",
    "url": "https://weather.com",
    "icon": "https://weather.com/favicon.ico"
  }
]
}

导入了12个网址：

这样，我们就可以整理我们想立刻点击的网址啦！

通过结合cpolar内网穿透服务，Dashlet不仅能在本地网络中使用，还可安全地从外网访问。只需一条命令，即可将你的私有仪表盘暴露到公网，随时随地掌控你的服务状态------无需公网IP，也无需复杂配置。

4.安装cpolar

cpolar 可以将你本地电脑中的服务（如 SSH、Web、数据库）映射到公网。即使你在家里或外出时，也可以通过公网地址连接回本地运行的开发环境。

❤️以下是安装cpolar步骤：

使用一键脚本安装命令：

shell 复制代码

sudo curl https://get.cpolar.sh | sh

安装完成后，执行下方命令查看cpolar服务状态：（如图所示即为正常启动）

shell 复制代码

sudo systemctl status cpolar

Cpolar安装和成功启动服务后，在浏览器上输入虚拟机主机IP加9200端口即:【http://ip:9200】访问Cpolar管理界面，使用Cpolar官网注册的账号登录,登录后即可看到cpolar web 配置界面,接下来在web 界面配置即可：

打开浏览器访问本地9200端口，使用cpolar账户密码登录即可,登录后即可对隧道进行管理。

5.配置公网地址

登录cpolar web UI管理界面后,点击左侧仪表盘的隧道管理------创建隧道：

隧道名称：可自定义，本例使用了:dashlet，注意不要与已有的隧道名称重复
协议：http
本地地址：8989
域名类型：随机域名
地区：选择China Top

创建成功后，打开左侧在线隧道列表,可以看到刚刚通过创建隧道生成了公网地址，接下来就可以在其他电脑或者移动端设备（异地）上，使用地址访问。

访问成功。

6.保留固定公网地址

使用cpolar为其配置二级子域名，该地址为固定地址，不会随机变化。

点击左侧的预留，选择保留二级子域名，地区选择china Top，然后设置一个二级子域名名称，我使用的是dashlet，大家可以自定义。填写备注信息，点击保留。

登录cpolar web UI管理界面，点击左侧仪表盘的隧道管理------隧道列表，找到所要配置的隧道，点击右侧的编辑。

修改隧道信息，将保留成功的二级子域名配置到隧道中

域名类型：选择二级子域名
Sub Domain：填写保留成功的二级子域名
地区: China Top

点击更新

更新完成后，打开在线隧道列表，此时可以看到随机的公网地址已经发生变化，地址名称也变成了保留和固定的二级子域名名称。

最后，我们使用固定的公网地址在任意设备的浏览器中访问，可以看到成功访问的页面，这样一个永久不会变化的二级子域名公网网址即设置好了。

总结

总的来说，Dashlet 以轻量化、高自定义的特性，为用户打造了专属的私有化数字仪表盘，从本地部署到公网访问的全流程操作简单易上手。无论是本地整理常用服务链接，还是通过 cpolar 实现异地访问，都能满足不同场景下的使用需求。无需依赖第三方云服务，数据全程自主掌控，让普通用户也能轻松搭建起高效、私密的数字管理视窗，真正实现小工具发挥大作用。