Remix+Cloudflare Pages+D1 快速上手

Remix + Cloudflare Pages + D1 开发指南

最新推荐文章于 2025-07-23 16:31:05 发布

原创

最新推荐文章于 2025-07-23 16:31:05 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #typescript

本文介绍了使用Remix、Cloudflare Pages和D1进行开发的步骤。包括准备工作，如获取Cloudflare帐户和安装Wrangler；创建Remix项目并选择Cloudflare Pages部署；创建Cloudflare D1绑定、执行查询、在Remix中查看数据，最后介绍了与Cloudflare Pages集成的方法。

我们最近听到越来越多的关于Cloudflare的服务。

我对Clouflare D1特别感兴趣，所以我决定研究一下。

与这次我想使用的 Remix 一起，我想介绍 Remix + Cloudflare Pages + D1 的第一步。

我只是稍微地了解一下，但我所做的在下面的仓库中： https://github.com/creamstew/remix-cloudflare-pages-d1

准备

您需要先做两件事：

获取 Cloudflare帐户
安装Wrangler，一种Cloudflare Workers CLI工具

创建 Remix 项目

使用以下命令创建项目：

npx create-remix@latest

输入项目名称后，系统会提示您选择部署方法。选择Cloudflare Pages！

$ cd <YOUR_PROJECT>
npm run dev

当您访问 http://127.0.0.1:8788 时，将出现以下屏幕。

在这里插入图片描述

创建 Cloudflare D1 绑定

为 D1 创建数据库很容易。

wrangler d1 create <DATABASE_NAME>

就是这样。现在，您有一个本地 D1 数据库。

创建数据库时，应会看到以下配置已添加到辅助角色的配置文件 wrangler.toml：

[[ d1_databases ]]
binding = "DB" # i.e. available in your Worker on env.DB
database_name = "<DATABASE_NAME>"
database_id = "<UUID>"

此设置允许 D1 数据库绑定到辅助角色。文档： https://developers.cloudflare.com/workers/platform/bindings/

查询执行

创建数据库后，可以创建一些表和数据了。

直接在 Remix 项目下创建一个名为 schema.sql 的文件。

DROP TABLE IF EXISTS Customers;
CREATE TABLE Customers (CustomerID INT, CompanyName TEXT, ContactName TEXT, PRIMARY KEY (`CustomerID`));
INSERT INTO Customers (CustomerID, CompanyName, ContactName) VALUES (1, 'Alfreds Futterkiste', 'Maria Anders'), (4, 'Around the Horn', 'Thomas Hardy'), (11, 'Bs Beverages', 'Victoria Ashworth'), (13, 'Bs Beverages', 'Random Name');

运行在本地创建的 SQL 文件。

wrangler d1 execute <DATABASE_NAME> --local --file=./schema.sql

如果执行正确，抛出如下所示的 SELECT 语句，结果将被返回。

wrangler d1 execute <DATABASE_NAME></

最低0.47元/天解锁文章