<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:wfw="http://wellformedweb.org/CommentAPI/">
<channel>
<title>ikn0w1T&#039;s blog - umami</title>
<link>https://blog.lihan.cyou/index.php/tag/umami/</link>
<atom:link href="https://blog.lihan.cyou/index.php/feed/tag/umami/" rel="self" type="application/rss+xml" />
<language>zh-CN</language>
<description></description>
<lastBuildDate>Tue, 06 Jan 2026 16:38:02 +0800</lastBuildDate>
<pubDate>Tue, 06 Jan 2026 16:38:02 +0800</pubDate>
<item>
<title>搭建umami统计服务并嵌入个人博客</title>
<link>https://blog.lihan.cyou/index.php/archives/203/</link>
<guid>https://blog.lihan.cyou/index.php/archives/203/</guid>
<pubDate>Tue, 06 Jan 2026 16:38:02 +0800</pubDate>
<dc:creator>ikn0w1T</dc:creator>
<description><![CDATA[搭建umami统计服务并嵌入个人博客安装docker使用宝塔面板一键安装docker即可，选自定义安装阿里云源的创建项目目录并下载官方 compose 模板mkdir -p /www/wwwro...]]></description>
<content:encoded xml:lang="zh-CN"><![CDATA[
<h2>搭建umami统计服务并嵌入个人博客</h2><h3>安装docker</h3><p>使用宝塔面板一键安装docker即可，选自定义安装阿里云源的</p><h3>创建项目目录并下载官方 compose 模板</h3><pre><code class='language-shell' lang='shell'>mkdir -p /www/wwwroot/umami &amp;&amp; cd /www/wwwroot/umami
# 国内机建议用 GitHub 加速镜像
curl -L https://github.com/umami-software/umami/raw/master/docker/docker-compose.yml -o docker-compose.yml
</code></pre><h3>修改yml文件内容如下</h3><pre><code>version: &#39;3.8&#39;
services:
  umami:
    image: ghcr.io/umami-software/umami:postgresql-latest   # 确保 2.15+
    restart: always
    ports:
      - &quot;3000:3000&quot;                    # 如宿已有 3000 可换成 8300:3000
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      APP_SECRET: &lt;随机32位字符串&gt;     # 必须换！宝塔终端里 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:
</code></pre><h3>启动容器</h3><pre><code>docker compose up -d          # 会自动拉取镜像并初始化数据库
</code></pre><h3>查看容器状态</h3><pre><code>docker compose ps             # 两个容器状态都 healthy 即可
</code></pre><h3>绑定域名 + HTTPS</h3><p>宝塔「网站 → 添加站点」→ 域名填写  umami.your.cn  → 创建后进入「反向代理」：</p><p>目标 URL： <a href='http://127.0.0.1:3000' target='_blank' class='url'>http://127.0.0.1:3000</a> 发送域名：$host</p><p>其余保持默认 → 保存</p><p>宝塔面板SSL处一键申请 Let’s Encrypt 证书，打开「强制 HTTPS」。</p><h3>后续升级</h3><pre><code>cd /www/wwwroot/umami
docker compose pull              # 取最新镜像
docker compose up -d --force-recreate   # 平滑重启，数据卷无损
</code></pre><h3>问题</h3><p>搭建好之后登录默认账号密码admin/umami，但是遇到报错了：Failed to execute &#39;json&#39; on Response&#39;: Unexpected end of JSON input，一路用ai排查问题，日志报错：EHOSTUNREACH 172.19.0.2:5432</p><h4>强制重建网络 + 重新 up</h4><pre><code>docker compose down              # 停容器并删除旧网络
docker compose up -d             # 新建网段、重新解析 db:5432
</code></pre><p>docker compose up -d遇报错：</p><pre><code>failed to create network umami_default: … iptables: No chain/target/match by that name.
</code></pre><blockquote><p>Docker 想新建网桥时，发现系统里没有它需要的 iptables 链（nat/DOCKER），所以网卡建不起来，容器也就起不来。</p><p></blockquote></p><p>具体不知道什么原因，但确实在安装好docker后宝塔安全的防火墙被关闭了，我又手动打开了，可能是这里导致的</p><h4>修复</h4><p>让 Docker 重新把自己需要的链补回来：</p><pre><code>systemctl restart docker
</code></pre><p>然后重新 up：</p><pre><code>docker compose up -d
</code></pre><p>再docker compose ps  看到两行 Up 就 OK</p><pre><code>umami-db-1   postgres:16-alpine   Up
umami-umami-1 ...                  Up
</code></pre><p>AI给的问题原因：</p><p>原因就是 “Docker 与 firewalld/iptables 抢规则” 的经典冲突：</p><ol>
<li>Docker 服务启动时会往 iptables 里插入自己的 NAT/DOCKER 链，用于容器联网、端口映射。</li>
<li>你（或宝塔）稍后 手动开启防火墙（firewalld 或 bt-firewall）会 flush 掉所有链并重建，把 Docker 刚插好的链一并清空。</li>
<li>于是 Docker 再想新建网络时就找不到那条链，抛出  No chain/target/match by that name. </li>
<li>重启 Docker → 它重新写入缺失的链 → 网络能建 → 容器就正常了。</li>

</ol><h3>记得修改默认密码！！！</h3><p>新建网站，把跟踪代码插入到博客，开启共享连接，用于把数据展示到其他任何你想展示的地方</p><h3>嵌入typecho博客</h3><h4>给 Typecho 新建一个“空白”独立页面模板</h4><h5>进到主题目录，例如</h5><pre><code>/www/wwwroot/blog/usr/themes/你的主题/
</code></pre><h5>新建文件  page-umami.php （名字随意，前缀  page-  是 Typecho 约定）</h5><pre><code class='language-php' lang='php'>&lt;?php
/**
 * 站点统计
 *
 * @package custom
 * @author  Me
 */
$this-&gt;need(&#39;header.php&#39;); ?&gt;
&lt;style&gt;
.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}}
&lt;/style&gt;
&lt;article class=&quot;page-umami&quot;&gt;
    &lt;h1&gt;&lt;?php $this-&gt;title(); ?&gt;&lt;/h1&gt;
    &lt;iframe src=&quot;https://umami.lihan.cyou/share/你的共享ID&quot;
            class=&quot;umami-frame&quot;
            loading=&quot;lazy&quot;
            title=&quot;站点实时统计&quot;&gt;
    &lt;/iframe&gt;
&lt;/article&gt;
&lt;?php $this-&gt;need(&#39;footer.php&#39;); ?&gt;

</code></pre><h4>使用步骤</h4><ol>
<li>把  src=&quot;<a href='https://umami.lihan.cyou/share/' target='_blank' class='url'>https://umami.lihan.cyou/share/</a>你的共享ID&quot;  换成你在 Umami 里复制的 Share URL。</li>
<li>上传到当前主题目录，Typecho 后台新建独立页面 → 右侧选模板「站点统计」→ 发布即可。</li>
<li>前台立刻能看到免登录、圆角阴影、自适应高度的统计看板！</li>

</ol><h4>遇到问题</h4><p>嵌入博客独立页面后，发现报了跨域问题</p><pre><code>Framing &#39;https://umami.lihan.cyou/&#39; violates the following Content Security Policy directive: &quot;frame-ancestors &#39;self&#39;&quot;. The request has been blocked.
</code></pre><blockquote><p>只允许同域页面自己嵌自己，任何外域（包括同站不同子域）iframe 都会被浏览器直接 block。
解决：让主题/服务器把  umami.lihan.cyou  加进白名单即可。</p><p></blockquote></p><p>需要修改这个文件</p><pre><code>cat /www/server/panel/vhost/nginx/proxy/umami.lihan.cyou/*.conf
</code></pre><p>在# proxy_hide_header Upgrade;下方加入两行</p><pre><code>    proxy_http_version 1.1;
    # proxy_hide_header Upgrade;

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

    add_header X-Cache $upstream_cache_status;
    #Set Nginx Cache
    ......
}
</code></pre><blockquote><p>一句话：
把 Umami 返回的“只允许同源嵌套”头删掉，再换成“允许同源 + 你的博客”嵌套的新头，浏览器就不再拦截 iframe。</p><p></blockquote></p><p>问题解决</p>
]]></content:encoded>
<slash:comments>0</slash:comments>
<comments>https://blog.lihan.cyou/index.php/archives/203/#comments</comments>
<wfw:commentRss>https://blog.lihan.cyou/index.php/feed/tag/umami/</wfw:commentRss>
</item>
</channel>
</rss>