封面图加载中

Halo博客配置Umami可视化数据统计插件

本文针对本地NAS与云服务器性能瓶颈问题，提出在NAS部署开源网站分析工具Umami的解决方案。通过Docker容器搭建Umami，结合FRP内网穿透实现公网访问，再利用1panel面板反向代理配置域名访问。详细步骤包括：使用docker-compose部署Umami及PostgreSQL数据库，配置Frps服务端与Frpc客户端进行内网穿透，通过反向代理解决跨域问题，最终在Halo博客集成Umami插件实现数据自主追踪。方案有效利用本地资源，保障数据隐私与访问稳定性。
  • 本文作者
  • 文章发布日期 2025-07-26 01:11
  • 热度 182
  • 本文共计
  • 预计阅读

呈上效果

共享访问链接

https://um.8dui.com/share/ekEDRTQsLj6zNWF8/www.8dui.com

整体方案

因为我本地有NAS设备，加上云服务器2核2G部署了Halo后，性能很吃紧了，所以我的方案是：

  1. 本地NAS设备搭建Umami容器

  2. 通过FRP程序配合云服务器进行内网穿透

  3. 通过1penel/宝塔面板反向代理实现给博客提供需求。

搭建Umami容器

Umami 是一款开源的网站分析工具，可用于网站数据追踪、埋点等，具有隐私保护好、轻量级等特点。可以通过 Docker 容器来部署 Umami，将其部署在自己的服务器上，实现数据自主掌控。

项目地址：https://github.com/umami-software/umami

官方docker-compose.yml：https://github.com/umami-software/umami/blob/master/docker-compose.yml

搭建方式有很有，比如1penel/宝塔面板一键安装、克隆源码部署等等，不一一赘述了，采用其他方式部署请以官方文档为准。

绿联NAS Docker部署

我使用的docker-compose.yml如下，一般不需更改。

version: '3'
services:
  umami:
    container_name: umami
    image: umamisoftware/umami:postgresql-latest
    ports:
      - "3300:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      HASH_SALT: your-random-string-here
    depends_on:
      - db
    restart: always
  db:
    container_name: umami-db
    image: postgres:12-alpine
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./sql/schema.postgresql.sql:/docker-entrypoint-initdb.d/schema.postgresql.sql:ro
      - ./umami-db-data:/var/lib/postgresql/data
    restart: always

部署完成后访问：http://NASIP:3300

登录

  • Umami 安装将创建一个默认的管理员账户，默认用户密码： admin/umami, 需要登录并更改默认密码。

  • Umami 系统默认使用英语，登录后可点击网站右上角的图标切换为中文。

  • 登录后，点击头部的设置，选择个人资料，及时修改账户密码。

Frp内网穿透

这里先放个官方文档，后面时间写个详细的教程。

https://gofrp.org/zh-cn/docs/

大概流程就是：

云服务器部署：FrpS【可以1penel面板直接安装，设置密钥就行】

本地客户端部署：FrpC【docker-compose.yml】参考

version: "3"
services:
    frpc:
        restart: unless-stopped
        network_mode: host
        volumes:
            - /本NAS文件路径/Frpc/frpc.toml:/etc/frp/frpc.toml
        container_name: Frpc
        image: snowdreamtech/frpc

frpc.toml文件格式参考

transport.tls.enable = true		
serverAddr = "12.123.45.789"  云服务的IP地址/域名
serverPort = 7000 				# 公网服务端通信端口

auth.token = "www.8dui.com" 		 # 令牌，与公网服务端保持一致

[[proxies]]
name = "halo"
type = "tcp"    # Frp 协议类型
localIP = "10.10.1.5"			# 本地服务IP
localPort = 8090				# 本地8090端口
remotePort = 12345 				# 暴露服务的公网入口，服务端反向代理端口

反向代理

这里以1Penel为例

操作完成后，就可以通过域名正常访问Umami。

Halo安装配置Umami插件

  • 在Umami添加站点，将跟踪代码注入全局 head 标签 如果需要共享请打开共享链接

  • 配置插件

  • 至此配置基本完毕，但是你打开你的Umami，你会发现惊喜😂

拒绝访问是吧😉

修改反向代理配置文件

我这里有两个其他大佬写的文件，仅供参考，均为增加项

# 动态设置 CORS
    if ($http_origin ~* (https?://(www\.)?8dui\.com)) {
        set $allow_origin $http_origin;
    }
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    add_header Access-Control-Allow-Origin $allow_origin always;
    add_header Access-Control-Allow-Origin 'https://www.8dui.com';
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    add_header Content-Security-Policy 'frame-ancestors www.8dui.com';
    proxy_hide_header 'Access-Control-Allow-Origin';
    proxy_hide_header 'Content-Security-Policy';
    if ($request_method = 'OPTIONS') {
      return 204;
    }

但是不知道什么原因，也有可能是我配置问题，我配置后会出现奇奇怪怪的问题。

最后与AI深度探讨得出来下面完整的配置，目前使用没问题，也没有报错，仅供参考！

server {
    listen 80 ; 
    listen 443 ssl http2 ; 
    server_name 你的域名; 
    # 日志配置
    access_log /www/sites/你的域名/log/access.log main; 
    error_log /www/sites/你的域名/log/error.log; 
    # 通用代理头
    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 https; 
    proxy_http_version 1.1; 
    proxy_set_header Upgrade $http_upgrade; 
    proxy_set_header Connection $http_connection; 
    # Let's Encrypt验证路径
    location ^~ /.well-known/acme-challenge {
        allow all; 
        root /usr/share/nginx/html; 
        expires 1d; 
    }
    # HTTP强制跳转HTTPS
    if ($scheme = http) {
        return 301 https://$host$request_uri; 
    }
    # SSL配置
    ssl_certificate /www/sites/你的域名/ssl/fullchain.pem; 
    ssl_certificate_key /www/sites/你的域名/ssl/privkey.pem; 
    ssl_protocols TLSv1.3 TLSv1.2 TLSv1.1 TLSv1; 
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256; 
    ssl_prefer_server_ciphers on; 
    ssl_session_cache shared:SSL:10m; 
    ssl_session_timeout 10m; 
    error_page 497 https://$host$request_uri; 
    add_header Strict-Transport-Security "max-age=31536000"; 
    # CORS配置（关键修改：仅保留必要的头，避免与后端冲突）
    add_header Access-Control-Allow-Origin "https://www.8dui.com" always; 
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always; 
    add_header Access-Control-Allow-Headers "DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization" always; 
    add_header Access-Control-Allow-Credentials "true" always; 
    # 隐藏后端可能冲突的头（关键修改：明确隐藏后端的Access-Control-Allow-Origin）
    proxy_hide_header "Access-Control-Allow-Origin"; # 防止后端返回冲突头
    proxy_hide_header "Content-Security-Policy"; 
    # 处理OPTIONS请求
    if ($request_method = 'OPTIONS' ) {
        return 204; 
    }
    # 反向代理所有请求到Umami容器
    location / {
        proxy_pass http://127.0.0.1:3300; 
        proxy_set_header Accept-Encoding ""; 
    }
}

更新-20250808🔔

加入以下代码

    proxy_hide_header 'Access-Control-Allow-Origin'; 
    proxy_hide_header 'Content-Security-Policy'; 
    add_header Access-Control-Allow-Origin 'https://www.tata.me';  #修改为实际域名地址
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS'; 
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'; 
    if ($request_method = 'OPTIONS' ) {
        return 204; 
    }
    add_header Content-Security-Policy 'frame-ancestors www.tata.me';  #修改为实际域名地址

至此本篇文章完🎉🎉🎉🎉