运行时、适配器模板和部署
On this page

运行时、适配器模板和部署

¥Runtimes, Adapters, Templates, and Deployment

部署 Remix 应用分为四层:

¥Deploying a Remix application has four layers:

  1. 类似 Node.js 的 JavaScript 运行时

    ¥A JavaScript Runtime like Node.js

  2. 类似 Express.js 的 JavaScript Web 服务器

    ¥A JavaScript web server like Express.js

  3. 一个服务器适配器,例如 @remix-run/express

    ¥A server adapter like @remix-run/express

  4. 网络托管服务商或平台

    ¥A web host or platform

根据你的 Web 主机,你的层级可能会更少。例如,部署到 Cloudflare Pages 可以同时处理 2、3 和 4。在 Express 应用中部署 Remix 需要同时满足上述四个条件,而使用 "Remix 应用服务器" 则需要同时满足这两个条件!

¥Depending on your web host, you may have fewer layers. For example, deploying to Cloudflare Pages takes care of 2, 3, and 4 all at once. Deploying Remix inside an Express app will have all four, and using the "Remix App Server" combines 2 and 3!

你可以自行连接所有这些,也可以从 Remix 模板开始。

¥You can wire all of these up yourself or start with a Remix Template.

我们来分别讨论一下每个部分的作用。

¥Let's talk about what each part does.

JavaScript 运行时

¥JavaScript Runtimes

Remix 可以部署到任何 JavaScript 运行时,例如 Node.js、Shopify Oxygen、Cloudflare Workers/Pages、Fastly Compute、Deno、Bun 等。

¥Remix can be deployed to any JavaScript runtime like Node.js, Shopify Oxygen, Cloudflare Workers/Pages, Fastly Compute, Deno, Bun, etc.

每个运行时对 Remix 所基于的标准 Web API 的支持各不相同,因此需要一个 Remix 运行时包来填充运行时缺少的任何功能。这些 polyfill 包含 Web 标准 API,例如请求、响应、加密等。这允许你在服务器上使用与浏览器相同的 API。

¥Each runtime has varying support for the standard Web APIs that Remix is built on, so a Remix runtime package is required to polyfill any missing features of the runtime. These polyfills include web standard APIs like Request, Response, crypto, and more. This allows you to use the same APIs on the server as in the browser.

以下运行时包可用:

¥The following runtimes packages are available:

你在应用中交互的大多数 API 并非直接从这些包中导入,因此你的代码在运行时之间具有相当好的可移植性。但是,有时你会从这些软件包中导入一些非标准 Web API 的特定功能。

¥The majority of the APIs you interact with in your app are not imported directly from these packages, so your code is fairly portable between runtimes. However, occasionally you'll import something from these packages for a specific feature that isn't a standard Web API.

例如,你可能希望将 Cookie 存储在文件系统或 Cloudflare KV 存储中。这些是运行时特有的功能,不与其他运行时共享:

¥For example, you might want to store cookies on the file system or in Cloudflare KV storage. These are specific features of runtimes that aren't shared with other runtimes:

// 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 本身中,则所有运行时都支持此功能:

¥But if you're storing a session in the cookie itself, this is supported in all runtimes:

import { createCookieSessionStorage } from "@remix-run/node"; // or cloudflare/deno

适配器

¥Adapters

Remix 不是 HTTP 服务器,而是现有 HTTP 服务器内部的处理程序。适配器允许 Remix 处理程序在 HTTP 服务器内部运行。一些 JavaScript 运行时,尤其是 Node.js,有多种创建 HTTP 服务器的方法。例如,在 Node.js 中,你可以使用 Express.js、fastify 或原始 http.createServer

¥Remix is not an HTTP server but rather a handler inside an existing HTTP server. Adapters allow the Remix handler to run inside the HTTP server. Some JavaScript runtimes, especially Node.js, have multiple ways to create an HTTP server. For example, in Node.js you can use Express.js, fastify, or raw http.createServer.

每个服务器都有自己的请求/响应 API。适配器的作用是将传入的请求转换为 Web Fetch 请求,运行 Remix 处理程序,然后将 Web Fetch 响应适配回主机服务器的响应 API。

¥Each of these servers has its own Request/Response API. The adapter's job is to convert the incoming request to a Web Fetch Request, run the Remix handler, and then adapt the Web Fetch Response back to the host server's response API.

以下是一些伪代码,用于说明该流程。

¥Here's some pseudocode that illustrates the flow.

// 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 应用服务器

¥Remix App Server

为方便起见,Remix 应用服务器是一个基础的 Express 服务器,适用于新项目、开发项目,或对 Express 等服务器没有任何特定需求并部署到 Node.js 环境的项目。

¥For convenience, the Remix App Server is a basic express server for new projects, tinkering, or projects that don't have any specific needs from a server like Express and are deployed to Node.js environments.

参见 @remix-run/serve

¥See @remix-run/serve

模板

¥Templates

Remix 的设计非常灵活,只需提供足够的意见即可将 UI 连接到后端。但是,它不会对你使用的数据库、缓存数据的方式或应用的部署位置和方式进行任何更改。

¥Remix is designed to be incredibly flexible with just enough opinions to connect the UI to the back end. However, it doesn't bring opinions on the database you use, how you cache data, or where and how your app is deployed.

Remix 模板是应用开发的起点,其中包含了社区创建的所有这些额外意见。

¥Remix templates are starting points for app development with all of these extra opinions baked in, created by the community.

你可以在 Remix CLI 中使用带有 --template 标志的模板,该模板指向 GitHub 上的存储库:

¥You can use a template with the --template flag in the Remix CLI that points to a repository on GitHub:

npx create-remix@latest --template <org>/<repo>

你可以在 模板指南 中阅读更多关于模板的信息。

¥You can read more about templates in the Templates Guide.

选择模板或 设置从零开始构建一个应用 后,就可以开始构建应用了!

¥Once you've picked a template or set up an app from scratch, you're ready to start building your app!

Remix v2.17 中文网 - 粤ICP备13048890号