网站统计工具 Umami 安装部署教程

为为为什么

发布于 2022-08-10 14:38:10

2.5K00

代码可运行

文章被收录于专栏：又见苍岚又见苍岚

运行总次数：0

代码可运行

我们在建立网站之后，网站安装网站统计工具还蛮重要的，本文记录 Umami 网站统计工具的安装使用。

简介

Umami 是是谷歌分析的一个简单、快速、注重隐私的替代品。
官方网站：https://umami.is/
官方文档：https://umami.is/docs/
开源地址：https://github.com/umami-software/umami
演示地址： https://app.umami.is/share/8rmHaheU/umami.is

优点

简单分析 Umami 只测量你关心的重要指标：网页浏览量、使用的设备以及访问者的来源。这些数据都在一个易于浏览的页面上展示。
不限网站数量 Umami 通过一次安装就可以跟踪无限数量的网站，甚至还可以跟踪子域名和单个的 URL。
绕过广告拦截器 Umami 由你在自己进行托管部署，所以你可以有效地避免 Google Analytics 不同的广告拦截器。
轻量级 追踪脚本很小（只有 2KB），而且支持 IE 等旧版浏览器。
多账户 Umami 可用于为朋友或客户托管数据，只需创建一个单独的账号，他们就可以开始在自己的仪表板上跟踪自己的网站。
共享数据 如果你想公开分享你的统计数据，那么你可以使用一个唯一生成的 URL 进行共享。
移动端友好 Umami 界面已针对移动设备进行了优化，因此你可以从任何地方查看你的统计数据。
数据所有权 由于 Umami 是自托管的，因此你拥有所有数据。无需将你的数据交给第三方进行利用。
注重隐私 Umami 不收集任何个人身份信息，并对收集的所有数据进行匿名处理。
开源 Umami 是开源的，并采用 MIT 的开源协议。

安装

需求

Node.js10.13或更高版本
数据库(MySQL或Postgresql)

从源码构建

安装`Nodejs`、`npm`

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo apt-get install -y npm

下载 Umami

git clone https://github.com/mikecao/umami.git
cd umami
npm install

创建数据库

先创建一个空数据库，比如umami，然后在umami目录中输入：

mysql -u username -p databasename < sql/schema.mysql.sql

username一般是root，databasename就是你创建的空数据库的名字，具体例子是：

mysql -u root -p umami < sql/schema.mysql.sql

你也可以在 phpmyadmin 中手动导入到空数据库中。

创建配置文件

在umami目录中新建一个.env的配置文件，填入：

DATABASE_URL=(connection url)
HASH_SALT=(any random string)

其中，connection url需要填入：

mysql://username:mypassword@localhost:3306/mydb

而any random string填入的是随机字符串，完整的例子是：

DATABASE_URL=mysql://username:mypassword@localhost:3306/mydb
HASH_SALT=123456789

注意去掉括号。

连接 url 格式如下：

postgresql://username:mypassword@localhost:5432/mydb
mysql://username:mypassword@localhost:3306/mydb

编译

npm run build

启动程序

通常使用npm start就可以直接启动，但是退出ssh之后就直接停止运行了，所以需要用一些工具保证后台运行，官方文档中的推荐是：

npm install pm2 -g
cd umami
pm2 start npm --name umami -- start 
pm2 startup
pm2 save

这样就可以用了。

Nginx 反代

因为可以使用ip:3000直接访问，但是有使用域名的话还可以反代一下，这里以Nginx举例。在server段加入配置：

server {
  server_name umami.yourdomain.com;

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

更新 Umami

首先停止运行

pm2 stop umami

获取更新

git pull

可能会遇到获取更新失败。我也不知道为啥我这每次都失败，可以用这个命令git reset --hard，然后再执行上一步git pull

然后重新编译

npm install
npm run build

重新启动

pm2 restart umami

页尾版本号有发生变化，那就是更新成功了。

使用 Docker

更简单的方式是使用 Docker 一键启动，在源码根目录下面有 docker-compose 的配置，默认配置构建 umami 容器并启动 Postgres 数据库

安装 docker-compose

sudo apt install docker-compose

配置 `docker-compose.yml`

生成随机字符串

openssl rand -base64 32

将得到的字符串填入 docker-compose.yml 配置文件的 HASH_SALT 中，替换 placeholder

HASH_SALT: replace-me-with-a-random-string

如果不需要公开访问可以修改 ports 为本地 IP，之后我们将本地监听反向代理出去即可（为了方便调试可以不修改，为了安全还是改一下）：

ports:
  - "127.0.0.1:3000:3000"

生成容器

运行命令

docker-compose up

该命令会自动拉取数据库与 umami 镜像并创建容器自动关联协同工作：

此时访问 IP:3000 应该可以登录 umami 面板了

或用 curl 命令也可以看到 umami 的反馈网页代码

curl localhost:3000

>>>
<!DOCTYPE html><html><head><meta charSet="utf-8"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"/><meta name="msapplication-TileColor" content="#da532c"/><meta name="theme-color" content="#2f2f2f" media="(prefers-color-scheme: dark)"/><meta name="viewport" content="width=device-width, initial-scale=1"/><meta name="next-head-count" content="10"/><link rel="preload" href="/_next/static/css/f84aa753510ba35d.css" as="style"/><link rel="stylesheet" href="/_next/static/css/f84aa753510ba35d.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-5cd94c89d3acac5f.js"></script><script src="/_next/static/chunks/webpack-cb7634a8b6194820.js" defer=""></script><script src="/_next/static/chunks/framework-5f4595e5518b5600.js" defer=""></script><script src="/_next/static/chunks/main-01df828e572375b9.js" defer=""></script><script src="/_next/static/chunks/pages/_app-dbfbaad68eee94b0.js" defer=""></script><script src="/_next/static/chunks/pages/index-308d314158ae680c.js" defer=""></script><script src="/_next/static/s9hhsY5U-8n3fCxv8kHFS/_buildManifest.js" defer=""></script><script src="/_next/static/s9hhsY5U-8n3fCxv8kHFS/_ssgManifest.js" defer=""></script><script src="/_next/static/s9hhsY5U-8n3fCxv8kHFS/_middlewareManifest.js" defer=""></script></head><body><div id="__next" data-reactroot=""><div class="container" dir="ltr"></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"s9hhsY5U-8n3fCxv8kHFS","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>(base)

先不急使用 umami 做统计，先完成最后一步配置

Nginx 反向代理

网上有前辈用宝塔直接反向代理，我的宝塔域名被别的占了，又不敢装新的 Nginx （害怕冲突），稳妥起见使用了docker

此步骤用于那些需要 https 自己又没有配置好 Nginx 的同学，如果 http 满足需求可以跳过这一步
参考创建 Nginx docker 容器反向代理 https
先在本地创建共享文件夹 /share/ssl
拉取镜像并创建 Nginx 容器，端口自定义 XXXX: 443

docker run --name=nginx -p 9443:443 -d --restart=always -v /share/ssl:/ssl nginx

创建 SSL 证书获取 server_private.key, server.crt 文件，放在 /share/ssl 文件夹中
进入 Nginx 容器

docker exec -it nginx bash

在 /etc/nginx/conf.d 文件夹中创建配置文件 test.conf server_name 填自己的域名

server {
    listen       443 ssl;
    listen  [::]:443 ssl;
    # server_name localhost;

    ssl_certificate     /ssl/server.crt; 
    ssl_certificate_key /ssl/server.key;

    location / {
                    proxy_set_header    X-FORWARDED-FOR $remote_addr;
                    proxy_set_header    X-FORWARDED-PROTO $scheme;
                    proxy_set_header    Host   $http_host;
                    proxy_pass          http://101.43.39.125:3000;
    }
}

配置完成后重启 nginx 服务

service nginx reloadEBNF

配置好后可以查看是否配置成功

nginx

此时可以使用 https 登录 umami

配置 umami

初始登录账号密码为 admin 和 umami，登录后可以在设置中修改
在设置中点击添加站点，配置名称和域名，想要秀一下的勾选共享链接

如此我们的站点监控端就算顺利完成了，点击该站点监控，可以发现访问人数并不会增加，这是因为我们需要在我们监控的站点中插入反馈信息的代码

点击获取跟踪代码

复制跟踪代码，将这部分代码放到我们需要监控网站的 html 代码中即可监控该站点

此时我们可以看到站点实时统计信息

共享链接

共享链接可以将站点统计信息实时共享给匿名用户查看

在配置中点击获取共享 URL，分享该 URL 即可分享给别人查看

效果展示

共享链接

参考资料

https://umami.is/
https://www.himiku.com/amp/umami.html
https://github.com/umami-software/umami
https://www.himiku.com/amp/umami.html
https://zhuanlan.zhihu.com/p/523067895
https://www.digitalocean.com/community/tutorials/how-to-install-umami-web-analytics-software-on-ubuntu-20-04
https://cloud.tencent.com/developer/article/2067465

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年7月14日，如有侵权请联系 cloudcommunity@tencent.com 删除

https

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度