服务器适配器

¥Server Adapters

官方适配器

¥Official Adapters

惯用的 Remix 应用通常可以部署在任何地方，因为 Remix 会根据 Web Fetch API 调整服务器的请求/响应。它通过适配器来实现这一点。我们维护了一些适配器：

¥Idiomatic Remix apps can generally be deployed anywhere because Remix adapts the server's request/response to the Web Fetch API. It does this through adapters. We maintain a few adapters:

• @remix-run/architect

• @remix-run/cloudflare-pages

• @remix-run/cloudflare-workers

• @remix-run/express

这些适配器将导入到你的服务器入口中，并且不会在你的 Remix 应用内部使用。

¥These adapters are imported into your server's entry and are not used inside your Remix app itself.

如果你使用 npx create-remix@latest 初始化了应用，而不是使用内置的 Remix 应用服务器，你会注意到一个 server/index.js 文件，该文件导入并使用了其中一个适配器。

¥If you initialized your app with npx create-remix@latest with something other than the built-in Remix App Server, you will note a server/index.js file that imports and uses one of these adapters.

如果你使用的是内置的 Remix 应用服务器，则无需与此 API 交互

每个适配器具有相同的 API。将来我们可能会针对你要部署到的平台提供特定的辅助程序。

¥Each adapter has the same API. In the future we may have helpers specific to the platform you're deploying to.

社区适配器

¥Community Adapters

• @fastly/remix-server-adapter — 适用于 Fastly Compute。

  ¥@fastly/remix-server-adapter — For Fastly Compute.

• @mcansh/remix-fastify — 适用于 Fastify。

  ¥@mcansh/remix-fastify — For Fastify.

• @mcansh/remix-raw-http — 适用于一个优秀的 Node.js 基本服务器。

  ¥@mcansh/remix-raw-http — For a good old bare-bones Node.js server.

• @netlify/remix-adapter — 适用于 Netlify。

  ¥@netlify/remix-adapter — For Netlify.

• @netlify/remix-edge-adapter — 适用于 Netlify Edge。

  ¥@netlify/remix-edge-adapter — For Netlify Edge.

• @vercel/remix — 适用于 Vercel。

  ¥@vercel/remix — For Vercel.

• remix-google-cloud-functions — 适用于 Google Cloud 和 Firebase 函数。

  ¥remix-google-cloud-functions — For Google Cloud and Firebase functions.

• partymix — 适用于 PartyKit。

  ¥partymix — For PartyKit.

• @scandinavianairlines/remix-azure-functions — 适用于 Azure 功能 和 Azure 静态 Web 应用。

  ¥@scandinavianairlines/remix-azure-functions — For Azure Functions and Azure Static Web Apps.

创建适配器

¥Creating an Adapter

createRequestHandler

为你的服务器创建一个请求处理程序，以便为应用提供服务。这是 Remix 应用的最终入口点。

¥Creates a request handler for your server to serve the app. This is the ultimate entry point of your Remix application.

const {
  createRequestHandler,
} = require("@remix-run/{adapter}");
createRequestHandler({ build, getLoadContext });

以下是使用 express 的完整示例：

¥Here's a full example with express:

const {
  createRequestHandler,
} = require("@remix-run/express");
const express = require("express");

const app = express();

// needs to handle all verbs (GET, POST, etc.)
app.all(
  "*",
  createRequestHandler({
    // `remix build` and `remix dev` output files to a build directory, you need
    // to pass that build to the request handler
    build: require("./build"),

    // Return anything you want here to be available as `context` in your
    // loaders and actions. This is where you can bridge the gap between Remix
    // and your server
    getLoadContext(req, res) {
      return {};
    },
  })
);

以下是使用 Architect (AWS) 的示例：

¥Here's an example with Architect (AWS):

const {
  createRequestHandler,
} = require("@remix-run/architect");
exports.handler = createRequestHandler({
  build: require("./build"),
});

以下是使用简化 Cloudflare Workers API 的示例：

¥Here's an example with the simplified Cloudflare Workers API:

import { createEventHandler } from "@remix-run/cloudflare-workers";

import * as build from "../build";

addEventListener("fetch", createEventHandler({ build }));

以下是使用更底层 Cloudflare Workers API 的示例：

¥Here's an example with the lower-level Cloudflare Workers API:

import {
  createRequestHandler,
  handleAsset,
} from "@remix-run/cloudflare-workers";

import * as build from "../build";

const handleRequest = createRequestHandler({ build });

const handleEvent = async (event: FetchEvent) => {
  let response = await handleAsset(event, build);

  if (!response) {
    response = await handleRequest(event);
  }

  return response;
};

addEventListener("fetch", (event) => {
  try {
    event.respondWith(handleEvent(event));
  } catch (e: any) {
    if (process.env.NODE_ENV === "development") {
      event.respondWith(
        new Response(e.message || e.toString(), {
          status: 500,
        })
      );
    }

    event.respondWith(
      new Response("Internal Error", { status: 500 })
    );
  }
});