Cloudflare D1 本地开发环境配置指南 | CF Pages Local Development Guide

背景说明 / Background

在使用 Cloudflare Pages 进行开发时,为了避免本地开发与线上环境互相影响,需要正确配置本地开发环境。本文将详细介绍如何设置本地 D1 数据库并导入线上数据。

环境要求 / Requirements

  • Node.js 环境
  • Wrangler CLI 工具
  • 已导出的线上数据库文件

配置步骤 / Steps

1. 配置 wrangler.toml

wrangler.toml 中添加本地数据库配置:

[[d1_databases]]
binding = "DB"
database_name = "D1 name"
database_id = "your-database-id"
preview_database_id = "DB"

2. 创建初始化脚本

scripts 目录下创建 init-local-db.js

// 本地数据库初始化脚本
import { execSync } from 'child_process';
import { mkdir } from 'fs/promises';
import { existsSync } from 'fs';
import { join } from 'path';

console.log('开始初始化本地数据库...');

try {
    // 确保本地数据库目录存在
    const dbDir = '.wrangler/state/d1';
    await mkdir(dbDir, { recursive: true });

    // 本地数据库文件路径
    const dbPath = join(dbDir, 'DB.sqlite');

    // 如果数据库文件已存在,先删除
    if (existsSync(dbPath)) {
        console.log('删除已存在的数据库文件...');
        execSync(`del "${dbPath}"`, { shell: 'cmd.exe' });
    }

    // 创建新的数据库文件
    console.log('创建新的数据库文件...');
    execSync(`type nul > "${dbPath}"`, { shell: 'cmd.exe' });

    // 导入数据库结构和数据
    console.log('导入数据库结构和数据...');
    execSync(`wrangler d1 execute DB --local --file=./migrations/0000_init.sql`, {
        stdio: 'inherit'
    });

    console.log('本地数据库初始化完成!');
} catch (error) {
    console.error('初始化失败:', error);
    process.exit(1);
}

3. 修改 package.json

package.json 中添加开发相关命令:

{
  "scripts": {
    "dev": "npm run init-local-db && run-p dev:*",
    "dev:wrangler": "wrangler pages dev dist --local --live-reload",
    "dev:esbuild": "esbuild --bundle src/server.ts --format=esm --watch --outfile=dist/_worker.js",
    "init-local-db": "node scripts/init-local-db.js"
  }
}

4. 启动本地开发环境

运行以下命令启动开发服务器:

npm run dev

注意事项 / Notes

  1. 确保本地数据库目录 .wrangler/state/d1 存在
  2. 使用 -local 参数确保在本地环境运行
  3. 数据库初始化脚本需要处理文件已存在的情况
  4. 保持本地开发环境与生产环境的配置分离

故障排除 / Troubleshooting

如果遇到 “no such table” 错误:

  1. 检查数据库初始化是否成功
  2. 确认 SQL 文件路径正确
  3. 检查数据库绑定配置

参考资料 / References


欢迎指出任何有错误或不够清晰的表达,可以在下面评论区评论。

×

喜欢就点赞,疼爱就打赏

//