Cloudflare D1 - 免费数据存储

前言

自从上次将博客项目的图片从 七牛云 迁到了 Cloudflare R2 之后就发现,Cloudflare 这个赛博菩萨的产品是真的不错,非常的适合白嫖,DevNow 项目作为一个开源博客,整体来说是希望越少依赖一些服务越好,使整个构建、部署流程更加的 轻便 和 快捷 ,让对于前端不是很熟的同学也能快速的搭建一个自己的博客。

这篇文章其实完全是个人爱好,只要是实现如何集成 Cloudflare D1 来给文章详情页增加一个浏览量。目前还没想好是否要往 DevNow 项目上同步这个功能,就现在自己的 blog 上试试水,如果大家有需求的话,后边在看是不是可以写一个脚本集成到 DevNow 项目中。

方案

方案整体来说是很多的,这里简单说下我考量的一些因素:

  • 自己有服务器,可以自己搭建一个数据库实现。
  • 通过一些比较成熟的数据存储服务,可能需要订阅功能。
  • 借助类似 CloudflareVercel 这样的服务商上的一些服务来实现,数据量少的话就是白嫖。severless 的实现方案对前端来说也比较友好。

这里还有一个考量是后续可能会考虑通过 Cloudflare Page 部署前端的方案,完全从 Vercel 切到 Cloudflare,减少多个服务商带来的管理和集成的复杂度。

先简单介绍一些 Cloudflare D1 ;

官方的介绍:

使用 D1 短短数秒内即可创建一个无服务器的关系数据库。通过熟悉的查询语言、时间点恢复功能和经济实惠的定价,赋能您构建下一个重大项目。

其实这里主要看 Free 版的服务,这里其实有两个服务可以选择, KVD1 都可以用来存储数据,这里选择 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 配置删除即可。

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

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

相关推荐
A洛2 个月前
Cloudflare Pages 部署 Next.js 应用教程
开发语言·github·nextjs·cloudflare·cloudflarepages
LaughingZhu2 个月前
Cloudflare R2 - 免费图床
cloudflare·devnow
武穆逸仙5 个月前
基于Cloudflare/CloudDNS/GitHub使用免费域名部署NewBing的AI服务
人工智能·cloudflare·bingai·workers
羽化半径7 个月前
使用cloudflare之后IP不对的问题
服务器·nginx·cloudflare·matomo
ai使用测评7 个月前
Cloudflare是什么?有什么用途?怎么购买
cloudflare
风屿Wind9 个月前
1Panel CloudFlare证书申请失败的解决方案
ssl·1panel·cloudflare
guo_zhen_qian1 年前
如何在Cloudflare创建自己的反向代理
github·cloudflare·openai反向代理
encoderlee1 年前
直连ChatGPT,终于可以从大陆直接访问OpenAI的API端口了
chatgpt·openai·cloudflare
嗨客递锅1 年前
爬虫:绕过5秒盾Cloudflare和DDoS-GUARD
爬虫·python·cloudflare·5秒盾