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

部署

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

创建新的应用程序

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

设置环境变量

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

设置 KV 命名空间

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

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

调试

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