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

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

安装 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",
				},
			},
		},
	}),
});

安装 Drizzle 依赖项

运行以下命令：

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

创建 drizzle.config.ts

这就是我们的 drizzle.config.ts 文件的样子：

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

const {
   
   
	LOCAL_DB_PATH