借助 Cloudflare D1 和 Drizzle 在 Astro 上实现全栈

使用 Cloudflare D1 和 Drizzle ORM 将后端添加到 Astro 项目的分步指南

文章目录

安装 Astro
添加 Cloudflare 适配器
部署到 Pages
安装 wrangler 并登录
创建 D1 数据库
创建 wrangler.toml 文件
将 .wrangler 添加到 .gitignore
更新 astro.config.ts
安装 Drizzle 依赖项
创建 drizzle.config.ts
创建您的架构
将脚本添加到 package.json
生成 migrations
在本地应用迁移
使用 Drizzle Studio 与本地数据库交互
将数据库添加到本地
渲染链接
在 Pages 项目中添加绑定
运行预览版和生产版的迁移
将数据添加到预览和生产环境
就这样！

安装 Astro

这非常简单——运行以下命令：

npm create astro@latest

选择 Empty 作为模板
选择使用最严格的 TypeScript
默认值对其他一切都很好

然后您可以 cd 进入您的项目并运行 npm run dev

添加 Cloudflare 适配器

在您的项目中，您现在可以运行：

npx astro add cloudflare

对所有事情说“是”，然后提交所有内容并将其推送到 Github。

部署到 Pages

前往创建 Pages应用程序，然后单击“连接到 git”以创建页面

使用 Github 存储库的应用程序。

请务必选择 Astro Framework 预设！

安装 wrangler 并登录

如果您尚未执行此操作，请安装 wrangler 并通过运行以下命令登录：

npm i -g wrangler
wrangler login

创建 D1 数据库

我们将创建两个数据库，一个用于生产，一个用于预览版本。

为此，请运行以下命令：

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

创建 wrangler.toml 文件

我们需要一个 wrangler.toml 文件，其中包含我们刚刚创建每个数据库中的 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"

将 .wrangler 添加到 .gitignore

echo .wrangler >> .gitignore

更新 astro.config.ts

我们需要像这样添加 D1 绑定：

// astro.config.ts
import { defineConfig } from "astro/config";import cloudflare from "@astrojs/cloudflare";// https://astro.build/config
export default defineConfig({output: "server",adapter: cloudflare({runtime: {mode: "local",type: "pages",bindings: {DB: {type: "d1",}