搭建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强制重建网络 + 重新 updocker 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 就 OKumami-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。问题解决