remix-cloudflare-template

了解更多关于 Remix Stacks 的信息。

npx create-remix@latest --template edmundhung/remix-cloudflare-template

包含什么？

• 使用 Vite 进行开发
• 在 Cloudflare Workers 上托管，使用 静态资源
• 使用 Github Actions 进行持续集成
• 使用 Workers Build 进行自动构建和部署
• 使用 Markdoc 渲染 Markdown
• 使用 Tailwind 进行样式设计
• 使用 Playwright 进行端到端测试
• 使用 MSW 进行本地第三方请求模拟
• 使用 Prettier 进行代码格式化
• 使用 ESLint 进行代码检查
• 使用 TypeScript 进行静态类型检查

开发

开始之前，复制 .dev.vars.example 并将其命名为 .dev.vars，其中包含所需的密钥。

cp .dev.vars.example .dev.vars

启动 Vite 开发服务器

npm run dev

您还可以启动 Playwright UI 模式来测试您的应用程序。您将在 /tests/e2e 目录中找到所有定义的测试。

npm run test

要在 workerd 运行时测试您的应用程序，可以使用以下命令启动 wrangler 开发服务器：

npm run build && npm run start

新的环境变量和密钥

要添加新的密钥，请更新 .dev.vars 文件中的值。

对于其余环境变量，您可以使用新的变量更新 wrangler.toml 文件中的 var 部分

[vars]
NEW_VARIABLE = "..."

这些变量将从上下文中的 env 对象中获得。

设置 KV 命名空间

要在开发环境中设置新的 KV 命名空间，请使用与下面显示的缓存命名空间类似的其他对象更新 wrangler.toml。

kv_namespaces = [
  { binding = "cache", id = "cache" },
  { binding = "new_namespace", id = "new_namespace" }
]

请注意，id 对开发环境没有影响。您可以对 id 和 binding 使用相同的名称。命名空间将从上下文中的 env 对象中获得。

生成 env 类型

您可以使用以下命令基于 wrangler.toml 和 .dev.vars 生成 env 对象的类型：

npm run typegen

部署

在您第一次部署之前，请确保在 Cloudlfare 仪表板上正确设置了所有环境变量和绑定。

创建新的应用程序

要在 Cloudflare 仪表板上创建一个新的应用程序，请从菜单中选择Workers 和 Pages，然后单击创建应用程序。然后，您可以根据自己的需要按照说明进行操作。

设置环境变量

要设置环境变量，请从菜单中选择Workers 和 Pages，然后查找应用程序详细信息。您将在设置选项卡下找到环境变量部分。

设置 KV 命名空间

要设置新的 KV 命名空间，您需要先通过Workers 和 Pages下的KV菜单创建一个新的命名空间，然后单击创建命名空间。

创建命名空间后，您可以从应用程序详细信息页面将命名空间绑定到应用程序。您可以在设置选项卡下的函数部分找到该设置。

调试

如果您的应用程序无法正常工作，您可以在部署详细信息页面的函数选项卡中找到实时日志。