曲折的umami接入经历（曲折的意思是什么）

最近在开发运营的一个网站正好有数据埋点的需求，初步的需求就是统计pv、uv，希望接入一个轻量、开源、简洁、对接入方友好（最好直接在某个入口文件插入一行代码就能搞定）的埋点服务。

正好本人之前正好用过一个这样的集埋点、网站流量监控于一体的开源、轻量的服务——umami，本来自信得以为在网络流畅的情况下，一个小时就能搞定的事情，整整耗费了我一天一夜。

好，下面开始正题

1、umami是什么

官网地址：https://umami.is/

github地址：https://github.com/umami-software/umami

1.1 官网介绍：

英文解释晦涩？没关系，我们问问chatgpt

1.2 搜索引擎问问

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

https://cloud.tencent.com/developer/article/2069639

各位看官如果通过1.2的教程轻松完成安装配置，并且访问被监测网站可以正常收集到访问数据，那么后续的内容可以根据喜好自行选择，但是如果：

1. 你遇到了服务器上glibc版本问题导致的无法安装node18.xx
2. 被监测网站是nuxt服务，不知道怎么在nuxt服务上集成umami
3. 配置之后，收集数据调用的是/api/collect接口，这个接口出现跨域和404问题
4. 等等其他

那么，本文大概率有你需要的方法，请耐心看完。

2、开整

2.1 centos的glibc版本问题

1、安装nvm：

linux 上使用 nvm

https://zhuanlan.zhihu.com/p/613428123

2、安装node（被监测nuxt项目要求版本16.20.2）

[root@centos75 ~]# nvm install 16.20.2

3、安装git

linux安装git步骤；基于yum、dnf、源码安装【非常详细】_yum git-CSDN博客

https://blog.csdn.net/lh155136/article/details/131210824

4、安装yarn

npm install -g yarn

5、下载源码、 安装依赖

git clone https://github.com/umami-software/umami.git
cd umami
yarn install

至此，第一个坑出现了，见下图：

此时，我们的一般解法是什么？

nvm ls-remote

输出如下：

我们选择18.19.1

nvm install 18.19.1

还很顺利，继续

nvm use 18.19.1
node -v

node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)

一番搜索，发现是centos7 glibc版本问题，所幸找到了大佬发布的这篇文章：

CentOS7 升级 Glibc 2.17 到2.28

https://roy.wang/centos7-upgrade-glibc/

如果，执行完没报错，但是node use之后依然报上面的glibc错误，建议多试两遍。

2.2 第二个问题（nuxt服务配置umami）

1、官方文档

Useful links - Umami https://umami.is/docs/useful-links这个链接下有相关nuxt的集成链接

打开是这个链接：GitHub - ijkml/nuxt-umami: Umami Analytics built for Nuxt

https://github.com/ijkml/nuxt-umami

2、配置

umami网站配置：

1)新建website

2)查看domain和websiteID

1）nuxt项目中添加nuxt-umami依赖

2）nuxt.config.ts配置

字段解释：

第二个坑，一定要在appConfig下边配置，而不是在app或者其他下边配置，否则不生效

2.3 umami版本问题

如果你某个配置出现问题，可能会出现umami 2.x版本的服务，而监测网站收集数据走的默认版本1.x的上报接口：/api/collect，因此控制台会出现这个接口404，解决的方法：

按照GitHub - ijkml/nuxt-umami: Umami Analytics built for Nuxt

https://github.com/ijkml/nuxt-umami

和2.2 严格配置nuxt.config.ts

3 效果

正所谓，山重水复疑无路柳暗花明又一村

至此，终于完成了一个轻量版的网站访问记录监控服务umami的接入，有什么要总结的吗？有！！！就是这篇文章，希望各位看客少走弯路吧