标签：网站统计

无服务器在 Vercel 上免费部署 Umami ：一个简洁开源的网站统计工具
前言

最近逛木木佬的博客看到前端调用 Umami API 这篇文章，看封面图像是网站访问统计啥的，一搜发现是类似 51la 统计的玩意，还开源，支持 Serverless 自部署，有东西折腾，搞！

准备工作
1. Github 账号
2. Vercel 账号
3. 数据库
4. 自己的域名（可选）
  部署完成之后默认会给你的项目分配一个 vercel.app 的三级域名，但是在 2021 年 vercel.app 域名被墙，大陆地区无法访问，因此强烈建议自己准备域名
一、开搞

（一）Fork 官方 GitHub 仓库Fork
（二）打开 Vercel 然后通过 GitHub 快捷登录通过 GitHub 快捷登录
（三）打开 Storage 选项卡创建 Postgre出现以下界面表示创建成功sql

（四）打开 Dashboard，点击 Add new – ProjectAdd new – Project

（五）Import Git Repository 选择 Continue With GitHub

（六）此时会跳转到 GitHub 批准 Vercel 访问，建议选择允许访问全部仓库，当然你也可以设置仅可访问部分仓库。

选择你复刻的仓库

（七）设置部署参数和环境变量
```
变量名：HASH_SALT 值：自定义字符串
变量名：DATABASE_URL 值：数据库链接
例：
postgresql://username:mypassword@localhost:5432/mydb mysql://username:mypassword@localhost:3306/mydb 
变量名：TRACKER_SCRIPT_NAME 值：自定义统计脚本名
```
最后点击 Deploy 部署

部署成功后会显示 Congratulation 页面（部署时长两分钟左右）success
（八）添加自定义域名

如果你有域名，直接从此界面右边 “Add Domain” 进入添加域名，Vercel 会自动生成 SSL 证书（开启 https）。没有的话直接右上角 “Go to Dashboard” 就可以看到 Vercel 为你准备的域名

（九）登录Umami

打开 Umami，初次登录输入默认用户名 admin 与默认密码 umami，login

(十)Enjoy~

二、报错及注意事项

新版本界面有所变化，请注意DATABASE_URL ，大部分部署失败都是这里没有填写正确。以下解决办法来自 Tony’s Blog：

在 Vercel 部署 umami 网站统计及报错解决

Umami 是一种简单、快速的网站分析替代品，可替代 Google Analytics。

你需要准备一台 Linux x86 VPS（不能是 arm64）。如果没有，建议使用 GitHub Codespaces 来操作。

以下是详细步骤：

数据库连接失败（Unable to connect to the database）

请检查 Vercel 环境变量中 DATABASE_URL 的值是否填写正确，有没有多加 DATABASE_URL。修改后重新部署即可。

数据库连接失败（A migration failed to apply.）
1. 将你 fork 的 umami 仓库 clone 到本地，并进入仓库目录。git clone https://github.com/[你的 GitHub 用户名]/umami && cd umami
2. 在本地 umami 目录中创建一个 .env 文件，填入 DATABASE_URL= ，后面粘贴数据库连接地址（与 Vercel 环境变量中 DATABASE_URL 的值相同，可以直接复制过来）。
3. 在本地 umami 目录中执行以下命令：yarn install
  yarn build
4. 检查详细d报错信息，并根据不同的报错执行不同的修复命令
  如果是 02_add_event_data 错误则执行以下命令yarn prisma migrate resolve –applied “02_add_event_data”
  如果是 03_remove_casade_delete 错误则执行以下命令yarn prisma migrate resolve –applied “03_remove_casade_delete”
  等待命令执行完成，提示 Success! 则表示成功。
2024-11-11
一键部署 Umami 统计个人网站访问数据
谈到网站统计，大家第一时间想到的肯定是 Google Analytics。然而，我们都知道 Google Analytics 会收集所有用户的信息，对数据没有任何控制和隐私保护。

Google Analytics 收集的指标实在是太多了，有很多都是不必要的，没有博士学位可能都不太容易理解这些指标。

相比较而言，开源的网站统计工具可能更适合我们，他们可以私有化部署，同时尊重用户的隐私，可以完全控制自己的数据。这其中的佼佼者便是 Umami 与 Plausible。其中 Umami 架构更简洁，也更容易部署。具体优势如下：
- 简单易用，只跟踪关键指标，数据清晰易读。
- 可无限追踪网站和子域名，不受数量限制。
- 自托管部署可以绕过广告拦截器，有效避免 Google Analytics 等广告拦截器。
- 代码轻量，追踪脚本只有 2KB，支持 IE 等旧版浏览器。
- 支持多用户账号，提供共享链接，可以公开分享统计数据。
- 页面针对移动设备优化，可随时随地查看统计数据。
- 数据自主可控，不需要交给第三方，注重隐私。
- 代码采用 MIT 开源协议，开发者友好。
- 支持多语言，内置黑暗模式。
- API 开发友好，可以定制跟踪配置。
Umami 的数据都存放在数据库中，支持 MySQL、PostgreSQL 和 Clickhouse，对于小白来说部署起来还是有点小复杂。不过有了 Sealos 一键部署模板，这个问题就比较简单了，动动鼠标就行了，3 分钟即可解决战斗。

一键部署 Umami

首先通过以下链接打开 Umami 的应用模板：

https://cloud.sealos.io/?openapp=system-fastdeploy%3FtemplateName%3Dumami

只需要填一个参数 APP SECRET 即可，这个参数的值随便填一个字符串就行。然后直接点击「部署应用」。

部署完成后，点击确认跳转到应用详情页面，你会发现应用无法启动，因为这个模板同时创建了 PostgreSQL 数据库和应用，而数据库目前还不具备自定义初始化数据库的能力，等数据库后端升级到下个版本就可以自定义数据库啦，目前暂时需要我们稍微手动操作一下。

首先打开「数据库」：

进入 umami 数据库的详情页面：

直接点击「一键链接」：

便会进入数据库的终端：

通过以下命令新建一个数据库 umami：
```
create database umami;
```
最后退出终端，打开「应用管理」，进入 umami 应用的详情页面，可以看到应用已经启动成功了。查看日志：

接入 Umami

点击外网地址即可直接打开 Umami 的 Web 界面：

默认的用户名是 admin，密码是 umami。

进入管理界面后，要先创建一个网站：

点击「编辑」进入网站设置，复制跟踪代码，到自己网站的 <head> 内粘贴即可。

最终效果如下：

重写路径

Umami 是一个极其尊重隐私的网站统计服务，它与广告技术和监视资本主义无关，也不会收集任何个人数据。即便如此，它还是有可能会被某些广告过滤规则所屏蔽。

为了避免被广告过滤器误杀，我们可以重写 js 脚本的路径，按照官方文档，我们只需要添加一个环境变量即可。

Sealos 添加环境变量非常简单，在应用详情页面中点击「变更」：

展开高级配置，点击「编辑环境变量」：

添加环境变量 TRACKER_SCRIPT_NAME=xxx，这个值可以随便写，也不需要以 .js 作为后缀，这样更容易绕过广告过滤器的检测。

确认之后，点击「变更」，等待实例重新启动成功。再次打开 Web 界面，你会看到跟踪代码里的 js 链接已经变了：

Sealos 也提供了 Plausible 的一键部署模板，对 Plausible 感兴趣的小伙伴可以去试试：
- https://cloud.sealos.io/?openapp=system-fastdeploy%3FtemplateName%3Dplausible
2024-09-30