【Astro】如何在Astro上借助Cloudflare D1和Drizzle ORM打造全栈应用？一文带你搞定！

本文链接：https://blog.youkuaiyun.com/eclipsercp/article/details/144974010

如何在Astro上借助Cloudflare D1和Drizzle ORM打造全栈应用？一文带你搞定！

前言

在如今这个信息爆炸的时代，全栈开发已然成为一种趋势。而Astro作为一个静态网站生成器，凭借其出色的性能和灵活性，正逐渐成为开发者们的新宠。今天，就让我们一起探索如何在Astro上借助Cloudflare D1和Drizzle ORM实现全栈开发，让你的应用更加强大和高效！

一、Astro简介与优势

Astro是一个基于组件的静态网站生成器，它允许你使用现代的Web框架（如React、Vue、Svelte等）来构建页面，同时在构建时将它们转换为静态HTML文件。Astro的优势在于：

性能卓越：生成的静态HTML文件加载速度快，无需等待JavaScript渲染，提升了用户体验。
灵活性高：支持多种框架和库，开发者可以根据项目需求自由选择。
易于维护：组件化的架构使得代码结构清晰，便于后期的维护和扩展。

二、Cloudflare D1简介

Cloudflare D1是一个高性能的数据库服务，它为开发者提供了在Cloudflare边缘网络上运行SQL查询的能力。D1的优势在于：

全球分布式：数据存储在全球多个数据中心，访问速度快，延迟低。
高可用性：具备自动故障转移和数据备份功能，确保数据的可靠性和持久性。
易于扩展：随着业务增长，可以轻松扩展数据库容量，无需担心性能瓶颈。

三、Drizzle ORM简介

Drizzle ORM是一个现代化的ORM（对象关系映射）工具，它基于TypeScript，支持多种数据库。Drizzle ORM的优势在于：

类型安全：利用TypeScript的类型系统，确保代码的类型安全，减少运行时错误。
易于使用：提供了简洁明了的API，使得数据库操作更加方便快捷。
灵活性高：支持自定义查询和迁移，满足复杂的业务需求。

四、在Astro上实现全栈开发的步骤

1. 安装Astro

首先，我们需要安装Astro。打开终端，运行以下命令：

npm create astro@latest

选择Empty作为模板，使用最严格的TypeScript，其他选项保持默认即可。然后进入项目目录，运行npm run dev启动开发服务器。

2. 添加Cloudflare适配器

接下来，我们需要为Astro添加Cloudflare适配器。在项目目录下运行：

npx astro add cloudflare

对所有提示说“是”，然后提交并推送到Github。

3. 部署到Cloudflare Pages

前往Cloudflare，创建Pages应用程序，连接到Github存储库，并选择Astro Framework预设。

4. 安装wrangler并登录

如果尚未安装wrangler，请运行以下命令安装并登录：

npm i -g wrangler
wrangler login

5. 创建D1数据库

我们需要创建两个D1数据库，一个用于生产环境，一个用于预览版本。运行以下命令：

wrangler d1 create d1-demo-prod-db
wrangler d1 create d1-demo-preview-db

6. 创建wrangler.toml文件

创建wrangler.toml文件，并添加数据库配置信息，包括database_id和preview_database_id。例如：

# wrangler.toml
node_compat = true

[[d1_databases]]
binding = "DB"
database_name = "d1-demo-prod-db"
database_id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
preview_database_id = "DB"

[env.preview]
name = "preview"
[[env.preview.d1_databases]]
binding = "DB"
database_name = "d1-demo-preview-db"
database_id = "yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy"

7. 更新astro.config.ts

在astro.config.ts文件中，添加D1绑定配置，以便Astro能够与D1数据库进行交互。例如：

// astro.config.ts
import { defineConfig } from "astro/config";
import cloudflare from "@astrojs/cloudflare";

export default defineConfig({
  output: "server",
  adapter: cloudflare({
    runtime: {
      mode: "local",
      type: "pages",
      bindings: {
        DB: {
          type: "d1",
        },
      },
    },
  }),
});

8. 安装Drizzle依赖项

运行以下命令安装Drizzle ORM及其相关依赖：

npm i drizzle-orm
npm i -D better-sqlite3 drizzle-kit cross-env @types/node

9. 创建drizzle.config.ts

创建drizzle.config.ts文件，配置Drizzle ORM的相关选项。例如：

// drizzle.config.ts
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/db/schema.ts",
  out: "./drizzle",
  driver: "sqlite",
  dbCredentials: {
    url: "file:./db.sqlite",
  },
} as Config;

10. 创建数据库架构

根据业务需求，使用Drizzle ORM定义数据库表结构。例如：

// src/db/schema.ts
import { drizzle } from "drizzle-orm/sqlite-core";
import { sqliteTable, text, integer } from "drizzle-orm/sqlite-core";

export const users = sqliteTable("users", {
  id: integer("id").primaryKey().autoincrement(),
  name: text("name").notNull(),
  email: text("email").notNull(),
});

export const db = drizzle({ driver: "sqlite", url: "file:./db.sqlite" });

11. 生成并应用迁移

使用Drizzle Kit生成数据库迁移脚本，并在本地应用迁移，确保数据库结构与代码同步。运行以下命令：

npx drizzle-kit push:sqlite

12. 使用Drizzle Studio与本地数据库交互

Drizzle Studio是一个可视化工具，可以方便地与本地数据库进行交互，查看数据和执行查询。你可以通过以下命令启动Drizzle Studio：

npx drizzle-kit studio

13. 在Pages项目中添加绑定

在Cloudflare Pages项目中，添加D1数据库绑定，以便在生产环境中使用。你需要在wrangler.toml文件中配置相应的绑定信息。

14. 运行预览版和生产版的迁移

在预览版和生产环境中，分别运行数据库迁移，确保数据的一致性。你可以通过wrangler命令来管理不同环境的迁移。

15. 将数据添加到预览和生产环境

根据需要，将数据添加到预览版和生产环境的数据库中。你可以使用Drizzle ORM提供的API来插入数据，例如：

import { db, users } from "./src/db/schema";

await db.insert(users).values({ name: "John Doe", email: "john@example.com" });

五、总结与展望

通过以上步骤，我们成功地在Astro上借助Cloudflare D1和Drizzle ORM实现了全栈开发。这不仅提升了应用的性能和可靠性，还为开发者提供了更加灵活和高效的开发方式。未来，随着Astro和Cloudflare D1的不断优化和升级，我们有理由相信，全栈开发将变得更加简单和高效，为开发者带来更多的可能性和机遇！