伺服器轉接器

官方轉接器

慣用的 Remix 應用程式通常可以部署在任何地方，因為 Remix 會將伺服器的請求/回應調整為 Web Fetch API。它透過轉接器來完成此操作。我們維護幾個轉接器

@remix-run/architect
@remix-run/cloudflare-pages
@remix-run/cloudflare-workers
@remix-run/express

這些轉接器會匯入到您伺服器的進入點，且不會在您的 Remix 應用程式本身內部使用。

如果您使用 npx create-remix@latest 以及內建的 Remix 應用程式伺服器以外的選項來初始化您的應用程式，您會注意到有一個 server/index.js 檔案匯入並使用這些轉接器之一。

如果您使用內建的 Remix 應用程式伺服器，您就不會與此 API 互動

每個轉接器都有相同的 API。未來我們可能會針對您要部署的平台提供專屬的協助程式。

社群轉接器

@fastly/remix-server-adapter - 適用於 Fastly Compute。
@mcansh/remix-fastify - 適用於 Fastify。
@mcansh/remix-raw-http - 適用於傳統的基礎 Node 伺服器。
@netlify/remix-adapter - 適用於 Netlify。
@netlify/remix-edge-adapter - 適用於 Netlify Edge。
@vercel/remix - 適用於 Vercel。
remix-google-cloud-functions - 適用於 Google Cloud 和 Firebase 函數。
partymix - 適用於 PartyKit。
@scandinavianairlines/remix-azure-functions：適用於 Azure Functions 和 Azure Static Web Apps。

建立一個适配器

`createRequestHandler`

為您的伺服器建立一個請求處理器，以提供應用程式服務。這是您的 Remix 應用程式的最終入口點。

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

這是一個使用 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) 的範例

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

這是一個使用簡化版 Cloudflare Workers API 的範例

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

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

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

這是一個使用較底層 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 })
    );
  }
});