1.摘要
最近上手了由 Handsome 开发的全新数据可视化插件——数据看板。第一眼的感受就是“惊艳”，极简且富有现代感的设计语言，直接拉高了服务器监控的审美上限。相比同类插件，它的交互逻辑更贴合个人操作习惯，摒弃了繁琐的配置，真正做到了“即装即用”。
在功能表现上，它并非空有其表。无论是波动的流量曲线，还是多维度的用户活跃数据，都能通过精致的图表直观呈现。最难得的是，它在提供全局视野的同时，巧妙地隐藏了底层的复杂技术细节。如果你也追求数据展示的质感与效率，这款插件绝对是你的不二之选。
2.如何使用Umami
如果你打算试用数据看板插件，那你得先准备好Umami。它是一个开源的、轻量级的、隐私友好的数据分析平台，是Google Analytics的一个现代替代品。如果你像我一样，注重数据隐私和安全，Umami是一个非常不错的选择。
我选择用Docker Compose来安装Umami，因为这种方式简直是懒人福音，简单又快捷。不过，官方文档里没有提供Docker Compose的配置文件（docker-compose.yml），幸好，我在GitHub上的代码库中找到了。这里分享一下链接，大家可以直接参考：
3.配置文件改动：使用MySQL数据库
默认情况下，Umami使用的是PostgreSQL数据库，但我发现自己服务器上已经安装了MySQL，而我的网站本身也在使用MySQL数据库，所以我并不打算再去安装一个新的PostgreSQL。于是，我决定修改docker-compose.yml文件，删除PostgreSQL相关配置，直接连接到现有的MySQL数据库。修改后的配置文件如下：
services:
umami:
image: ghcr.io/umami-software/umami:mysql-latest
container_name: umami
network_mode: "host"
environment:
DATABASE_URL: mysql://username:password@127.0.0.1:3306/umami
DATABASE_TYPE: mysql
APP_SECRET: replace-me-with-a-random-string
init: true
restart: always
healthcheck:
test: ["CMD-SHELL", "curl http://localhost:3000/api/heartbeat"]
interval: 5s
timeout: 5s
retries: 5
需要注意的是，APP_SECRET这个字段非常重要，它是用来加密会话的。为了确保安全，建议你生成一个强密码。可以通过以下命令生成：
openssl rand -base64 32
4.Umami的安装与部署
首先，我们需要创建一个数据库，因为如果没有数据库，服务是无法启动的。我在MySQL中创建了一个新的数据库，命令如下：
create schema umami collate utf8mb4_general_ci;
接着，把修改后的docker-compose.yml文件上传到服务器，拉取镜像并启动容器。这个过程可能需要一些时间，耐心等待即可。执行以下命令启动：
待容器启动完成后，可以通过以下命令查看当前的镜像和容器：
你会看到Umami的容器已经成功启动，并且umami数据库中已经创建了多个表。值得一提的是，在你访问Umami之前，请确认3000端口是否已经可以正常访问，否则无法进行后续的配置。
5.如何访问Umami
在确保Umami容器启动成功后，你可以通过以下URL访问Umami：http://ip:3000
这里的ip是你服务器的IP地址。在首次访问时，系统会要求你登录。在登录成功后，你就可以开始配置了。具体的配置过程可以参考官方文档，操作非常直观。
6.域名访问与SSL配置
为了让访问更加优雅，我们自然不希望每次都通过IP地址访问Umami。将其绑定到域名后，通过HTTPS访问显得更加专业且安全。这里，我给大家分享一下我在Nginx上的配置：
# 将HTTP请求重定向到HTTPS
server {
listen 80;
server_name umami.xxx;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
server_name umami.xxx;
ssl_certificate cert/umami.tch.cool/umami.xxx.pem;
ssl_certificate_key cert/umami.tch.cool/umami.xxx.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384;
ssl_prefer_server_ciphers off;
client_max_body_size 1m;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;
add_header X-Frame-Options "SAMEORIGIN" always;
location / {
proxy_pass http://umami;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
upstream umami {
server 127.0.0.1:3000;
}
通过这种方式，我们可以将域名绑定到Umami，使得访问变得更加方便，也能通过HTTPS确保数据传输的安全性。
7.配置Umami
在成功登录到Umami后台后，第一步就是修改密码，确保账号安全。然后，按照系统的提示添加你需要统计的网站。配置过程相当简单，只需要将以下这段<script>代码插入到你网站的<head>部分，就能开始收集数据了：
<script async defer src="https://umami.xxx/umami.js"></script>
8.安装数据看板插件
现在，我们终于可以开始使用数据看板插件了。首先，按照插件的文档进行安装和配置：
https://docs.lik.cc/docs/plugins/data-statistics/usage
安装完成后，你可以创建一个新的页面，用于展示各种统计数据。插件提供了多个组件供你选择，比如：
网站统计图表
标签统计
分类统计
文章趋势
评论排行
热门文章
根据需要，你可以自由组合这些组件，选择你最关心的数据展示。在我的页面中，我选择了展示【网站统计图表】和【流量统计】模块
同时也加了【近30分钟网站活动】模块。配置完毕后，点击保存，即可在网站上看到直观的流量和活动数据。
9.总结
通过Umami和数据看板插件，我能够快速且高效地掌握网站的各项数据，改进运营策略。尤其是在对比传统的Google Analytics时，Umami的隐私保护以及清爽的界面设计，确实给了我一个全新的体验。
如果你也在寻找一款既轻量又安全的数据分析工具，不妨试试Umami。而如果你希望进一步提升网站的数据展示效果，数据看板插件无疑是一个很好的选择。希望这篇文章能帮助你快速搭建属于自己的数据监控平台，让你在数据中掌握先机，优化决策。
评论