デプロイ →このページを編集.md

アダプタ API

@lazarv/react-server/adapters/core で利用可能なアダプタ API を使用することで、任意のデプロイ先に対応したデプロイアダプタを簡単に作成できます。

アダプタハンドラは、アプリケーションのデプロイを処理するために実装する必要がある関数です。この関数はビルドプロセスによって呼び出され、デプロイの準備に必要な情報を受け取ります。

アダプタハンドラの実装例は、Vercel アダプタの実装にあります。

まず、Vercel アダプタの実装をコピーし、それを必要に応じて変更することで始めることができます。

アダプタハンドラ関数をファイルからエクスポートし、その後 createAdapter 関数を使用してアダプタインスタンスを作成する必要があります。

また、ユーザーが react-server.config.js ファイルでアダプタオプションを指定した場合にアダプタインスタンスを作成するための関数をデフォルトエクスポートする必要があります。

import { createAdapter } from "@lazarv/react-server/adapters/core";

export const adapter = createAdapter({
  name: "Vercel",
  outDir: ".vercel",
  outStaticDir: "static",
  handler: async ({ adapterOptions, files, copy, config, reactServerDir, reactServerOutDir, root, options }) => {
    // アダプタハンドラの実装
  },
  deploy: {
    command: "vercel",
    args: ["deploy", "--prebuilt"],
  },
});

export default function defineConfig(adapterOptions) {
  return async (_, root, options) => adapter(adapterOptions, root, options);
}

createAdapter 関数にアダプタのプロパティを渡してアダプタを設定する必要があります。これらのプロパティは以下の通りです。

name: アダプタの名前

outDir: アダプタがデプロイ構成を出力するディレクトリ

outStaticDir: 静的ファイルを出力するディレクトリ。これはオプションです。指定された場合、アダプタは静的ファイルを出力ディレクトリにコピーします。

outServerDir: サーバファイルを出力するディレクトリ。これはオプションです。指定された場合、アダプタはサーバファイルを出力ディレクトリにコピーします。

handler: アダプタハンドラ関数

deploy: デプロイコマンドと引数。これはオプションです。指定された場合、アプリケーションをデプロイするために、ビルド後に開発者が実行する必要のあるコマンドを表示します。ビルド中に --deploy フラグが指定された場合、アダプタはこのコマンドを実行します。--deploy にJSON文字列を渡すこともできます（例: --deploy '{"project": "my-project"}'）。渡されたオプションは adapterOptions にマージされ、CLIの値が優先されます。deploy プロパティは関数としても指定でき、アダプタオプション、CLI オプション、およびハンドラの結果を使用して呼び出されます。アダプタオプションやハンドラの結果に基づいてデプロイコマンドをカスタマイズする必要がある場合に便利です。command と args を含む結果を提供しない場合、デフォルトのデプロイ処理（コマンドの実行）はスキップされます。これは、アダプタ内でカスタムデプロイワークフローを実装したい場合に役立ちます。

export const adapter = createAdapter({
  // ...
  handler: async ({ adapterOptions, files, copy, config, reactServerDir, reactServerOutDir, root, options }) => {
      // アダプタハンドラの実装
    return {
      // ハンドラの結果をここに記述します。この結果は deploy 関数に渡されます。
    };
  },
  async deploy({ adapterOptions, options, handlerResult }) {
    // アダプタオプション、CLIオプション、またはハンドラの結果に基づいてデプロイコマンドをカスタマイズします
    return {
      command: "vercel",
      args: ["deploy", "--prebuilt"],
    };
  },
});

アダプタハンドラ関数は以下のプロパティを受け取ります

files オブジェクトには以下の関数が含まれます：

const staticFiles = await files.static();

copy オブジェクトには以下の関数が含まれます

await copy.server(outServerDir);

banner

コンソールにバナーを表示します。

banner("building serverless functions");

message

コンソールにメッセージを表示します。アクションとメッセージを示すために、主要色と補助色が使用されます。

message("creating", "index.func module");

success

コンソールに成功メッセージを表示します。

success("index.func serverless function initialized.");

clearDirectory

ディレクトリをクリアします。

await clearDirectory(outServerDir);

writeJSON

JSON ファイルを書き込みます。

await writeJSON(join(outServerDir, ".vc-config.json"), {
  runtime: "nodejs20.x",
  handler: "index.mjs",
  launcherType: "Nodejs",
  shouldAddHelpers: true,
  supportsResponseStreaming: true,
  ...adapterOptions?.serverlessFunctions?.index,
});

clearProgress

アクティブなプログレスインジケーターをクリアします。

clearProgress();

getConfig

react-server.config.js ファイルからアプリケーションの設定を返します。

const config = getConfig();

getPublicDir

公開ディレクトリへのパスを返します。

const publicDir = getPublicDir();

getFiles

指定された glob パターンに一致するファイルのリストを返します。

const files = await getFiles("**/*.mjs", srcDir);

getDependencies

アダプタファイルの依存関係のリストを返します。これは @vercel/nft を使用してファイルの依存関係をトレースします。

const dependencies = await getDependencies(adapterFiles, reactServerDir);

spawnCommand

現在の作業ディレクトリでコマンドを実行します。

await spawnCommand("vercel", ["deploy", "--prebuilt"]);

deepMerge

2つのオブジェクトをディープマージします。ターゲット（アダプタ設定）はプリミティブ値に対して優先されます。配列の場合、ターゲットのアイテムが使用され、ソースのユニークなアイテムが先頭に追加されます。

const merged = deepMerge(sourceConfig, adapterConfig);

readToml

TOML ファイルを読み取りパースします。パースに失敗した場合やファイルが存在しない場合は null を返します。

const config = readToml("wrangler.toml");

writeToml

TOML ファイルを書き込みます。

await writeToml("wrangler.toml", config);

mergeTomlConfig

既存の TOML ファイルを読み取り、アダプタ設定とマージします。マージされた設定を返します。

const config = mergeTomlConfig("wrangler.toml", adapterConfig);
← デプロイ: Singlefileチュートリアル: 最初のアプリケーション →