前言
自从上次将博客项目的图片从 七牛云 迁到了 Cloudflare R2 之后就发现,Cloudflare
这个赛博菩萨的产品是真的不错,非常的适合白嫖,DevNow
项目作为一个开源博客,整体来说是希望越少依赖一些服务越好,使整个构建、部署流程更加的 轻便 和 快捷 ,让对于前端不是很熟的同学也能快速的搭建一个自己的博客。
这篇文章其实完全是个人爱好,只要是实现如何集成 Cloudflare D1 来给文章详情页增加一个浏览量。目前还没想好是否要往 DevNow
项目上同步这个功能,就现在自己的 blog 上试试水,如果大家有需求的话,后边在看是不是可以写一个脚本集成到 DevNow
项目中。
方案
方案整体来说是很多的,这里简单说下我考量的一些因素:
- 自己有服务器,可以自己搭建一个数据库实现。
- 通过一些比较成熟的数据存储服务,可能需要订阅功能。
- 借助类似
Cloudflare
、Vercel
这样的服务商上的一些服务来实现,数据量少的话就是白嫖。severless
的实现方案对前端来说也比较友好。
这里还有一个考量是后续可能会考虑通过 Cloudflare Page 部署前端的方案,完全从 Vercel
切到 Cloudflare
,减少多个服务商带来的管理和集成的复杂度。
先简单介绍一些 Cloudflare D1 ;
官方的介绍:
使用 D1 短短数秒内即可创建一个无服务器的关系数据库。通过熟悉的查询语言、时间点恢复功能和经济实惠的定价,赋能您构建下一个重大项目。
其实这里主要看 Free 版的服务,这里其实有两个服务可以选择, KV
和 D1
都可以用来存储数据,这里选择 D1
主要考量因素就是 KV
的每日写入操作只有 1000 次,整理来对于一些好的博客网站可能会超过,所以直接上 D1
。
集成到 DevNow 项目中
:::tip[注意]
整体来说所有的操作都有两种实现方式,一个是在 Cloudflare D1 的官网里边操作,一个是通过命令行来实现。
我这里主要记录一下命令行的实现,通过一些命令和代码来创建和部署 D1 的服务,可以更好的理解整个的流程。
前置条件 :已经完成 Cloudflare 账号的注册和信用卡💳的绑定,否则无法后续的流程
:::
参考文档:Cloudflare D1
1. 创建一个Worker
bash
pnpm create cloudflare@latest d1-tutorial
// d1-tutorial 是 <WORDER_NAME>
对于设置,请选择以下选项:
- For What would you like to start with? choose
Hello World example
. - For Which template would you like to use? choose
Hello World Worker
. - For Which language do you want to use? choose
TypeScript
. - For Do you want to use git for version control? choose
Yes
. - For Do you want to deploy your application? choose
No
(we will be making some changes before deploying).
然后项目中将会得到以下的一个目录。
2. 创建数据库
D1 数据库在概念上与许多其他数据库类似:数据库可能包含一个或多个表、查询这些表的能力以及可选索引。 D1 使用熟悉的SQL 查询语言↗ (与 SQLite 使用的一样)。
切换到您刚刚为 Workers 项目创建的目录:
bash
cd d1-tutorial
运行以下命令并为您的数据库命名。在本教程中,数据库名为 devnow
bash
npx wrangler d1 create devnow
# 然后会输出以下内容:
# [[d1 databases]]
# binding ="DB" # available in your Worker on env.DB
# database name ="prod-d1-tutorial"
# database id ="<unigue-ID-for-your-database>"
这将创建一个新的 D1 数据库并输出下一步所需的绑定配置。
wrangler
命令行界面是 Cloudflare 的工具,用于在终端中管理和部署 Workers 应用程序和 D1 数据库。它是在您使用npm create cloudflare@latest
初始化新项目时安装的。
3. 将 Worker 绑定到您的 D1 数据库
您必须为 Worker 创建绑定才能连接到 D1 数据库。绑定允许您的 Workers 访问 Cloudflare 开发者平台上的资源,例如 D1。您可以通过更新wrangler.toml
文件来创建绑定。
复制第二步输出的结果到 wrangler.toml
文件中。
bash
[[d1_databases]]
binding = "DB" # available in your Worker on env.DB
database_name = "prod-d1-tutorial"
database_id = "<unique-ID-for-your-database>"
到这里一个本地的 D1
数据库就建好了
4. 对 D1 数据库进行查询
4.1 更新 schema.sql 文件:
bash
// d1-turorial/schema.sql
DROP TABLE IF EXISTS PageView;
CREATE TABLE IF NOT EXISTS PageView (
PageId INTEGER PRIMARY KEY AUTOINCREMENT,
Path TEXT UNIQUE NOT NULL,
Count INTEGER,
LastVisited INTEGER
);
INSERT INTO PageView (PageId, Path, Count, LastVisited)
VALUES
(1, '/posts/1', 0, 1725673703),
(2, '/posts/2', 0, 1725673703),
(3, '/posts/3', 0, 1725673703);
4.2 初始化数本地据库
bash
npx wrangler d1 execute devnow --local --file=./schema.sql
4.3 验证数据是否在数据库中
bash
npx wrangler d1 execute devnow --local --command="SELECT * FROM PageView"
看到如下图结果,即表示本地数据库创建成功:
5 在 Worker 中编写查询方法
这里实现了根据 /d1/pageview/
来请求,然后 获取
和 更新
页面数据的接口。
ts
// page: d1-tutorial/src/index.ts
export interface Env {
DB: D1Database;
}
export default {
async fetch(request, env): Promise<Response> {
const url = new URL(request.url);
const pathname = url.pathname; // 获取页面路径
// 检查是否以 https://d1.laughingzhu.cn/d1/pageview 开头
if (!pathname.startsWith('/api/pageview')) {
return new Response('Not Found', { status: 404 });
}
// 继续处理 https://d1.laughingzhu.cn/d1/pageview 路径下的请求
const trimmedPath = pathname.replace('/api/pageview/', '/'); // 去除开头部分,获取具体页面路径
if (request.method === 'GET') {
try {
// 查询指定 path 的浏览量
const result = await env.DB.prepare(`SELECT Count FROM PageView WHERE Path = ?`)
.bind(trimmedPath)
.first();
// 如果没有记录,返回 0
const count = result ? result.Count : 0;
return new Response(JSON.stringify({ path: trimmedPath, count }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error: any) {
console.error('Database operation failed:', error);
return new Response(`Failed to fetch page views for ${trimmedPath}: ${error.message}`, {
status: 500
});
}
}
if (request.method === 'POST') {
// 使用 UPSERT 来尝试更新 count,如果没有该页面则插入新的记录
try {
// UTC 转成北京时间
const utcTimestamp = Math.floor(Date.now() / 1000);
const { results } = await env.DB.prepare(
`
INSERT INTO PageView (Path, Count, LastVisited)
VALUES (?, 1, ?)
ON CONFLICT(Path)
DO UPDATE SET Count = Count + 1, LastVisited = ?
`
)
.bind(trimmedPath, utcTimestamp, utcTimestamp)
.run();
// return Response.json(results);
if (results) {
return Response.json({
message: `Page views for ${trimmedPath} updated.`,
data: results
});
} else {
return new Response(`Page views for ${trimmedPath} updated, but no results returned.`, {
status: 200
});
}
} catch (error: any) {
console.log(error);
return new Response(`Failed to update page views for ${trimmedPath}: ${error.message}`, {
status: 500
});
}
}
// 如果是其他方法,不允许操作
return new Response('Method Not Allowed', { status: 405 });
}
} satisfies ExportedHandler<Env>;
配置 Worker
后,您可以在全局部署之前在本地测试您的项目。
6. 本地开发运行 Worker
bash
npx wrangler dev
当您运行 wrangler dev
时,Wrangler 会提供一个 URL(很可能是 localhost:8787)来查看您的 Worker。
示例:
我们通过浏览器访问 http://localhost:8787/d1/pageview/posts/hello-word
查询返回以下数据,这是因为数据库中没有,默认是0。
到这里本地调试就完事了。
7.部署线上 D1 数据库
创建远程线上数据库:
bash
npx wrangler d1 execute devnow --remote --file=./schema.sql
查询远程线上数据库:
bash
npx wrangler d1 execute prod-d1-tutorial --remote --command="SELECT * FROM Customers"
这里和步骤 4.2 、 4.3 的区别就是 --local
换成了 --remote
.
7.1 部署 worker 方法
bash
npx wrangler deploy
这里主要是部署我们在 worker
中实现的方法,不如上述步骤 4.4 在 d1-turorial/src/index
中实现的查询、更新页面数据的方法。
到这里就可以整个 wokrer
和 数据库就部署完成了,我们可以到线上去看一下。
我们可以看到 Cloudflare 给我们提供了默认的 Worker 的访问路由,为了方便,我们也可以添加一个自定义路由,通过自定义路由访问,如下。
到这里整个 Cloudflare D1
数据库这里就接入完成了。
接下来我们在前端项目中来增加相关的请求方法。
DevNow 前端项目中增加查询、更新浏览量方法
1. 实现方案:
整体来说这里由于期望 浏览量 这个数据比较实时,所以大概方案我能想到的是两种方案:
- 在
CSR
去做,可以通过集成React
来实现在运行时去请求api
来完成(最简单); - 渲染方案从
SSG
切换到SSR
,这样页面会在每次访问的时候在服务端动态的生成,数据可以保持实时。(这里遇到一些坑,下边会提)
最终我选择了 SSR
方案,主要考量的因素如下:
使用 CSR
运行时请求会导致接口暴露,由于没有用户身份体系,很容易让一些无聊的人刷接口,主要我们白嫖每天是限额,超出是要收钱的。
所以这里采用了 SSR
的方案,这样就可以不暴露接口来实现,不过这里可能会牺牲掉 SSG
带来的更好缓存效果。
这里主要是删除、替换适用于 SSG
方案中的一些 API
:
ts
// page: src/posts/[...slug].astro
// 删除 export const prerender = true;
// 删除 getStaticPaths() 相关方法
//可以通过 getEntry 来获取对应的文章内容
import { getEntry } from 'astro:content';
const { slug } = Astro.params;
const post = await getEntry('doc', slug);
2. Astro 中如何接入
开始使用了 Astro
提供的 API 端点 ,后来仔细了解完这个是 SSG
的方案,之后在构建的时候请求,后边就不会走了,所以基于 API 端点 的实现方式 PASS
。
其实 Astro 中 数据请求 的文档中有提到,可以使用 Fetch 来实现。
官网关于 fetch 的
fetch 调用将会在构建时执行,并且数据都可用于组件模板中来生成动态 HTML。如果启用 SSR 模式,任何 fetch 调用都将在运行时执行。
ts
// page: src/posts/[...slug].astro
//增加如下来实现动态获取访问量
const { slug } = Astro.params;
const data = await fetch(`https://xxx.d1.hosts/d1/pageview/posts/${slug}`);
const result = await data.json();
这里可以提出到一个指定的文件来维护,示例我就不改了。
优化空间:只有在线上环境才请求,线上不请求,来增加数据的准确度。
更新的实现同上。
3. 页面缓存的问题
部署到线上环境时发现个问题,只有部署完第一次访问会增加请求对应的方法,后边就不请求了,猜测是 Vercel
这边有缓存,然后在 Response
体里看到了 x-vercel-cache: HIT
。第一次是 MISS
以后所有的都是 HIT
,这里其实可以理解成部署完第一次访问的时候 Vercel
帮我们生成了一份缓存,后续所有的人访问都走的是缓存,这样在速度上就会有更好的体验,本来是个好东西,还给我卡主了。
然后就各种开始找方法来避免缓存生效。给请求加 禁止缓存字段,给 vercel.json header
增加对应路由不缓存的配置发现都没有用。
这里可以通过开启 D1
的实时日志来调试:
然后突然想到会不会是 ISR
导致的问题,之前默认打开了,搜索了一会发现,ISR
模式会自动缓存我们的文件。解决方案就是 将 astro.config.js
中的 ISR
配置删除即可。
完事,到这里项目里就可以展示 浏览量了。效果图如下: