Docusaurus Umami
Umami
umami 是一个开源、自托管的网站分析工具,这里是本站的 umami 数据展示页面。其包括以下功能:
- 网站流量统计
- 网站访问来源、设备、页面、时间、地区、浏览器、操作系统统计
- 自定义操作统计(比如想统计某个 button 的点击次数)
- 各种集成好的数据展示
并且其本质为一个 Next.js 应用,所以可以很方便的集成到现有的 Next.js 项目中。也可以进行二次开发
安装
安装前,首先确保有以下环境:
- Node.js 18.17 及以上
- 数据库二选一
- MySQL v8.0 及以上
- PostgreSQL v12.14 及以上
在 Ubuntu 下安装 Node.js 可以参考 Node.js 在 Wsl 下安装 Node.js 可以参考 Node.js - Wsl 在 Linux 下安装 MySQL 可以参考 MySQL
安装 umami
安装 yarn
npm install -g yarn
拉取项目
git clone https://github.com/umami-software/umami.git
cd umami
yarn install
配置数据库
首先在项目根目录下创建一个 .env
文件,并添加如下内容:
- MySQL
- PostgreSQL
DATABASE_URL=mysql://username:mypassword@localhost:3306/mydb
DATABASE_URL=postgresql://username:mypassword@localhost:5432/mydb
其中:
username
数据库用户名,一般是 rootmypassword
数据库密码localhost
数据库地址,一般是 localhost3306/5432
数据库端口mydb
数据库名称
以上为 prisma 标准 DATABASE_URL,这里给出一个样例:
DATABASE_URL=mysql://root:qwer1234@localhost:3306/my-website-umami
配置完成后,使用以下命令初始化 prisma
npx prisma migrate dev
Build 项目
使用 yarn build
命令构建项目
如果服务器内存不太够,可以在本地从头再来一遍,之后把 build 好的 .next
文件夹 scp 到云端即可
配置 nginx
在使用 Umami 的情况下,我们同时在服务器上部署了 Docusaurus 和 Umami,所以需要配置 nginx 进行反向代理,具体可以参考 Nginx Reverse Proxy 一篇
如果想要直接使用 https,在完成上一步的情况下,参考 SSL 一篇进行配置
总之,在配置完成后,nginx 配置文件如下:
...
server {
listen 80;
server_name umami.castamerego.com;
rewrite ^(.*)$ https://$host$1;
location / {
proxy_pass http://localhost:3030;
}
}
server {
listen 443 ssl;
server_name umami.castamerego.com;
ssl_certificate conf.d/cert/umami.castamerego.com.cer;
ssl_certificate_key conf.d/cert/umami.castamerego.com.key;
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 5m;
ssl_ciphers HIGH:!aNULL:!MD5;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://localhost:3030;
}
}
这里是将域名 umami.castamerego.com
重定向到 3030 端口,那么我们后面运行项目时也要在 3030 端口运行,修改 package.json 文件如下:
{
...
"scripts": {
"build": "npm-run-all check-env build-db check-db build-tracker build-geo build-app",
- "start": "next start",
+ "start": "next start -p 3030"
}
...
}
运行项目
然后使用 yarn start
命令运行项目,就可以访问你的域名查看项目了,可以看到登录界面,就说明项目已经成功运行了
如果直接在服务器上部署,可能会遇到一些问题,比如在服务器管理处,是否开放了端口,有时候可能项目已经跑起来了,但没访问到,细心排查即可
配置 Umami
登录
初次进入登录界面,账号为 admin,密码为 umami。登录后,根据下图指示,修改密码
添加网站
然后根据下图指示,添加你的网站