搭建umami统计服务并嵌入个人博客

安装docker

使用宝塔面板一键安装docker即可，选自定义安装阿里云源的

创建项目目录并下载官方 compose 模板

mkdir -p /www/wwwroot/umami && cd /www/wwwroot/umami
# 国内机建议用 GitHub 加速镜像
curl -L https://github.com/umami-software/umami/raw/master/docker/docker-compose.yml -o docker-compose.yml

修改yml文件内容如下

version: '3.8'
services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest   # 确保 2.15+
    restart: always
    ports:
      - "3000:3000"                    # 如宿已有 3000 可换成 8300:3000
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: <随机32位字符串>     # 必须换！宝塔终端里 openssl rand -hex 16 生成
    depends_on:
      - db
  db:
    image: postgres:16-alpine
    restart: always
    environment:
      POSTGRES_DB: umami
      POSTGRES_USER: umami
      POSTGRES_PASSWORD: umami
    volumes:
      - ./data:/var/lib/postgresql/data   # 数据放本地，方便宝塔备份
volumes:
  data:

启动容器

docker compose up -d          # 会自动拉取镜像并初始化数据库

查看容器状态

docker compose ps             # 两个容器状态都 healthy 即可

绑定域名 + HTTPS

宝塔「网站 → 添加站点」→ 域名填写 umami.your.cn → 创建后进入「反向代理」：

目标 URL： http://127.0.0.1:3000 发送域名：$host

其余保持默认 → 保存

宝塔面板SSL处一键申请 Let’s Encrypt 证书，打开「强制 HTTPS」。

后续升级

cd /www/wwwroot/umami
docker compose pull              # 取最新镜像
docker compose up -d --force-recreate   # 平滑重启，数据卷无损

问题

搭建好之后登录默认账号密码admin/umami，但是遇到报错了：Failed to execute 'json' on Response': Unexpected end of JSON input，一路用ai排查问题，日志报错：EHOSTUNREACH 172.19.0.2:5432

强制重建网络 + 重新 up

docker compose down              # 停容器并删除旧网络
docker compose up -d             # 新建网段、重新解析 db:5432

docker compose up -d遇报错：

failed to create network umami_default: … iptables: No chain/target/match by that name.

Docker 想新建网桥时，发现系统里没有它需要的 iptables 链（nat/DOCKER），所以网卡建不起来，容器也就起不来。

具体不知道什么原因，但确实在安装好docker后宝塔安全的防火墙被关闭了，我又手动打开了，可能是这里导致的

修复

让 Docker 重新把自己需要的链补回来：

systemctl restart docker

然后重新 up：

docker compose up -d

再docker compose ps 看到两行 Up 就 OK

umami-db-1   postgres:16-alpine   Up
umami-umami-1 ...                  Up

AI给的问题原因：

原因就是 “Docker 与 firewalld/iptables 抢规则” 的经典冲突：

Docker 服务启动时会往 iptables 里插入自己的 NAT/DOCKER 链，用于容器联网、端口映射。
你（或宝塔）稍后手动开启防火墙（firewalld 或 bt-firewall）会 flush 掉所有链并重建，把 Docker 刚插好的链一并清空。
于是 Docker 再想新建网络时就找不到那条链，抛出 No chain/target/match by that name.
重启 Docker → 它重新写入缺失的链 → 网络能建 → 容器就正常了。

记得修改默认密码！！！

新建网站，把跟踪代码插入到博客，开启共享连接，用于把数据展示到其他任何你想展示的地方

嵌入typecho博客

给 Typecho 新建一个“空白”独立页面模板

进到主题目录，例如

/www/wwwroot/blog/usr/themes/你的主题/

新建文件 page-umami.php （名字随意，前缀 page- 是 Typecho 约定）

<?php
/**
 * 站点统计
 *
 * @package custom
 * @author  Me
 */
$this->need('header.php'); ?>
<style>
.page-umami{margin:2rem auto;max-width:1200px;background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.08);border-radius:8px;overflow:hidden}
.page-umami h1{font-size:1.8rem;text-align:center;padding:1.5rem 0;margin:0;background:#f7f9fc}
.umami-frame{width:100%;height:70vh;border:0;display:block}
@media (max-width:768px){.umami-frame{height:85vh}}
</style>
<article class="page-umami">
    <h1><?php $this->title(); ?></h1>
    <iframe src="https://umami.lihan.cyou/share/你的共享ID"
            class="umami-frame"
            loading="lazy"
            title="站点实时统计">
    </iframe>
</article>
<?php $this->need('footer.php'); ?>

使用步骤

把 src="https://umami.lihan.cyou/share/你的共享ID" 换成你在 Umami 里复制的 Share URL。
上传到当前主题目录，Typecho 后台新建独立页面 → 右侧选模板「站点统计」→ 发布即可。
前台立刻能看到免登录、圆角阴影、自适应高度的统计看板！

遇到问题

嵌入博客独立页面后，发现报了跨域问题

Framing 'https://umami.lihan.cyou/' violates the following Content Security Policy directive: "frame-ancestors 'self'". The request has been blocked.

只允许同域页面自己嵌自己，任何外域（包括同站不同子域）iframe 都会被浏览器直接 block。解决：让主题/服务器把 umami.lihan.cyou 加进白名单即可。

需要修改这个文件

cat /www/server/panel/vhost/nginx/proxy/umami.lihan.cyou/*.conf

在# proxy_hide_header Upgrade;下方加入两行

    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

    # 解决 iframe 嵌套被 CSP 拦截
    proxy_hide_header Content-Security-Policy;
    add_header Content-Security-Policy "frame-ancestors 'self' https://blog.lihan.cyou;";

    add_header X-Cache $upstream_cache_status;
    #Set Nginx Cache
    ......
}

一句话：把 Umami 返回的“只允许同源嵌套”头删掉，再换成“允许同源 + 你的博客”嵌套的新头，浏览器就不再拦截 iframe。

问题解决

ikn0w1T's blog