サーバーアダプター

公式アダプター

イディオムな 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();
 
// すべての動詞（GET、POST など）を処理する必要があります
app.all(
  "*",
  createRequestHandler({
    // `remix build` と `remix dev` はビルドディレクトリに出力ファイルを生成します。
    // そのビルドを要求ハンドラーに渡す必要があります
    build: require("./build"),
 
    // ローダーとアクションで `context` として利用できるように、ここに何かを返します。
    // これは、Remix とサーバー間のギャップを埋めることができる場所です。
    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 })
    );
  }
});