使用 Vercel + Supabase 零成本部署 Umami

早些年用过友盟、51.la、百度统计、Google Analytics,各有各的优缺点,百度统计目前只允许备案网站使用,友盟和51.la体验效果不喜欢,Google Analytics 访问也不太好,权衡之下使用这款开源的网站统计服务——Umami。

使用 Vercel + Supabase 零成本部署 Umami - 第1张图片

根据官网介绍,Umami 是一款简单、易用、美观、轻量、快速、隐私、安全的开源免费网站统计工具,从部署到使用,都是简单、快速,体验也很满意。

官方文档介绍了多种部署方式,包括使用自己服务器,或者第三方平台,例如 Netlify、Heroku、Railway 等等,不过这些第三方平台一般都不提供数据库服务,所以我选择使用 Supabse 提供的免费数据库服务,以及 Vercel 的部署。

在使用前,先注册并登录好 GitHubVercelSupabase 三个平台,并在 GitHub 平台 Fork Umami 的项目仓库。

在 Supabase 建立数据库

2023_9130_supabase

在官网选择 Free 方案,进入 Create a new project 页面,按要求填写相关内容。Name 填写任意项目名,Database Password 可以使用下方工具 Generate a password 生成,并保存到记事本备用。

使用 Vercel + Supabase 零成本部署 Umami - 第3张图片

等待数据库建立,需要几分钟的时间。

建立之后,点击左下方的 Project Settings,选择 Database,找到 Connection string 中的 URL 一栏,复制内容,并将[YOUR-PASSWORD]替换为上一步生成的密码。

使用 Vercel + Supabase 零成本部署 Umami - 第4张图片

Supabase 平台的操作就结束了。

在 Vercel 部署 Umami

登录 Vercel 之后,点击右上角 Add New Project,并导入事先 Fork 的项目仓库。

使用 Vercel + Supabase 零成本部署 Umami - 第5张图片
使用 Vercel + Supabase 零成本部署 Umami - 第6张图片

在 Configure Project 中需要设置两个环境变量(Environment Variables)。

使用 Vercel + Supabase 零成本部署 Umami - 第7张图片

分别添加 DATABASE_URLHASH_SALT。前者是上一步在 Subabase 复制的 URL,记得替换自己的 Password;后者需要自己随意生成一长串字符串。最后点击 Deploy,等待两分钟。

使用 Vercel + Supabase 零成本部署 Umami - 第8张图片

如果有需要,可以先绑定好自己的域名,因为 Vercel 提供的域名在大陆无法访问。

使用 Vercel 自带的 Storage 数据库

Vercel 目前已经提供 PostgreSQL 数据库,无需其他服务,只需要按照上述教程,创建数据库,获取数据库地址,添加对应变量即可。

使用 Vercel + Supabase 零成本部署 Umami - 第9张图片
使用 Vercel + Supabase 零成本部署 Umami - 第10张图片
使用 Vercel + Supabase 零成本部署 Umami - 第11张图片

使用 Umami

按照上述步骤,Umami 已经部署成功了,通过绑定的域名进入网站,默认用户名和密码分别是 adminumami ,进入后台可以修改密码、设置语言,然后就可以添加网站了。

提示:如果需要删除网站,先将语言切换至 English,中文状态无法删除。

青山

君子可内敛不可懦弱,面不公可起而论之。

34 条评论

  1. 我用的是另外的统计,php直接安装就可以了,还是自建放心。

  2. 小胡同学已经转型成为技术博主了。

    1. @发泡鲸🤦‍♂️其实没啥技术。

  3. 试了一下,一次成功,就是会增加网站的打开速度!

    1. @TeacherDu如果搞个CDN,将那个js放到CDN上,或许会好一点。

  4. 有空可以弄下。

    1. @叶子你这个评论楼层显示有问题啊,我怎么成一楼了。

      1. @叶子现在可以了,修改了评论的顺序。

  5. 已经对流量这个问题很佛系了,所以就不折腾这个了。

    1. @老张博客🤡你折腾其他的东西也不少了。

  6. 之前也是用Vercel搭建了个,体验之后加载速度实在是太慢了,而且也想搞个memos,就整了个轻量服务器,所以就移到了轻量服务器里

    1. @koobai也不错,以后方便管理。

  7. 部署在 Vercel 也很方便,免去了很多维护的烦恼。就是要绑定自己的域名才能用 Vercel。

    1. @大大的小蜗牛对,国内访问的话,绑定自己域名。

  8. 网站流量想要变现的话估计还得 Google Analytics,很多公司只认这个

  9. 这里 `HASH_SALT` 的作用是什么呢?官方的文档好像都没有提到过,然后不使用的话也可以正常部署使用。

    1. @YeungYeah我也是根据别人教程来的,至于作用是什么,似乎是加密密码之类的。

    2. @YeungYeah给 .env 中的数据库信息那些字段加盐防逆向。感觉不是特别需要设置,能拿到数据库密码的人也可以轻易拿到 HASH_SALT。

  10. 缺点是不能显示来路关键词啥的

    1. @老刘提个issue,说不定会加上。