之前由于 Umami 自建网站访问量统计系统 有很多人跟我说云服务基本白嫖没有自己的服务器，如何进行搭建。此处即可使用 Vercel 来进行免费构建服务。

所需项目地址：Umami

Umami的相关信息可以看我之前的文章，此项目还需要 MySql/Postgresql，可使用收费/免费服务，此处不做推荐。

Vercel介绍

网站链接：Vercel

• 免费 20 GB 空间
• 提供 Serverless 服务
• 免费自定义域名，支持 HTTPS
• 不限站点与 Serverless API 数量
• Serverless 支持 Node.js, Go, Python, Ruby
• 提供 Google Cloud 与 AWS 节点，有香港与台湾节点
• 支持 now.sh CLI，GitHub，GitLab，Bitbucket 导入/部署

对于白嫖党还是非常友好的（MJJ狂喜

构建Umami

Fork项目

打开 Umami 项目地址，将项目Fork到自己的仓库。

在 Vercel 主页新建项目

点击 Create a New Project 新建项目

选择刚刚 Fork 的仓库

找到 Umami 然后点击 Import

构建 Umami

此处需要增加两个环境变量，其变量名以及值格式如下：

1
2
3
4
5
6
7

变量名：HASH_SALT      值：自定义字符串
变量名：DATABASE_URL   值：数据库链接字符如下所示：
#在此之前请将SQL文件下的数据库文件导入数据库
postgresql://username:mypassword@localhost:5432/mydb
mysql://username:mypassword@localhost:3306/mydb

变量名：TRACKER_SCRIPT_NAME     值：自定义  （此变量用于更改脚本名称，可不填写，但推荐填写，否则脚本会被拦截，会致使统计数据不准确。

添加完成后，点击 Deploy 即可开始构建

构建完成

等待两三分钟即可构建完成

初始信息如下：

1
2

账号：admin
密码：umami

此时即可登录配置

绑定自定义域名

选择 Settings -> Domains 输入需要绑定的域名并且选择 Add 添加

根据提示设置相关解析，然后即可访问。

成功访问

关于使用 Vercel 构建 Umami 修改 umami.js 文件名的问题

在 SETTINGS -> ENVIRONMENT VARIABLES 里面新增环境变量 TRACKER_SCRIPT_NAME 然后赋值后重构项目即可。

使用外挂 JS 的方式来统计数据，虽然可以统计真实的访客记录，但是会被 uBlock 此类的广告拦截插件给直接拦截掉，以至于无法准确的获取访客数据。

简单了解了下此类插件的拦截策略，是通过检测脚本文件名进行的。可以通过修改 JS 文件名来进行防止统计信息脚本被拦截。

方法一（推荐）

官方在 1.26.0 版本上增加了 TRACKER_SCRIPT_NAME 这个环境变量来提供修改统计脚本的操作，这也是本站现在使用的方法。

但是此环境变量中的值，有些情况会失效，更换即可，原因未知。

打开目录中的 .env 文件，添加以下文本：

1

TRACKER_SCRIPT_NAME=自定义名称

输入完成后保存即可。

重启服务，修改网站链接中的脚本地址

重启UMAMI服务

访问网址，修改已生效

使用 CloudFlare Workers修改名称

这个方法是以为大佬在项目讨论区分享的，也试了以下，效果一致。

新建CloudFlare Workers

左侧选择 Workers，然后创建服务

选择启动器，然后创建服务

服务名称自定义，启动器选择 HTTP 处理程序。

然后点击快速编辑，并将以下信息 修改输入 并 保存。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

const ScriptName = '/umami.js';     //自定义脚本名称
const Endpoint = '/foo/bar';
const UmamiUrl = 'https://bcon.roywang.cn';  //UMAMI服务域名地址。
const corsHeaders = {
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET,HEAD,POST,OPTIONS',
    'Access-Control-Max-Age': '86400',
};
const ScriptWithoutExtension = ScriptName.replace('.js', '')
addEventListener('fetch', event => {
    event.passThroughOnException();
    event.respondWith(handleRequest(event));
})
async function handleRequest(event) {
    const pathname = new URL(event.request.url).pathname
    const [baseUri, ...extensions] = pathname.split('.')
    const clientIP = event.request.headers.get("CF-Connecting-IP")
    if (baseUri.endsWith(ScriptWithoutExtension)) {
        return getScript(event, extensions)
    } else if (pathname.endsWith(Endpoint)) {
        return postData(event)
    }
    return new Response(null, {status: 404})
}
async function getScript(event, extensions) {
    let response = await caches.default.match(event.request);
    if (!response) {
        response = await fetch(UmamiUrl +"/umami.js");
        var js = await response.text();
        js = js.replace("/api/collect", Endpoint);
        response = new Response(js, {
            headers: {
                ...response.headers,
                ...corsHeaders,
                'Access-Control-Allow-Headers': response.headers.get('Access-Control-Request-Headers'),
            },
        })
        event.waitUntil(caches.default.put(event.request, response.clone()));
    }
    return response;
}
async function postData(event) {
    const request = new Request(event.request);
    request.headers.delete('cookie');
    response = await fetch(UmamiUrl +"/api/collect", request);
    var js = await response.text();
    response = new Response(js, {
        headers: {
            ...response.headers,
            ...corsHeaders,
            'Access-Control-Allow-Headers': request.headers.get('Access-Control-Request-Headers'),
        },
    });
    return response;
}

文件名称修改成功。

CloudFlare Workers 绑定自定义域名

域名需要 NS 接入CloudFlare，增加解析 至 8.8.8.8，并且打开 CloudFlare 代理

在左侧选择 Workers，并选择添加路由。

输入路由，以及选择服务、环境。

此处有个误区，路由在域名后面需要添加 /* 很多用户在使用时都会犯这个错误。

修改网站中的脚本地址。

第一种方法最简单，也最推荐，当然如果服务的线路非常差，比CloudFlare 还差的话，推荐使用第二种方法。

如后续还被屏蔽，只需重新修改脚本名称即可。

由于站点较多，而且为了保护隐私，比较抵触使用 CNZZ 或 GOOGLE 等第三方的访问量统计系统。最近发现了一个统计网站访问量的工具。也使用了一段时间，现在将搭建教程分享出来：

项目介绍

项目地址：Umami

UMAMI 基于Node.js 开发，并且支持 MySQL 或 Postgresql 等数据库存储方式，可以将数据掌握在自己手中。并且 UMAMI 还提供了非常详细的流量分析可视化的界面，UI 体验以及统计准确度十分不错（此处所讲统计精准度为实际真是访客的访问量，有可能一天只有1-2请做好心理准备。）

官方文档：Umami Docs

环境需求

由于 Umami 基于Node.js 开发，采用 MySQL 或 Postgresql 数据库存储数据，所以配置要求如下：

• Node.js 14.18 或更高的版本
• 服务器上安装了 MySQL 5.7 或以上 或 Postgresql 12.14 或以上

2022-7-22 更新：今天更新 umami 时，发现更换了 umami 构建安装方式，遂更新一波，可能配图不正确，但步骤基本一致。

2023-5-3更新：更新了一下 Node.js 的版本，以及文章上的一些错误。

2023-8-21更新：程序守护更改为 PM2 管理，进而放弃 systemctl ，其在我这次将服务迁移到国内服务器内出现了很大的问题，以及文章上的一些错误。

2024-2-8更新：更新了Node.js 的版本，以及文章上的一些错误。

环境配置

本文基于宝塔面板，使用 MySQL 进行安装

安装配置 Node.js

此处 MySQL 安装方式此处不再进行演示，如您已安装 Node.js 并且配置成功，则此步可以跳过。

安装 Node.js 命令如下

1
2
3

cd /www/server/nodejs
wget https://nodejs.org/dist/v21.6.0/node-v21.6.0-linux-x64.tar.gz
tar -xzvf node-v21.6.0-linux-x64.tar.gz

设置 Node.js 全局变量：

在宝塔面板打开 /etc/profile 文件，将以下配置输入文件最后面，并保存

1
2

export NODE_HOME=/www/server/nodejs/node-v21.6.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

输入以下命令用于重载全局配置。

1

source /etc/profile

输入 node -v 和 npm -v 返回以下信息即配置完成

配置成功

安装 Yarn

1

npm install -g yarn

查看版本信息，如遇 yarn：未找到命令，请看：《NodeJS 和 npm 配置全局变量》

国内服务器此步骤由于 Node.js 没有大陆节点，速度较慢。请耐心等待

部署 Umami

克隆仓库

1
2

cd /www/wwwroot
git clone https://github.com/umami-software/umami

安装依赖

国内服务器此步骤由于 Node.js 没有大陆节点，速度较慢。请耐心等待

千万不要使用淘宝的 registry 镜像源！！！！！！！！

否则安装依赖会出错！！！！！！！！

1
2

cd umami
yarn install

依赖安装完成

配置数据库

创建数据库：打开宝塔面板，点击左侧 数据库->添加数据库。输入数据库相关信息即可。

配置 .env 文件

在 umami 文件夹中新建一个名为 .env 的文件

文件具体配置如下：

1
2

DATABASE_URL=mysql://用户名:密码@localhost:3306/库名
HASH_SALT=roywang (加密字符 随机即可)

配置示例

构建 Umami

千万不要使用淘宝的 registry 镜像源！！！！！！！！

否则安装依赖会出错！！！！！！！！

1

yarn build

构建完成

导入数据库

1

yarn update-db

运行

1

yarn start

默认用户名：admin 默认密码：umami

此时即可通过 IP:3000访问网站了，但为了方便使用，还需进行以下操作

其他配置

设置程序守护，此处以 PM2 为例

打开目录 umami 安装目录

1
2
3
4
5
6

#全局安装 pm2
yarn global add pm2

pm2 start yarn --name umami -- start
pm2 startup
pm2 save

设置网站反代

宝塔新建站点 -> 打开SSL - > 反向代理 ->添加反向代理

目标 URL 填写：http://127.0.0.1:3000

配置反代

配置站点

登录 Umami

默认账号：admin
默认密码：umami

添加站点，并将代码放到网站

升级配置

此时必须保证 Umami 没有正在运行，重新 拉取仓库、安装依赖、构建项目、启动即可

1
2
3
4
5
6
7
8
9
10

#拉取仓库
git pull
#安装
yarn install
#构建项目
yarn build
#更新数据库
yarn update-db
#启动项目
systemctl start umami

后语

特别强调，无论国外源多慢都强烈要求使用国外源。在使用淘宝源时，构建会失败！！！！！！！！！！！！！

**解决了统计JS被广告拦截插件给屏蔽的问题：**https://bcon.roywang.cn/umami-js-name/

如你所见，等你看到这篇文章的时候，我博客的域名已经取消的备案。

至于取消备案的原因，主要还是因为监管逐渐变的更加严格，而且网站已经有了一定的访问量，怕引发一些不必要的麻烦，遂取消了备案。具体的原因会在后续的文章中给出。

而现在博客已经迁移到了 Vercel 上了，最初是要迁移到 CloudFlare Pages 上的，但 CFP 到国内的可用性真的够拉的。迁移到 Vercel 后，许多以前做的优化已经逐渐的不够用，不适用了。为了保证博客的体验，需要做新一轮的优化。所作优化，后续会以流水账的形式以博文的形式更新。

首先要做的就是对外部引用资源的优化，博客现在使用的流量统计方案，以及博客的使用的评论方案，一直以来是托管在腾讯云香港的轻量应用服务器上的，但香港地区的线路越来越差，极其影响体验，遂进行做了一部分优化。

正文

翻了翻 Umami 的文档，官方其实是支持引用的 JS资源 托管到其他地方的，然后将数据发送到 Umami 的服务端上，仅需做出一部分小的改动。

此方法同样适用于那些服务域名被插件屏蔽的同学。

首先，你需要将使用 Umami 版本的 JS资源 保存下来，将其部署到你的 CDN 上。

请注意，不要使用不同 Umami 版本的 JS资源。

资源的名称需要与你服务中设置的名称一致。

原有引入 JS资源，格式如下：

1
2
3
4

<script async defer
  src="http://youUmamiserversdomain/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
></script>

其中：

• http://youUmamiserversdomain/umami.js 为你 Umami 服务中外部调用 JS资源 的地址。
• data-website-id 为你在服务中生成的网站对应的ID。

而如果希望将 JS资源 托管在他处，则需要引用的 JS资源 所在的位置，请保证这个地址是可用的，以及指明服务所在位置，需要添加 data-host-url 参数，格式如下：

1
2
3
4
5

<script async defer
  src="http://youblogdomain.com/umami.js"
  data-website-id="94db1cb1-74f4-4a40-ad6c-962362670409"
  data-host-url="http://youUmamiserversdomain"
></script>

其中：

• http://youblogdomain.com/umami.js 为你部署的 JS资源 的地址
• data-website-id 为你在服务中生成的网站对应的ID。
• http://youUmamiserversdomain 为你服务所设置的域名。

至此 Umami JS资源 加速部署结束。

脚本加速之前属于一来一去，同样差的线路需要体验两次。加速之后，在加载脚本速度上会有质的飞跃，虽然还会向服务所在的域名发送采集到的相应数据，但总体来说速度上还是有明显差距的。

脚本虽小，但加速与否体验差别挺大。