使用Umami为自己的网站统计访问流量并可视化数据

本文最后更新于 2025年11月23日 凌晨

Umami

想知道自己网站，每天有多少人浏览？或者想更直观的查看自己网站的访客统计？快来试试Umami，一个基于Nodejs开发的网站浏览统计系统，搭建自己的网站统计后台，甚至完胜Google Analytics等工具。

Umami is a simple, fast, website analytics alternative to Google Analytics.

官方Demo图

Umami 基于 Node.js 开发，所有数据存储在自己的 MySQL（当然，支持MariaDB）或 PostGresql 内，不用担心个人数据被第三方平台进行算法优化、用户建模等。

2025-11-13 更新: Umami V3.0 已经弃用 MySQL 数据库，只支持 PostGresql 数据库。如果手头只有 SaaS MySQL 数据库（比如我 😅），可以暂时停留在 V2.19.0

Umami开源地址：https://github.com/umami-software/umami)
Umami官方文档地址：https://umami.is/docs/about

支持创作

制作教程不易，如果热心的小伙伴，想支持创作，可以加入我们的电圈（还可以解锁远程协助、好友位😃）：

WebChart Recognise

志同道合的小伙伴也是知音难觅。

  • 开发者爱好群: 👉 如果你对云服务器、CDN、云数据库和Linux等云计算感兴趣，亦或者喜欢编程、设计、产品、运营等领域，欢迎加入我们的开发者爱好群，一起交流学习(目前可能就我一个人？🤔，毕竟才刚刚创建~）。
QQ_Group Recognise

当然，也欢迎在B站、YouTube或微信公众号上关注我们：

MintimateBlog Recognise

更多：

辅助视频

为了让搭建在 Linux 服务器上更“丝滑”地安装 Umami ~，我录制了一个视频教程，希望能帮助到大家。

主要内容：

  • 搭建 Umami 需要的前置依赖
  • 如何克隆 Umami 仓库和安装相关依赖

做教程视频不易（技术教程，受众小，B站根本不会推荐引流，甚至经常把我回复的技术评论屏蔽），请务必一键三连嗷～

准备工作

首先，我们看看准备工作，也就是我们需要什么前置依赖。

硬件方面，只需要一台服务器，十分推荐Linux服务器，比如：

使用博客专属链接，享受超低折扣哦。 不过，如果你需要解析域名到服务器上，目标服务器是大陆服务器，需要域名备案才可以进行 Web 服务；如果不想备案，又想使用域，可以选择 腾讯云轻量应用服务器：https://curl.mintimate.cn/1HOageMOqRj 内的香港、新加坡地区。

其次是软件方面，需要：

  • MySQL/MariaDB/PostgreSQL：Umami 数据存放。
  • Nginx：使用Nginx，对 umami 的默认3000端口进行反向代理。同时也需要域名来完成 HTTPS 的配置。
  • Nodejs：如果你并没有安装Nodejs，可以看这篇文章=>https://www.mintimate.cn/2021/07/26/nvmNode/

本次教程，为了照顾小白；同时演示常规方法和宝塔方法；小白或者在使用宝塔的用户，可以使用宝塔方法。

宝塔官网：https://www.bt.cn

整体的安装流程：

graph LR
    A[克隆仓库<br/>安装依赖] --> B[安装配置<br/> PostgreSQL]
    B --> C[创建 .env 配置]
    C --> D[构建&启动<br/>服务]
    D --> E{GeoIP Database<br/>下载成功?}
    E -->|是| F[Nginx 反代<br/>HTTPS]
    E -->|否| G[设置镜像源]
    G --> C
    F --> H[完成部署]
    
    style H fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
    style B fill:#fff9c4,stroke:#f57f17,stroke-width:2px
    style D fill:#f8bbd0,stroke:#c2185b,stroke-width:2px
    style F fill:#d1c4e9,stroke:#512da8,stroke-width:2px
    style E fill:#ffccbc,stroke:#e64a19,stroke-width:2px
    style G fill:#fff59d,stroke:#f57c00,stroke-width:2px

仓库初始化

首先当然是SSH远程连接我们的Linux服务器，如果你是第一次使用Linux服务器，不知道怎么连接服务器，可以查看教程：

克隆umami仓库

首先我们需要克隆 umami 的仓库：https://github.com/mikecao/umami

通常情况，umami 并没有发布方法包，我们直接用git进行克隆即可：

1
git clone https://github.com/mikecao/umami

如果你的服务器无法连接GitHub，可以使用我的镜像：

1
2
# 使用自动镜像（只同步 master 分支）
git clone https://cnb.cool/flyinbug/umami

克隆umami仓库

安装依赖

之后，我们就可以安装依赖：

1
2
3
4
5
6
# 个人习惯，喜欢使用 yarn
npm install -g yarn
# 进入刚刚克隆的仓库内
cd umami
# 使用 npm/yarn 进行依赖安装
yarn install

使用 yarn 安装 umami 依赖

之后，我们要初始化数据库。

初始化数据库

初始化数据库，这里给大家演示两个方法：

  • 常规方法：如何自己安装和配置 PostgreSQL（建议使用 docker 安装数据库，或者 SaaS 版本数据库）。
  • 宝塔方法：利用宝塔面板，可视化安装和管理 PostgreSQL 数据库、Nginx 等内容。

如果你想使用宝塔方法，但是并不知道怎么安装宝塔面板：

常规方法（推荐非小白）

常规方法，确保你已经安装了 PostgreSQL 或者有 SaaS 版本的 PostgreSQL，我这里演示一下 Docker 版本的 PostgreSQL 安装：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 设置环境变量
export POSTGRES_PASSWORD=<PASSWORD>
# 创建 docker-compose.yml
cat > docker-compose.yml <<EOF
services:
  postgresql:
    image: postgres:18
    container_name: postgresql18
    restart: always
    environment:
      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
      TZ: Asia/Shanghai
      PGTZ: Asia/Shanghai
    ports:
      - "5432:5432"
    volumes:
      - /dockerData/postgresql:/var/lib/postgresql
    command:
      - "postgres"
      - "-c"
      - "timezone=Asia/Shanghai"
EOF

使用 docker compose 安装 PostgreSQL

之后，进入数据库容器内，创建一个叫 umami 的用户和对于数据库，用于后续的初始化：

1
2
3
4
5
6
# 进入数据库容器内
docker exec -it postgresql18 psql -U postgres
# 创建用户和数据库
CREATE USER umami WITH PASSWORD '${UMAMI_PASSWORD}';
CREATE DATABASE umami OWNER umami;
GRANT ALL PRIVILEGES ON DATABASE umami TO umami;

到此，我们的数据库初始化就完成；如果你不放心，也可以核验一下：

1
2
3
4
# 查看存在的数据库
docker exec -it postgresql18 psql -U postgres -c "SELECT datname FROM pg_database;"
# 查看存在的用户
docker exec -it postgresql18 psql -U postgres -c "SELECT usename FROM pg_user;"

使用命令行创建用户和数据库

当然，如果你是使用 Umami V2.19.0 版本，那么也可以使用 MySQL数据库。

宝塔方法（推荐小白）

宝塔方法就很简单了，在宝塔内，先安装 PostgreSQL 管理器并安装 PostgreSQL 即可:

宝塔内安装 PostgreSQL 管理器

使用管理器安装 PostgreSQL

之后，切换到数据库

宝塔内新建 PostgreSQL 数据库

记住我们的数据库密码，之后我们就可以使用这个密码，进行 umami 的数据库初始化。

到此，SQL的初始化就完成了。

构建 umami

创建配置文件

Umami 需要我们在项目根目录下创建一个 .env 的文件，用于在 umami 构建过程中，提供环境变量。比如: umami 会读取这个文件进行数据库的连接和 Hash 加盐。

我们使用 cat 命令创建并写入：

1
2
3
4
cat > .env <<EOF
DATABASE_URL=postgresql://umami:HelloUmami@localhost:5432/umami
HASH_SALT=Mintimate
EOF

创建.env文件

其中：

  • DATABASE_URL 是数据库的连接地址，格式为：postgresql://用户名:密码@主机:端口/数据库名; 如果你使用的是 umami v2.19.0 版本，那么可以使用 MySQL 数据库，格式为：mysql://用户名:密码@主机:端口/数据库名。
  • HASH_SALT 是用于加盐的字符串，用于生成用户的 Hash 值。

配置好以后，保存并推出即可。如果你并不知道 vim 的操作，可以使用宝塔面板操作，或者查看文章：

或者直接使用宝塔面板进行操作：

腾讯云轻量应用服务器宝塔镜像

编译构建

最后，我们可以更具自己的配置（数据库），进行umami的构建，很简单，使用命令：

1
yarn build

构建 umami

Umami 的构建，需要下载 GeoIp 数据库，但是这个数据库在中国大陆的服务器上下载可能比较慢。我已经给 Umami 官方提交了 PR: feat(geo): add redirect support for direct .mmdb downloads 并合并。

如果你开在 GeoIp 数据库下载比较慢的情况下，在确保使用的是融合我 PR 的分支情况下，可以使用我的镜像：

1
2
3
# 设置使用我的镜像(或者写到.env文件内)
export GEO_DATABASE_URL=https://cnb.cool/flyinbug/GeoLite.mmdb/-/releases/latest/download/GeoLite2-City.mmdb
yarn build

使用我的 CNB 的 Geo 镜像

最后，我们可以使用yarn start启动 umami：

启动 umami

这个时候，用浏览器就可以访问了。但是为了使用更方便，我们需要：

  • 使用 systemctl 注册为服务，后台持久化运行 umami；
  • 使用 Nginx 反向代理，使用 Https 访问 umami。

持久化运行

推荐后台运行umami，可以使用screen：https://www.mintimate.cn/2021/09/02/howToUseScreen/

当然，你也可以注册为systemctl服务，注册内容参考：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
cat > /etc/systemd/system/umami.service <<EOF
[Unit]
Description=Umami
After=network.target

[Service]
Type=simple
User=root
Group=root
WorkingDirectory=/www/wwwRoot/umami
ExecStart=/root/.nvm/versions/node/v22.21.1/bin/yarn start
Restart=on-failure
Environment=NODE_ENV=production
Environment=PATH=/root/.nvm/versions/node/v22.21.1/bin:/usr/local/bin:/usr/bin:/bin

[Install]
WantedBy=multi-user.target
EOF

最后效果：

注册为systemctl服务

Nginx反向代理

为了使用更方便，我们需要使用 Nginx 反向代理，使用 Https 访问umami。

常规操作

常规操作，就是我们自己编译安装的Nginx，我们编译Nginx配置，添加反向代理配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
location =/api/collect {
    proxy_pass http://127.0.0.1:3000;
        proxy_buffering on;
        proxy_http_version 1.1;
        proxy_ssl_session_reuse off;
        proxy_ssl_server_name on;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Host  $host;
}
location /{
    proxy_pass http://127.0.0.1:3000/;
}

Nginx配置

宝塔操作

当然，你也可以使用宝塔进行操作：
首先是宝塔添加域名：

宝塔添加域名

之后是反向代理：

Nginx配置

如果你并不知道域名解析，可以参考腾讯云的DNS文档：https://cloud.tencent.com/document/product/302/2589

如何使用

首先：

  • umami的默认用户名为：admin
  • umami的默认密码为：umami

默认用户名和密码

进入到后台，创建一个网站：

添加网站

之后，我们复制跟踪代码，到自己网站的 <head> 内粘贴即可。后续也可以在设置内重新找到跟踪代码：

在设置内重新找到跟踪代码

跟踪代码

我是Vue项目，放到根目录的index.html即可；重新部署：

部署后的效果

即可跟踪网站数据：
网站数据开始追踪

最终效果

在首页，可以看到 Umami 内添加的所有站点：

Umami 内添加的所有站点

我们可以使用 Umami 查看访客的来源国家（IP 归属地，依赖于 GeoIp 数据库）：

Umami 查看访客的来源国家

当然，你也可以查看到实时的访客数量、来源域名：

Umami 查看实时的访客数量、来源域名

Q&A

无法追踪自己的网站

无法追踪的情况很多，这里列举一个配置错误： 最近有位网友咨询，为什么无法追踪他的 GitHub Pages 网站。经过排查发现：

  • ✅ GitHub Pages 使用 HTTPS 协议
  • ❌ Umami 服务使用默认的 3000 端口（HTTP 协议）

这种配置注定无法工作！这涉及到浏览器的混合内容（Mixed Content）安全策略：

  1. 浏览器安全策略

    • 当你的网站使用 HTTPS 协议时，浏览器会主动阻止所有 HTTP 资源的加载（包括 JS、CSS、图片等）
    • 这是为了防止中间人攻击（MITM），避免攻击者通过不安全的 HTTP 连接注入恶意代码

  2. HTTPS 协议要求

    • HTTPS 的设计初衷就是提供端到端的加密通信
    • 如果允许加载 HTTP 资源，整个 HTTPS 的安全性将毫无意义
    • 攻击者可以通过劫持 HTTP 请求来窃取或篡改数据

  3. 实际影响

    • 如果 Umami 使用 HTTP（如 http://example.com:3000），而你的网站使用 HTTPS
    • 浏览器会在控制台报错：Mixed Content: The page at 'https://...' was loaded over HTTPS, but requested an insecure script 'http://...'. This request has been blocked.
    • Umami 的统计脚本根本无法加载，自然也就无法追踪访问数据

解决方案:

  1. 使用 Nginx 反向代理 Umami 的 3000 端口
  2. 为域名申请并配置 SSL 证书（Let’s Encrypt 免费证书即可）
  3. 确保 Umami 可以通过 https://your-domain.com 访问
  4. 在网站中引用 HTTPS 版本的 Umami 统计脚本

这样才能保证：

  • ✅ HTTPS 网站可以正常加载 HTTPS 的 Umami 脚本
  • ✅ 数据传输全程加密，保护用户隐私
  • ✅ 符合现代 Web 安全标准

如何进行OTA升级

是不是还有小伙伴想知道如何进行OTA升级呢？其实官方也提供了方法，只需要在Umami没有运行情况下，重新 pull 并进行依赖安装和构建即可：

1
2
3
4
5
6
7
8
9
10
# 暂停 umami 服务
systemctl stop umami
# 拉取最新代码
git pull
# 依赖重新安装
yarn install
# 重新构建项目
yarn build
# 重新启动项目（如果有配置Systemctl，可以使用）
systemctl start umami

END

到此，Umami就安装和部署网站了。

最后，如果你觉得本篇教程对你有帮助，欢迎加入我们的开发者交流群: 812198734 ，一起交流学习，共同进步。

若对文章很感兴趣，可以B站关注我ヾ(≧▽≦*)o

点此跳转“爱发电”页面(○｀ 3′○)
Code > 工具
#Web #Web统计
使用Umami为自己的网站统计访问流量并可视化数据
https://www.mintimate.cn/2022/03/02/deployUmami/
作者
Mintimate
发布于
2022年3月2日
许可协议