使用免费的 Cloudflare Workers 搭建 Serverless 站点计数服务

567 阅读1分钟

这是重构个人网站的前期准备之一。用于统计每个页面和整个站点的访问量。后续如果评论系统有不错的选择的话另说,不然也可能会再加入评论系统的相关内容整合在一起。

该项目技术栈:

  • Typescript
  • Cloudflare Wrangler
  • Worktop (封装 Worker 的常用方法和支持 Router)
  • Webpack

目前只有 Serverless 的实现,还没有 SDK,但可以封装 fetch 之类的调用,也非常简单。后续看是否需要,如果关注的人多起来,我也会多封装一些 SDK、工具脚手架之类的。


开始正文

使用说明

第一步,Fork 本项目,并 Clone 至本地。

第二步,配置环境

# 安装命令行
npm install -g @cloudflare/wrangler
# 登录 Cloudflare
wrangler login
# 创建 KV 存储桶
wrangler kv:namespace create "views" --env production

打开 wrangler.toml,修改以下配置:

  • account_id
  • zone_id
  • route
  • kv_namespaces 中的 id

通过 Github Actions 自动部署,或者手动执行 wrangler publish --env production

需要在仓库设置中,配置 Secrets。名称为: CF_API_TOKEN,传入 Cloudflare 的 API Token。

API Token 生成访问: dash.cloudflare.com/profile/api… ,选择使用模板 Edit Cloudflare Workers 创建即可。

配置成功后需要给 DNS 中添加一条 A 解析,设置为: 192.0.2.1 并通过 CDN 加速。

API

PUT /pv?slug=optional

QueryString 参数:

  • slug: string 可选

如果不传,或传入 total,则返回为总计点击量。

{
  "result": {
    "slug": "total",
    "pv": 10
  }
}

P.S. 其中,GET 请求也可以访问,但仅当 PUT 请求时,会额外将访问计数累加。

GET /list?slugs=optional,optional

QueryString 参数:

  • slugs: string 可选,请将 string[] 用 , 分隔

如果不传,则返回为总计点击量。

{
  "result": [
    {
      "slug": "total",
      "pv": 10
    },
    // ...
  ]
}

LICENSE

Apache License 2.0