去年，Cloudflare 发布了一系列新功能，使在Cloudflare 上部署Web 应用程序变得更加容易，使其在Astro、Next.js、Nuxt、Qwik、Remix、SolidStart、SvelteKit 和其他托管Web 应用程序中大受欢迎。看到了增长。

Cloudflare 最近对这些Web 框架的集成模块进行了重大升级，使得使用Cloudflare 的D1 数据库、R2 对象存储、AI 模型以及Cloudflare 开发者平台的其他强大功能来开发复杂的应用程序变得更加容易。

此前，如果您使用D1 开发一个使用Web 框架的应用程序并希望在本地运行它，您可以构建该应用程序的生产版本并使用“wrangler Pages dev”在本地运行它。

这是可行的，但每次代码迭代需要几秒钟，对于大型应用程序来说需要几十秒。迭代生产版本实在是太慢了，并且会让您退出该流程，从而使您无法利用作者投入大量精力的所有DX 优化框架，但这种情况正在发生变化。

我们的目标是让开发人员在将应用程序部署到Cloudflare 时以最自然的方式与Web 框架集成，而无需对其工作流程进行重大更改或学习和采用自定义API。

无论您是Next.js 或Nuxt 开发人员，还是更喜欢其他框架，您现在都可以继续使用熟悉的本地开发工作流程将应用程序发布到Cloudflare。

所有全栈Web 框架都附带一个针对框架定制的本地开发服务器，通常可以提供良好的开发体验，但有一个例外。它本身并不支持Cloudflare 开发平台的一些重要功能，尤其是存储解决方案计划。

需要做出艰难的选择。使用特定于框架的开发服务器开发应用程序，但放弃许多Cloudflare 功能，或者充分利用Cloudflare 平台，包括D1 和R2 等资源，但使用特定于框架的开发工具，要么放弃，要么放弃。

这会减慢迭代周期，并将在浏览器中查看代码更改结果所需的时间从毫秒更改为秒。但没有了！让我们来看看。

构建应用程序

使用C3 (create-cloudflare CLI) 创建新应用程序。您可以使用任何包管理器，但为了简单起见，本文使用默认的npm 客户端。赶紧跑：

将您的应用程序命名为npm create cloudflare@latest 或接受随机生成的名称。接下来，选择“网站或Web 应用程序”类别，然后选择您选择的全栈框架。

支持Astro、Next.js、Nuxt、Qwik、Remix、SolidStart 和SvelteKit。

C3 将应用程序构建委托给最新版本的特定于框架的CLI，因此您不会错过任何框架功能或选项，并且可以按照框架创建者的预期方式构建应用程序。然后，C3 会将Cloudflare 集成和部署所需的所有内容添加到您的应用程序中，因此您无需自行配置。

使用应用程序脚手架，只需几个步骤即可查看数据库中存储的产品列表。首先，将数据库配置添加到wrangler.toml 配置文件中。

[[d1_databases]]binding='DB'database_name='blog-products-db'database_id='XXXXXXXXXXXXXXXX' 即使部署到Pages 的全栈应用程序现在也可以通过我所做的wrangler.toml 文件配置绑定资源。我们计划在专门的公告中分享有关页面结构增强的更多信息。

接下来，让我们创建一个简单的schema.sql 文件来表示我们的数据库架构。

创建表产品(product_id INTEGER PRIMARY KEY, name TEXT, Price INTEGER);INSERT INTO products (product_id, name, Price) VALUES (1, 'Apple', 250), (2, 'Banana', 100), (3, 'Cherry', 375); 初始化数据库。

npx wrangler d1 use blog-products-db --local --file schema.sql 请注意，我们使用运行wrangler d1 的-local 标志将更改应用到本地D1 数据库。这是开发服务器连接到的数据库。

然后，如果您使用TypeScript，请运行以下命令以使TypeScript 识别您的数据库。

npm run build-cf-types 此命令针对使用C3 创建的所有全栈应用程序进行了预配置，并运行Wrangler types 以使用所有配置的绑定更新Cloudflare 环境的接口。

您现在可以使用方便的快捷方式启动框架提供的开发服务器。

npm run dev 无论您使用的是next dev、ninto 还是vite，此快捷方式都会启动框架的开发服务器。

开发工作流程

为了减少开发延迟并维持特定于自定义框架的体验，Web 框架及其开发服务器必须能够以无缝且几乎不可见的方式与Wrangler 和Miniflare 集成。

迷你照明弹是这个难题的重要组成部分。它是Cloudflare 特定资源的本机模拟器，利用JavaScript 运行时，workd。

依赖Workerd 允许Cloudflare 的JavaScript API 以紧密模拟生产环境的方式在本地运行。问题在于框架开发服务器已经依赖Node.js 来运行应用程序，因此将另一个JS 运行时引入其中会破坏有关这些开发服务器如何设计的许多假设。

然而，我们的团队提出了一种有趣的方法来弥合这两个JS 运行时之间的差距。这称为getPlatformProxy() API。它目前是Wrangler 的一部分，并利用miniflare 的神奇代理。

该API 公开了一个JS 代理对象，其行为类似于包含所有绑定资源的常规Workers 环境对象。代理对象允许Node.js 代码透明地调用在workerd 上运行的JavaScript 代码并访问特定于Cloudflare 的运行时API。

Node.js 和Workerd 运行时之间的桥梁允许应用程序在使用Node.js Cloudflare 模拟器在开发服务器上运行时直接访问D1、R2、KV 和其他存储解决方案。或者，您可以编写Node.js 脚本来执行相同的操作。

从'牧马人'导入{getPlatformProxy};const {env}=getPlatformProxy();console.dir(env);const db=env.DB;const productsResults=等待db.prepare('从产品中选择*').all( );console.log(productsResults.results);一旦getPlatformProxy() API 可用，您所需要做的就是更新所有框架适配器、插件，甚至框架本身即可使用它。

Vite 未来改进

getPlatformProxy() API 对于许多场景来说都是一个很好的解决方案，但还可以进一步改进。能够在JS 运行时而不是Node.js 中运行整个应用程序，使您能够更紧密地模拟生产环境，从而减少开发人员的摩擦和操作意外。

在理想的情况下，我们希望能够针对生产中部署的相同运行时进行开发。这只能通过将Workerd 直接集成到每个框架的开发服务器中来实现，但考虑到数量，这不是一件容易的事。现有框架及其差异。

但我们有点幸运。当我们开始这一旅程时，我们很快注意到Vite 的采用率有所增加，Vite 是许多全栈框架使用的流行开发服务器。事实上，Remix 最近才转向Vite，证实了它作为当今Web 开发的共同基础的受欢迎程度。

如果Vite 能够为使用替代JavaScript 运行时运行全栈应用程序提供一流的支持，那么任何使用Vite 的人都将能够完全访问Cloudflare 开发者平台以在本地开发应用程序。不再有特定于框架的自定义集成和解决方法。所有开发者都可以使用全栈框架、Vite 和Cloudflare。

我们非常高兴能够与Vite 团队合作制定Vite 环境提案，使这一切成为可能。该提案仍在开发中，敬请关注更新。

版权声明：本文由今日头条转载，如有侵犯您的版权，请联系本站编辑删除。