网站上图片的链接怎么做,scratch编程,html5网站欣赏 国内,网站找哪家做较好使用 Cloudflare D1 和 Drizzle ORM 将后端添加到 Astro 项目的分步指南 文章目录 安装 Astro添加 Cloudflare 适配器部署到 Pages安装 wrangler 并登录创建 D1 数据库创建 wrangler.toml 文件将 .wrangler 添加到 .gitignore更新 astro.config.ts安装 Drizzle 依赖项创建 driz…使用 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",},},},}),
});安装 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 {