Powered by: 🚀 NextJS + ✨ Redis + ▲ Vercel
不蒜子计数访问慢?总是遇到 502 错误?那就试试 Vercount!这是一个完美的不蒜子替代方案。
Vercount 是一个基于 NextJS 和 Redis 的高效网站计数器,具有以下特点:
- 极速响应:服务器响应时间在 10ms 以内。
- 高可用性:支持中国加速版本或 Vercel 全球 CDN,确保 99.99% 的可用性。
- 精准统计:使用 POST 请求,克服传统 Referrer 方法在移动端和某些浏览器上的不足。
- 安全防护:采用 JSON 回调方式,杜绝 CSRF 攻击风险,了解更多请查看:JSONP。
- 自动数据同步:无需手动操作,
site_pv
、site_uv
和page_pv
数据会自动同步。 - 无缝兼容:支持不蒜子的
span
标签,轻松切换。 - 持久数据存储:使用 Redis 定期备份,确保数据不丢失。
- Serverless 架构:通过 Vercel Serverless Functions 提供后端支持,保证 99.99% 的可用性。
- 自托管:支持自托管,可以部署到任何支持 NextJS 的平台。
不蒜子虽然是个不错的计数器,但也有明显的不足之处:
- 速度慢,容易出现 502 错误。
- 使用过时的 Referrer 方法,导致在移动端和某些浏览器上统计不准确。
- JSONP 回调存在安全隐患,易受 CSRF 攻击,了解更多请查看:JSONP。
Vercount 旨在解决这些问题,让网站计数器更快、更稳定、更安全。无需复杂部署,只需添加一个 script 标签即可使用。未来我们还会增加更多功能,比如自定义统计数据等。
如果你需要在 React 项目中使用 Vercount,可以使用 vercount-react。
将以下 script(中国访问优化)添加到你的网站中:
<script defer src="https://cn.vercount.one/js"></script>
或者使用这个 script(海外访问优化):
<script defer src="https://events.vercount.one/js"></script>
添加 script 后,使用以下标签开始统计:
本文总阅读量 <span id="vercount_value_page_pv">Loading</span> 次
本站总访问量 <span id="vercount_value_site_pv">Loading</span> 次
本站总访客数 <span id="vercount_value_site_uv">Loading</span> 人
只需替换不蒜子的 script 标签,其他保持不变,Vercount 兼容 Busuanzi 的 span 标签。数据会在首次访问时自动同步,后续访问也会保持同步(前提是不蒜子正常运行)。
替换为:
<script defer src="https://cn.vercount.one/js"></script>
Vercount 支持不蒜子的 span 标签,你可以继续使用原有的标签,或者推荐切换到 Vercount 的专属 ID 标签,以便后续功能扩展:
<span id="vercount_value_page_pv">Loading</span> 次
<span id="vercount_value_site_pv">Loading</span> 次
<span id="vercount_value_site_uv">Loading</span> 人
- 页面浏览量:每访问一次加一。
- 独立访客量:通过用户的 UserAgent 和 IP 地址判断。
这是一个公益项目,诚挚请求您的支持。即使是小额捐助,也能帮助我们维持项目的长期运转。
📝 支出明细
目前,Vercount 项目的运营费用由我个人承担,包括 Vercel 的费用和数据库服务器的费用。每月和每年的支出明细如下:每月支出:
- Vercel Pro 订阅费用:$20 USD
- Vercel Function Invocations 费用:$1 USD
- Edge Middleware Invocations 费用:$1 USD
- 总计:约 ¥154 CNY
每年支出:
- 数据库服务器费用:$40 USD
- 域名费用:$15 USD
- 总计:约 ¥390 CNY
随着项目规模扩大,我希望能得到您的支持。
您可以访问我的个人网站捐赠页面进行捐赠。
或者支持我其他的项目,比如我个人运营的 GPT Plus Share,可以共享使用多个 ChatGPT Plus 账户,与官方界面相同,起步价仅需每月 17 人民币!
最终解释权归 EvanNotFound 所有。
本指南将帮助你搭建自己的 Vercount 实例。整个设置分为两个主要部分:
- Redis KV 存储
- NextJS 应用程序
- 一台安装了 Docker 和 Docker Compose 的服务器
- Vercel 账号(或其他能够托管 NextJS 应用的平台)
- 基本的命令行操作知识
首先,我们需要设置用于存储计数器数据的 Redis 实例。在你的服务器上创建一个新目录:
mkdir vercount-redis
cd vercount-redis
创建 docker-compose.yml
文件:
services:
redis:
image: redis:latest
environment:
- REDIS_PASSWORD=${REDIS_PASSWORD}
command: redis-server --requirepass ${REDIS_PASSWORD}
volumes:
- ./data:/data
restart: unless-stopped
ports:
- "6379:6379"
healthcheck:
test: ["CMD-SHELL", "redis-cli -a ${REDIS_PASSWORD} ping | grep PONG"]
interval: 1s
timeout: 3s
retries: 5
serverless-redis-http:
image: hiett/serverless-redis-http:latest
ports:
- '8080:80'
environment:
- SRH_MODE=env
- SRH_TOKEN=${REST_TOKEN}
- SRH_CONNECTION_STRING=redis://:${REDIS_PASSWORD}@redis:6379
restart: unless-stopped
depends_on:
- redis
创建 .env
文件:
REDIS_PASSWORD=你的安全密码
REST_TOKEN=你的安全令牌
启动 Redis 服务:
docker-compose up -d
-
从 GitHub 克隆 Vercount 仓库:
git clone https://github.com/EvanNotFound/vercount.git cd vercount
-
创建包含 Redis 配置的
.env
文件:KV_URL=redis://:你的安全密码@你的服务器IP:6379 KV_REST_API_URL=http://你的服务器IP:8080 KV_REST_API_TOKEN=你的安全令牌
-
部署到 Vercel:
vercel deploy
或者部署到你选择的支持 NextJS 的托管平台。
-
更新你的域名 DNS 设置,指向你部署的应用程序。
-
在你的网站中添加脚本标签,记得替换为你自己的域名(Vercel 上面绑定的域名),比如:
<script defer src="https://你的域名.com/js"></script>
-
在 HTML 中添加计数器元素:
阅读次数:<span id="vercount_value_page_pv">Loading</span> 访问次数:<span id="vercount_value_site_pv">Loading</span> 访客数量:<span id="vercount_value_site_uv">Loading</span>
- 务必使用强密码保护 Redis
- 配置适当的防火墙规则以限制 Redis 访问
- 确保 REST_TOKEN 安全且不被公开
- 定期更新应用程序和依赖项
- 如果计数器不更新,检查 Redis 连接状态
- 验证 Redis 凭据是否正确
- 检查应用程序日志中的错误信息
- 确保端口正确开放且可访问
如需其他帮助,请在 GitHub 仓库提出 Issue。
- 考虑使用 CDN 加速静态资源
- 适当配置 Redis 内存使用
- 根据访问量调整服务器配置
Q:如何迁移现有的不蒜子数据? A:首次访问时,Vercount 会自动同步不蒜子的数据。
Q:如何查看访问统计数据? A:目前可以直接通过 Redis 命令查看,或者用 TinyRDM 等工具查看,后续会开发管理界面。