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

搭建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。问题解决