Cloudflare D1 - 免费数据存储

前言

自从上次将博客项目的图片从 七牛云 迁到了 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

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 项目创建的目录：

cd d1-tutorial

运行以下命令并为您的数据库命名。在本教程中，数据库名为 devnow

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 文件中。

[[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 文件：

// 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 初始化数本地据库

npx wrangler d1 execute devnow --local --file=./schema.sql

4.3 验证数据是否在数据库中

npx wrangler d1 execute devnow --local --command="SELECT * FROM PageView"

看到如下图结果，即表示本地数据库创建成功：

5 在 Worker 中编写查询方法

这里实现了根据 /d1/pageview/ 来请求，然后 获取 和 更新 页面数据的接口。

// 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

npx wrangler dev

当您运行 wrangler dev 时，Wrangler 会提供一个 URL（很可能是 localhost:8787）来查看您的 Worker。

示例：

我们通过浏览器访问 http://localhost:8787/d1/pageview/posts/hello-word

查询返回以下数据，这是因为数据库中没有，默认是0。

到这里本地调试就完事了。

7.部署线上 D1 数据库

创建远程线上数据库：

npx wrangler d1 execute devnow --remote --file=./schema.sql

查询远程线上数据库：

npx wrangler d1 execute prod-d1-tutorial --remote --command="SELECT * FROM Customers"

这里和步骤 4.2 、 4.3 的区别就是 --local 换成了 --remote .

7.1 部署 worker 方法

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 :

// 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 调用都将在运行时执行。

// 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 配置删除即可。

完事，到这里项目里就可以展示 浏览量了。效果图如下：

原文链接：Cloudflare D1 - 免费数据存储