之前写过一篇关于给网站装上多种风格可选的萌萌计数器的文章,后来服务器搬迁,在下贪图方便,就干脆用回了 journey-ad 大佬本人的服务。只不过作者大佬的服务使用人数水涨船高,弄得计数器时常崩溃,使用体验还是一言难尽,正赶上延迟去学校报到,就打算抽空把 Moe-counter 重新部署回来。

当在下重新浏览 Moe-counter 项目的时候,正好发现一个叫做 moe-counter-cf 的项目,它支持把 Moe-counter 部署到 Cloudflare Workers。这就意味着一个属于自己的持续稳定,且无需服务器支持的萌萌计数器已经成为了可能,只可惜作者 dsrkafuu 大佬的部署教程依旧是三言两语带过,对于没怎么接触过 CF Workers 操作的在下来说,上手部署还是有些难度。好在在下东搜西查,最终还是成功将 moe-counter-cf 部署下来,遂将操作流程予以记述,以备后用。

创建一个 Cloudflare Worker

这一步需要拥有一个 Cloudflare 账号,若不曾拥有,须注册之。另外,还需准备一个域名,由于 Cloudflare Workers 自动分配的域名处于被墙的状态,因此若不绑定自有域名,计数器将无法在中国大陆地区成功加载。

找到侧边栏的 Workers,点击创建服务。服务名称填 moe-counter-cf,启动器就选择默认的 HTTP 处理程序

再选择侧边栏 Workers 下的 KV,点击创建命名空间,名称自拟。创建完成后点击查看刚刚创建的 KV,记下这个 KV 的命名空间 ID

接下来要将准备好的域名转移到 Cloudflare 解析,选择侧边栏中的网站,点击添加站点,添加上准备好的域名,按照页面出现的提示前往域名的注册商处更改 NS 记录,NS 记录的更改需要一定时间,在 NS 记录同步完成之前,可以先进行下面不涉及域名操作的步骤。

当 Cloudflare 提醒站点添加成功,进入网站,选择准备好的域名,看到页面右侧下方,找到 API,记录下区域 ID 账户 ID

选择侧边栏中的 DNS,添加一个 A 记录,自拟一个三级域名给 moe-counter-cf,IPv4 地址可以随便填,例如 8.8.8.8,记得开启代理的橙色云朵。

回到刚刚创建的 Workers,点击触发器,找到路由,选择添加路由,填写刚刚添加的三级域名 你的域名/* ,如 count.champhoon.xyz/* ,下面的区域就选择对应的二级域名,设置完成别忘记保存。

至此,Cloudflare Worker 的创建工作就此完成。

配置 moe-counter-cf

前往 moe-counter-cf 的项目地址,并将项目 fork 一份。

wrangler.example.toml 做如下编辑:

name = "moe-counter-cf"
type = "javascript"
account_id = "<CF_ACCOUNT_ID>"  # 此处将 <CF_ACCOUNT_ID> 替换为账户 ID
zone_id = "<CF_ZONE_ID>"  # 此处将 <CF_ZONE_ID> 替换为区域 ID
workers_dev = false
route = "<YOUR_DOMAIN>/*"  # 此处将 <YOUR_DOMAIN> 替换为你的域名
compatibility_date = "2022-03-12"
kv_namespaces = [
  { binding = "KV", id = "<CF_KV_ID>"},  # 此处将 <CF_KV_ID> 替换为命名空间 ID
]

[build]
command = "npm run build"
[build.upload]
format = "service-worker"

编辑完成,保存,并将该文件重命名为 wrangler.toml

settings.json 做如下编辑:

{
  "defaults": {
    "theme": "gelbooru",  # 选择默认的计数器主题,所有主题样式详见 https://count.getloli.com/
    "length": 7,  # 控制计数器默认位数
    "render": "auto"
  },
  "api": {
    "get": true,
    "delete": false
  },
  "index": {
    "enabled": true
  },
  "ids": {  # 管理计数器的 ID,防止滥用,只有填写在这里的 ID 才能计数
    "dsrkafuu:demo": "Demo for GitHub & preview site.",  # 这个是 DEMO 页默认使用的 ID,不建议删除,否则建好的 DMEO 站显示不了计数器很难看
    "dsrkafuu:home": "Personal blog & GitHub page.",  # 从这行开始可以换成自拟的 ID,前半部分是 ID,后半部分是备注
    "dsrkafuu:tools": "For DSRTOOLs counter."
  }
}

编辑完成后保存,moe-counter-cf 配置宣告完成。

使用 Wrangler-CLI 部署 moe-counter-cf

Wrangler-CLI 是 Cloudflare Workers 的命令行工具,它提供了一个简略的接口,能够让你在本地开发环境中使用 Cloudflare Workers。Wrangler-CLI 需要 Node.js 环境才能运行。

使用环境准备就绪后,打开系统命令行工具。

安装 Wrangler-CLI:

npm i @cloudflare/wrangler -g

上面安装的过程中如果出现权限问题,需要使用管理员权限执行。

可以执行 wrangler --version 来确认 Wrangler-CLI 是否被成功安装,若安装成功,则会返回版本号。

接着,输入如下命令对 Wrangler 进行授权:

wrangler login

浏览器会弹出 Cloudflare 的授权界面,根据提示点击授权即可,若没有弹出界面,可以手动复制出现的链接到浏览器访问。

输入如下命令创建一个项目,把 https://github.com/dsrkafuu/moe-counter-cf 替换成之前 fork 并编辑过的仓库的地址:

wrangler generate moe-counter-cf https://github.com/dsrkafuu/moe-counter-cf

注意:在 Windows 系统中,上述命令可能执行失败,无法拉取对应仓库的文件,这时只能手动放入,输入不带仓库地址的创建项目命令:

wrangler generate moe-counter-cf

创建成功后会提示项目文件夹路径,删除这个文件夹中的所有内容,然后将之前 fork 并编辑过的仓库的所有文件下载下来,全部复制到这个文件夹当中。

最后,输入发布指令将项目文件部署到 Cloudflare Workers:

wrangler publish

若返回发布成功的信息,则部署完成,浏览器访问之前绑定的三级域名,查看能否成功显示出 Demo 页,例如在下搭建的预览页面,刷新页面, Demo 页的计数器应该能正常工作。

访问 https://你的域名/之前在 settings.json 中设置的计数器的 ID 即可使用计数器了,例如 https://count.champhoon.xyz/count

自定义样式和计数

计数器默认使用之前在 settings.json 中设置的主题和位数,但也可在 URL 后面再加上主题参数实现不同主题和位数的切换(在下的默认主题为 gelbooru,默认长度为 7):

https://count.champhoon.xyz/count

https://count.champhoon.xyz/count?theme=asoul

https://count.champhoon.xyz/count?theme=moebooru&length=10

https://count.champhoon.xyz/count?theme=rule34&length=auto

在 Cloudflare workers 的 KV 当中,能够轻松更改计数器的数据,查看 moe-counter-cf 使用的 KV,就能看到一系列以计数器 ID 命名的密钥以及它们的值,点击查看 - 编辑即可修改对应 ID 的计数数据。


封面来源:雷電 x 獣耳 | 尾草 (Micho) #pixiv https://www.pixiv.net/artworks/67141350

Stay hungry, Stay foolish.