Cloudflare Page 部署 Iris Analytics 网站分析

26 年 7 月 25 日 星期六
2411 字
13 分钟

以前一直使用 Vercel 自部署的 umami 作为网站的分析工具,使用久了就发现数据的展示不是很直观。而且因为 Supabase 的免费 PostgreSQL 的数据连接池存在访问限制,每次我在查看网站分析数据时都会遇异常。虽然这对网站的统计没什么影响,过去几年我也别的办法解决这个问题,除了自部署 PostgreSQL 或着更换数据库似乎也没有更好的解决办法。

直到我看到了 HanAnalytics 这个项目,借助 Cloudflare 提供的分析引擎,除了网站事件和报告这些附加功能,大体上都是相似的。比较好的一点是,依靠 Cloudflare 不用担心数据库的访问问题。

但是,HanAnalytics 有些过于简陋了,并不符合我的行为习惯,相比 umami 切换分析网站并不是很顺手。所以,我开始把这个项目重构为 Iris Analytics,增加了更清晰的总览页面,以及参考 umami 增加了一些附加功能。

前言

首先,Iris Analytics 部署在 Cloudflare Pages 上,相比其他静态部署平台没有访问上限,只使用的 Pages Functions 存在每天 10w 次的请求限制,对于 Iris Analytics 使用 Pages Functions 请求和写入分析数据来说是足够的。

Workers Analytics Engine 是 Cloudflare 提供的一个的时序数据库,能够通过 Pages Functions 将请求数据写入分析数据集,并通过与 SQL 相似的语法查询数据。所以,Iris Analytics 的数据统计依靠 Pages Functions 和 Workers Analytics Engine 同时完成。

预览

我已经部署好了一个项目,如果你想先看看效果,可以前往我的 Iris Analytics 分析站点体验一下。

如何部署

在 Github 中通过 Iris Analytics 创模板创建私有项目,或着通过 fork 创建项目。

复制Iris Analytics项目

然后前往 Cloudflare,在侧边栏找到 计算 > Worker 和 Pages,然后点击创建应用程序

进入Cloudflare Pages主页

进入页面后,需要先切换到 Pages 部署页面,默认进入的页面是 Worker 部署,直接部署项目会部署失败。

切换到Pages部署页面

进入 Pages 部署页面后,我们需要选择 导入现有 Git 存储库

点击从Git仓库部署

选中我们刚才创建的 Iris Analytics 项目,点击开始设置。在构建设置中选择切换框架预设为 Vue,其他保持默认,然后点击保存并部署。

选择iris项目部署
iris项目部署设置

等待部署完成完后,我们就进入部署后的网页进行预览了。

项目部署完成

我们可以看到预览时的数据空的,因为这个时候还没有数据,所以接下来我们还要做些配置。

预览构建项目

创建分析引擎数据集

我们还需要到 Cloudflare 中创建一个分析引擎,在侧边栏找到 存储和数据库 > Analytics Engine,这时候分析引擎默认是空的,点击右上角创建一个数据集。然后,我们选择创建一个空数据集。

创建分析引擎数据集
创建空数据集

填写数据集的名称,数据集名填写为 AnalyticsBinding,数据集构建名填写为 AnalyticsDataset

填写数据集名称

分析数据集创建后,默认不会显示,只有等到存储了分析数据后,才会在分析引擎中显示出来。这是正常的,不需要重复创建分析引擎数据集。

数据集创建成功

Pages 绑定分析引擎数据集

创建好了分析引擎的数据集后,我们回到刚才部署好的 Pages 项目的设置页中,点击跳转到绑定配置

进入Pages绑定配置

然后点击添加,点击添加 Analytics Engine。

点击添加绑定配置
选择绑定Analytics-Engine

输入之前我们创建数据集的那两个名称,分别是 AnalyticsBindingAnalyticsDataset,输入完成后点击保存。

输入绑定的数据集名称

绑定完成后,绑定配置位置会显示我们刚才输入的数据集配置。

创建读取分析引擎的 API 令牌

上面的操作我们给 Pages 绑定了分析引擎的数据集,但是我们是需要从分析引擎中查询的,这就需要给我们的 Pages 添加一个用于读取和写入分析引擎的 API。所以,还需要去创建一个用于访问分析引擎的 API。

我们点击 Cloudflare 页面右上角的帐号图标,在下拉选项中点击配置文件。

进入账户配置文件

在侧边栏中进入 创建API令牌,点击创建令牌,并且选择创建自定义令牌

创建API令牌
选择创建自定义令牌.png

然后,我们在创建自定义令牌配置中,选择账户权限为 账户分析读取,然后点击继续显示摘要,并点击创建令牌。

确定创建令牌

令牌创建后,我们把令牌复制下来,保存在一边。

复制分析引擎读取令牌

配置令牌 API 环境变量

有了分析引擎的访问令牌,就可以回到部署的 Pages 项目中配置环境变量了。在 Iris Analytics 项目中,CLOUDFLARE_ACCOUNT_IDCLOUDFLARE_API_TOKEN 的配置是必须的。

env
# Cloudflare Workers ID
CLOUDFLARE_ACCOUNT_ID =

# Cloudflare API token
CLOUDFLARE_API_TOKEN =

我们先回到 Workers 和 Pages 页面,取一下 Worker 的账户 ID,先保存起来。

复制worker账户ID.png

然后,我们进入最开始部署的 Iris Analytics 项目的设置页面,找到侧边栏的变量和密钥,点击添加。

点击配置环境变量

添加 CLOUDFLARE_ACCOUNT_ID 变量,把刚才在 Workers 和 Pages 复制的账户 ID 粘贴进去,点击保存。

环境变量-添加账户ID

添加 CLOUDFLARE_API_TOKEN 变量,把上面复制保存的分析引擎的访问密钥粘贴进去,点击保存。

环境变量-添加API密钥

最后,我们点击顶部的部署去重新部署一下,让 Pages 配置都生效。

前往重新部署项目
点击重新部署项目

配置完成后,到这里 Iris Analytics 的功能基本上都能够使用了,只需要给对应的站点添加分析统计脚本就行了。

获取追踪脚本

Iris Analytics 的追踪脚本,主要通过唯一 id 来区分,只需要修改域名和 data-website-id 就可以在不同站点中追加了。

js
<script defer src="https://xxx.pages.dev/tracker.min.js" data-website-id="your_site_id"></script>

不过,为了方便快速生成每个站点的追踪脚本,我在设置中增加了一个集成工具,输入每个网站的标识,就可以快速复制出追踪脚本了。

追踪脚本集成工具

我们把追踪脚本加到对应的站点中,当网站有访问数据时,再次访问 Iris Analytics 就有数据了。

白名单配置

默认情况下,网站的分析 API 是公开的,这意味着任何人都能够通过追踪脚本往分析引擎的数据集里写入数据。也就是说,别人可以把你的追踪脚本挂到网站,污染你的分析数据集。所以,我们就需要通过白名单的方式,规定哪些网站传入的数据可以写入到数据集中。

不同于 umami 通过数据库唯一生成的网站追踪脚本, Iris Analytics 使用了网站唯一 ID 的方式生成追踪脚本。所以需要同时指定网站的唯一 ID 和域名,来对追踪网站传入数据进行双向验证。

env
# 可统计的白名单,格式 WebsiteID | 域名,换行分割
CLOUDFLARE_WEBSITE_WHITELIST =

我们回到 Pages 的环境变量设置,添加 CLOUDFLARE_WEBSITE_WHITELIST 变量

增加白名单环境变量

白名单格式每行一个规则,每行的左边是网站ID,中间使用 | 分割,右边是网站域名

编辑白名单环境变量

保存完成后,需要重新部署 Pages 才会生效,重新部署后回到 Iris Analytics 的总览页就能看到效果了,之前不在白名单的数据也会被过滤。

登录授权

如果不想让自己网站的分析数据让别人看到,可以在环境变量中添加 CLOUDFLARE_WEBSITE_PWD 变量。登录授权正常有效期为 7 天,如果期间访问网站会自动滚动续期。

env
# 网站访问密码 (不设置即无需密码访问)
CLOUDFLARE_WEBSITE_PWD =
编辑登录授权变量

添加完成登录授权密码后,重新部署一下 Pages 项目,重新访问 Iris Analytics 时就会显示登录页面了。现在只有输入了正确的密码,才会跳转到主页。

登录授权页

结语

到这里我们就有了一个网站分析站点,不用再担心数据库的连接问题,比起通过绑定其他平台的数据库来存储分析数据,Iris Analytics 建立在 Cloudflare Page 和 Cloudflare Analytics Engine 的服务上,不用担心数据丢失的问题。

虽然没有 umami 那样能够随时迁移,但作为一个开源平替的网站分析器也足够了。当然,Iris Analytics 也可以和其他网站分析器共存,使用多个网站分析追踪器的网站也很常见。

如果想在第一时间看到所有站点的总览数据,那么 Iris Analytics 会满足你的需求。

文章标题:Cloudflare Page 部署 Iris Analytics 网站分析

文章作者:rowink

文章链接:https://exi.ink/posts/cloudflare-page%E9%83%A8%E7%BD%B2iris-analytics%E7%BD%91%E7%AB%99%E5%88%86%E6%9E%90

最后修改时间:


商业转载请联系站长获得授权,非商业转载请注明本文出处及文章链接,您可以自由地在任何媒体以任何形式复制和分发作品,也可以修改和创作,但是分发衍生作品时必须采用相同的许可协议。
本文采用CC BY-NC-SA 4.0进行许可。