使用Docker容器轻松部署Umami网站统计分析平台

前言

搭建网站的朋友都需要用到数据统计,如果对数据统计没什么太大的要求,只想知道当天有多少访问量就可以使用这个Umami

Umami界面截图

 

教程

  1. 登录宝塔面板,在菜单栏中点击 Docker,根据提示安装 Docker 和 Docker Compose 服务;
  2. 在www/wwwroot目录下新建一个目录,新建docker-compose.yaml,并将如下代码加进去;
  3. 在当前目录下,点击上方位置终端,启动docker-compose,等待部署完成;
  4. 部署完成后,可在网站-反向代理添加一个域名并指向IP:3000,然后访问网站,进行登录,默认账号密码:admin/umami

新建docker-compose.yaml

version: '3'
services:
  umami:
    container_name: umami
    image: umamisoftware/umami:postgresql-latest
    ports:
      - "3000:3000"
    environment:
      DATABASE_URL: postgresql://umami:umami@db:5432/umami
      DATABASE_TYPE: postgresql
      HASH_SALT: replace-me-with-a-random-string
    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

启动docker-compose

docker-compose up -d

 

设置

先别添加网站,右上角地球标志设置语言为中文,再去后台把账号密码重新设置一下,然后再添加网站,并且获取到跟踪代码,直接复制内容到你的PHP文件中

 

制作数据挂件

因为51统计最近一直出现问题,并且有传言称51统计的js文件会出现劫持跳转的问题,于是就想更换统计方式,Umami因此成为我的主要选择。51统计好的地方在于能够显示出统计挂件,但是有大佬用umami的api也制作出了数据挂件

教程

1.首先搭建属于自己的umami,可以访问你的域名进行登录;

2.token可以到搭建好的umami站点,然后打开开发者工具,找到网络中的https://你的域名/api/auth/verify 里的请求头中的authorization 中Bearer 后面的内容

3.网站ID就是后台网站中的比如https://你的域名/websites/0ba3d4b8-95ec-4e33-a727-32b013d6cfa7 ,其中0ba3d4b8-95ec-4e33-a727-32b013d6cfa7 就是网站ID

4.在你需要部署的网站根目录下新建一个php文件,例如:tongji.php ,然后将下方代码复制粘贴并进行保存:

<div class="tongji">
今日访问人数 <span id="todayUv">0</span> | 今日访问量 <span id="todayPv">0</span> | 本月访问量 <span id="monthPv">0</span> | 总访问量 <span id="totalPv">0</span>
</div>

<script src="tongji.js"></script>
<style>
  #todayUv, #todayPv, #monthPv, #totalPv {
    color: #00a0ff;
  }
</style>

5.在你存放js的目录下新建一个js文件,例如:tongji.js ,然后将下方代码复制粘贴并进行保存:

  document.addEventListener('DOMContentLoaded', () => {
    umiTongji();
  });

  function umiTongji() {
    var umiToken = "你的token"; //获取到的 token
    var umiId = "网站ID"; //获取到的 websiteId
    var umiTime = Date.parse(new Date());
    var todayStart = new Date().setHours(0, 0, 0, 0);
    var monthStart = new Date(new Date().getFullYear(), new Date().getMonth(), 1).getTime();
    var umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + todayStart + "&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#todayPv').innerHTML = resdata.pageviews.value;
        document.querySelector('#todayUv').innerHTML = resdata.visitors.value;
      });

    umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=" + monthStart + "&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#monthPv').innerHTML = resdata.pageviews.value;
      });

    umiUrl = "https://你的域名/api/websites/" + umiId + "/stats?startAt=0&endAt=" + umiTime;

    fetch(umiUrl, {
        method: 'GET',
        mode: 'cors',
        cache: 'default',
        headers: {
          'Authorization': 'Bearer ' + umiToken,
          'Content-Type': 'application/json'
        }
      })
      .then(res => res.json())
      .then(resdata => {
        document.querySelector('#totalPv').innerHTML = resdata.pageviews.value;
      });
  }

使用方式

在你的PHP页面中,只需要包含tongji.php文件即可:
<?php include 'tongji.php'; ?>

或者直接复制tongji.php的内容到你的PHP文件中。

效果

 

WordPress插件


V1.1.0(2025.10.13)
1.后台自定义填写Umami域名、API Token、网站ID信息;
2.可在前台模板中使用短代码显示Umami的统计信息;
3.后台可随意切换2套显示模板。【更多模板持续更新中...】
4.优化代码,增强安全性,添加了nonce验证

官方网站:https://www.770a.cn/
联系QQ:825703967
版权所有:© 龙毅 2025

 

后台插件展示:

前台模板展示

模板1

模板2

下载

扫码关注微信公众号:柒柒零分享窝,回复关键词:Umami,即可获取下载链接
版权声明:
1.本网站名称:柒柒零分享窝
2.本站永久网址:https://www.770a.cn/
3.本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ825703967进行删除处理。
4.本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
5.本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6.如无特别声明本文即为原创文章仅代表个人观点,版权归《柒柒零分享窝》所有,欢迎转载,转载请保留原文链接。
7.本站作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
THE END
分享
二维码
< <上一篇
下一篇>>