Cloudflare 中文文档
Pages
Cloudflare 中文文档
Pages
编辑这个页面
跳转官方原文档
Set theme to dark (⇧+D)
  1. Products
  2. Pages
  3. 框架指南
  4. Remix

Remix

Remix是一个专注于充分利用网络力量的框架。与 Cloudflare Workers 一样，它也使用现代 JavaScript API，并注重网络基本要素，例如有意义的 HTTP 状态代码、缓存以及可用性和性能优化。

在本指南中，你将创建一个新的 Remix 应用程序并部署到 Cloudflare 页面。

​​ 设置新项目

使用 create-cloudflare CLI (C3) 建立新项目。C3 会创建一个新的项目目录，启动 Remix 的官方设置工具，并提供即时部署选项。

要使用 create-cloudflare 创建新 Remix 项目，请运行以下命令：

create-cloudflare将安装其他依赖项，包括Wrangler CLI 和任何必要的适配器，并向你提出设置问题。

设置好项目后，运行以下命令更改目录并渲染项目：

​​ 在你继续之前

所有框架指南都假定你已经对 Git 有了基本了解。如果你是 Git 的新手，请参考这本 Git 手册摘要，了解如何在本地机器上设置 Git。

如果使用 SSH 克隆，则必须在每台用于从 GitHub 推送或拉取的计算机上 生成 SSH 密钥。

更多信息请参阅 GitHub 文档 和 Git 文档。

​​ 创建 GitHub 仓库

访问 repo.new，创建一个新的 GitHub 仓库。创建新仓库后，进入新创建的项目目录，准备并在终端运行以下命令将本地应用程序推送到 GitHub：

​​ 使用 Cloudflare 页面部署

​​ 通过 create-cloudflare CLI (C3) 进行部署

如果使用 create-cloudflare(C3)创建新的 Remix 项目，C3 将安装项目所需的所有依赖项，并提示你通过 CLI 部署项目。如果你进行了部署，你的网站就会上线，并向你提供一个部署 URL。

​​ 通过 Cloudflare 控制面板部署

  1. 登录 Cloudflare 仪表板 并选择你的账户。
  2. 在账户主页，选择 工作者和页面> 创建应用程序> 页面> 连接到 Git。
  3. 选择创建的新 GitHub 仓库，并在 **设置构建和部署**部分提供以下信息：
Configuration option Value
Production branch main
Build command npm run build
Build directory build/client

配置好网站后，你就可以开始第一次部署了。你应该会看到 Cloudflare 页面正在安装 npm、你的项目依赖项，并在部署前构建你的网站。

部署网站后，你将在 *.pages.dev上为你的项目收到一个唯一的子域。 每次你向 Remix 网站提交新代码时，Cloudflare Pages 都会自动重建你的项目并进行部署。你还可以访问新拉取请求上的 预览部署，这样你就可以在部署到生产环境之前预览网站的变更效果。

​​ 通过 Wrangler CLI 部署

如果使用 create-cloudflare(C3)创建新 Remix 项目，C3 会自动使用 wrangler为项目搭建脚手架。要部署项目，请运行以下命令：

​​ 为 Remix 应用程序创建并添加绑定

要在 Remix 应用程序中添加绑定，请参阅 绑定。 绑定 允许你的应用程序与 Cloudflare 开发人员产品交互，例如 KV 命名空间、耐用对象、R2 存储桶 和 D1 数据库。

​​ 在本地开发中绑定资源

Remix 使用 Wrangler 的 getPlatformProxy在本地模拟 Cloudflare 环境。你可通过 cloudflareDevProxyVitePlugin在项目的vite.config.ts文件中配置getPlatformProxy。

要在本地开发中绑定资源，需要在 wrangler.toml 文件中配置绑定。请参阅 绑定，了解更多信息。

在wrangler.toml文件中配置绑定后，代理就可以在context.cloudflare中的loader或action函数中使用：

​​ 在生产中绑定资源

要在生产中绑定资源，你需要在 Cloudflare 面板中配置绑定。请参阅 绑定 文档了解更多信息。

在 Cloudflare 控制面板中配置绑定后，代理就可以在loader或action函数中的context.cloudflare.env中使用，如上所示。

​​ 示例在 Remix 应用程序中访问 D1 数据库

例如，你将在 Remix 应用程序中绑定并查询 D1 数据库。

  1. 创建 D1 数据库。请参阅 D1 文档 了解更多信息。
  2. 在 wrangler.toml 文件中为 D1 数据库配置绑定：
  1. 运行 npm run typegen 为绑定生成 TypeScript 类型。
  1. 在loader函数中访问 D1 数据库：

​​ 了解更多

完成本指南后，你已成功将 Remix 网站部署到 Cloudflare Pages。要开始使用其他框架，请参阅框架指南列表