部署 Remix 应用程序有四个层级
@remix-run/express
这样的服务器适配器根据您的 Web 主机,您可能只有较少的层级。例如,部署到 Cloudflare Pages 会一次性处理 2、3 和 4。在 Express 应用程序中部署 Remix 将具有所有四个层级,而使用 "Remix 应用程序服务器" 会将 2 和 3 合并!
您可以自己将所有这些层级连接起来,也可以从 Remix 模板开始。
让我们来谈谈每个部分的作用。
Remix 可以部署到任何 JavaScript 运行时,例如 Node.js、Shopify Oxygen、Cloudflare Workers/Pages、Fastly Compute、Deno、Bun 等。
每个运行时对 Remix 所依赖的标准 Web API 支持程度不同,因此需要 Remix 运行时包来填充运行时的任何缺失功能。这些填充包括 Web 标准 API,如 Request、Response、crypto 等等。这使您可以在服务器上使用与浏览器相同的 API。
以下运行时包可用
您在应用程序中交互的大多数 API 不会直接从这些包中导入,因此您的代码在运行时之间相当可移植。但是,偶尔您会从这些包中导入一些东西,用于一些非标准 Web API 的特定功能。
例如,您可能希望将 cookie 存储在文件系统中,或者在 Cloudflare KV 存储中。这些是运行时的特定功能,与其他运行时不共享。
// store sessions in cloudflare KV storage
import { createWorkersKVSessionStorage } from "@remix-run/cloudflare";
// store sessions on the file system in node
import { createFileSessionStorage } from "@remix-run/node";
但是,如果您将会话存储在 cookie 本身中,则所有运行时都支持此功能。
import { createCookieSessionStorage } from "@remix-run/node"; // or cloudflare/deno
Remix 不是一个 HTTP 服务器,而是在现有 HTTP 服务器中的一个处理程序。适配器允许 Remix 处理程序在 HTTP 服务器中运行。一些 JavaScript 运行时,尤其是 Node.js,有多种创建 HTTP 服务器的方式。例如,在 Node.js 中,您可以使用 Express.js、fastify 或原始的 http.createServer
。
每个服务器都有自己的 Request/Response API。适配器的任务是将传入请求转换为 Web Fetch 请求,运行 Remix 处理程序,然后将 Web Fetch 响应适配回主机服务器的响应 API。
以下是一段伪代码,展示了流程。
// import the app build created by `remix build`
import build from "./build/index.js";
// an express http server
const app = express();
// and here your Remix app is "just a request handler"
app.all("*", createRequestHandler({ build }));
// This is pseudo code, but illustrates what adapters do:
export function createRequestHandler({ build }) {
// creates a Fetch API request handler from the server build
const handleRequest = createRemixRequestHandler(build);
// returns an express.js specific handler for the express server
return async (req, res) => {
// adapts the express.req to a Fetch API request
const request = createRemixRequest(req);
// calls the app handler and receives a Fetch API response
const response = await handleRequest(request);
// adapts the Fetch API response to the express.res
sendRemixResponse(res, response);
};
}
为了方便起见,Remix 应用程序服务器是一个用于新项目、调试或没有 Express 等服务器特定需求的项目的简单 Express 服务器,并且部署到 Node.js 环境。
Remix 旨在具有极高的灵活性,并具有足够的观点将 UI 连接到后端,但它对使用的数据库、缓存数据的方式或应用程序的部署位置和方式没有观点。
Remix 模板是应用程序开发的起点,其中包含了所有这些额外的观点,由社区创建。
您可以使用 Remix CLI 中的 --template
标志,指定指向 GitHub 上某个仓库的模板。
npx create-remix@latest --template <org>/<repo>
您可以在 模板指南 中了解更多关于模板的信息。
选择完模板或 从头开始设置应用程序 后,就可以开始构建应用程序了!