react-server675fbba4
react-servertreemaindocssrcpagesja(pages)featurescli.mdx
docs/src/pages/ja/(pages)/features/cli.mdxmdx17.3 KiB8c8882e9

title: CLI order: -1 category: Features

import Link from "../../../../components/Link.jsx";

CLI

react-server CLIはアプリケーションの開発とデプロイに使うメインツールです。CLI はアプリケーションのビルド、実行、デプロイをサポートしてくれます。

利用可能なコマンドを見るには次のコマンドを実行してください。

pnpm react-server --help
<Link name="commands"> ## コマンド </Link>

react-server CLIの第一引数には常にアプリケーションのエントリーポイントを指定する必要があります。ファイルベースルーティングの場合はエントリーポイントを定義してくれるので指定する必要はありません。

  • [root]: デベロップメントモードでアプリケーションを実行
  • build [root]: プロダクションモードでビルド
  • start: プロダクションモードでアプリケーションを実行

[root]では、デフォルトでReact Server Componentをエクスポートする必要があります。このファイルがエントリーポイントとなりサーバーにリクエストがあるたびにサーバーでレンダリングを行います。

また、エントリーポイントでハッシュ・フラグメントを使用して、特定のエクスポートを指定することもできます。例えば./index.jsxにエントリーポイントがあり、App コンポーネントをエクスポートしたいなら./index.jsx#Appとすることが出来ます。

<Link name="development-server-options"> ## 開発サーバーのオプション </Link>

もし./App.jsxがエントリーポイントなら、次のコマンドで開発サーバーを起動することが出来ます。

pnpm react-server ./App.jsx

開発サーバーを起動するには次のオプションを指定することが出来ます。

<Link name="dev-host"> ### --host </Link>

リッスンするホストを指定します。デフォルトではlocalhostになります。

<Link name="dev-port"> ### --port </Link>

リッスンするポートを指定します。デフォルトでは3000になります。

<Link name="dev-https"> ### --https </Link>

HTTPSプロトコルを有効にする場合に指定します。デフォルトはfalseになります。

もし開発サーバーでHTTPSプロトコルを使う場合、react-server.config.mjsまたはvite.config.mjsでHTTPSの設定をする必要があります。詳しくはViteドキュメントのserver.httpsを参照してください。

<Link name="dev-cors"> ### --cors </Link>

CORSを有効にします。デフォルトはfalseです。

もしオリジン間リソース共有を有効化したい場合は便利です。より詳細なCORS設定が必要な場合はreact-server.config.mjsまたはvite.config.mjsで設定することが出来ます。詳しくはViteドキュメントのserver.corsを参照してください。

<Link name="dev-origin"> ### --origin </Link>

URLのオリジン部分を定数に指定します。環境変数ORIGINを使っても同じ結果になります。

<Link name="dev-trust-proxy"> ### --trust-proxy </Link>

X-Forwarded-*ヘッダーを信頼します。

<Link name="dev-open"> ### --open </Link>

サーバー起動時にデフォルトブラウザを開くか指定します。デフォルトはfalseです。デフォルトブラウザでアプリケーションにアクセスします。

<Link name="dev-force"> ### --force </Link>

依存関係を強制的に最適化します。デフォルトはfalseです。これはvite --forceと同じです。依存関係の最適化を強制し、Viteキャッシュをクリアします。

<Link name="dev-watch"> ### --watch </Link>

設定ファイルの変更を監視します。デフォルトはfalseです。監視を無効にするには--no-watchを指定する必要があります。

<Link name="dev-clear-screen"> ### --clear-screen </Link>

サーバー起動時にターミナルをクリアするか指定します。デフォルトはfalseです。ターミナルをクリアしてサーバーを起動したいときに使います。

<Link name="dev-devtools"> ### --devtools </Link>

組み込みのreact-server DevToolsを有効にします。デフォルトはfalseです。

有効にすると、開発中にアプリケーションにDevToolsパネルが挿入されます。RSCペイロード、キャッシュエントリ、ルート、アウトレット、リモートコンポーネント、ライブコンポーネント、ワーカー、サーバーログなど、アプリケーションの内部をリアルタイムで検査できます。

react-server.config.mjsで設定することもできます:

export default {
  devtools: true,
};
<Link name="dev-no-color"> ### --no-color </Link>

カラー出力を無効化するか。デフォルトはfalseです。CI/CD環境では便利なオプションです。

<Link name="dev-no-validation"> ### --no-validation </Link>

設定ファイルのバリデーションをスキップします。デフォルトはfalseです。

このオプションを指定すると、開発サーバーの起動時にreact-server.config.*ファイルのバリデーションを行いません。バリデーションが正しい設定を誤って拒否する場合や、通常は禁止されているオプションを意図的に使用する必要がある場合のエスケープハッチとして便利です。

<Link name="dev-eval"> ### --eval </Link>

node -eと同じように引数からサーバーのエントリーポイントを評価します。値を指定せずに --eval だけを渡すと、エントリーポイントを 標準入力 から読み込みます。標準入力は 自動的には消費されません--eval が明示的に指定された場合にのみ読み込まれます。このエントリーポイントは仮想化エントリーポイントとなり、ファイルシステムには書き込まれません。

# インラインコード
pnpm exec react-server --eval "export default () => <h1>Hello</h1>;"

# 標準入力から(値を指定しない `--eval` に注意)
echo 'export default () => <h1>Hello from stdin</h1>;' | pnpm exec react-server --eval

# シェルのリダイレクトでファイルから
pnpm exec react-server --eval < ./entry.jsx
<Link name="dev-version"> ### --version </Link>

バージョンを表示します。出力にはマシンのアーキテクチャとnode.jsのバージョンも含まれます。

<Link name="dev-outdir"> ### --outDir </Link>

ビルドファイルの出力先を指定します。デフォルトは.react-serverです。

<Link name="dev-name"> ### --name </Link>

サーバー名を指定します。ログに表示します。デフォルトはreact-serverです。

<Link name="build-options"> ## ビルドオプション </Link><Link name="build-minify"> ### --minify </Link>

ビルドを最小化する。デフォルトはtrueです。

TodoアプリケーションのようにReact Server Componentのみを使用し、クライアントコンポーネントを使用していない場合はファイルサイズを最小化する必要はありません。もしクライアントコンポーネントを最小化する必要がない場合は--no-minifyをオプションに指定してください。

<Link name="build-sourcemap"> ### --sourcemap </Link>

プロダクションビルドのSource Mapを作成するか指定します。デフォルトはfalseです。

使用できる値: trueinlinehiddenserverserver-inline

説明
true サーバーとクライアントの両方のバンドルに.mapファイルを生成します
inline 出力ファイルにSource Mapをインラインで埋め込みます
hidden sourceMappingURLコメントなしで.mapファイルを生成します
server サーバーバンドルのみ.mapファイルを生成します
server-inline サーバーバンドルのみにSource Mapをインラインで埋め込みます

Source Mapが有効な場合、プロダクション環境のサーバーサイドエラースタックトレースは、source-map-supportを使用して自動的に元のソースファイルの位置に書き換えられます。NODE_OPTIONS='--enable-source-maps'が既に設定されている場合、競合を避けるためsource-map-supportパッケージはスキップされます。

--sourcemap=serverまたは--sourcemap=server-inlineを使うと、サーバーでマッピングされたスタックトレースを取得しつつ、ブラウザのdevtoolsからソースコードを非公開に保てます。

react-server.config.mjsで設定することもできます:

export default {
  sourcemap: true, // または "inline"、"hidden"、"server"、"server-inline"
};

Note: アダプターでデプロイする場合、Source Mapはプラットフォームごとに自動的に処理されます:<br/><br/>

  • Vercel: .mapファイルが関数バンドルに含まれ、NODE_OPTIONS='--enable-source-maps'が設定されます。
  • Cloudflare: wrangler.tomlupload_source_mapsが有効化され、ダッシュボードやwrangler tailでマッピングされたスタックトレースが表示されます。
  • Netlify: .mapファイルが関数と共にデプロイされます。Denoベースのエッジ関数はネイティブにそれらを認識します。

エッジランタイムでは、これらのプラットフォームがインフラストラクチャレベルでSource Mapを処理するため、source-map-supportパッケージはスキップされます。

詳細はViteドキュメントのbuild.sourcemapを参照してください。

<Link name="build-no-color"> ### --no-color </Link>

コンソールでのカラー出力するか指定します。デフォルトはfalseです。CI/CD環境では便利なオプションです。

<Link name="build-no-validation"> ### --no-validation </Link>

設定ファイルのバリデーションをスキップします。デフォルトはfalseです。

このオプションを指定すると、ビルドプロセスの前にreact-server.config.*ファイルのバリデーションを行いません。バリデーションが正しい設定を誤って拒否する場合や、通常は禁止されているオプションを意図的に使用する必要がある場合のエスケープハッチとして便利です。

<Link name="build-export"> ### --export </Link>

静的ファイルのエクスポートをするか指定します。デフォルトはfalseです。

アプリケーションを静的HTMLページでエクスポートすることが出来ます。react-server.config.mjsでルーティングを定義してエクスポートすることが出来ます。詳細は静的生成を参照してください。

<Link name="build-export-concurrency"> ### --export-concurrency </Link>

静的エクスポートのパスをレンダリングするのに使う並列プロセス数を指定します。デフォルトは利用可能なCPUコア数に応じて2から4の範囲で決定されます。

1を指定すると、エクスポートはメインプロセス内で単一のパイプラインとして実行され、パスは1つずつ順番にレンダリングされます。フォークやIPCのオーバーヘッドがないため最も軽量なモードで、小規模なエクスポートやデバッグに適しています。

1より大きい値を指定すると、その数だけレンダリング用の子プロセスがフォークされます。各子プロセスは独自のRSCメインスレッドとSSRワーカースレッドを持ち、1度に1つのパスをレンダリングします。コーディネーターはIPC経由で空いている子プロセスにパスを割り当てます。出力バイトはIPC境界を越えず、すべての成果物(HTML、.gz / .brサイドカー、.postponed.json.prerender-cache.json)は子プロセス内で直接ディスクに書き出されます。どちらのモードでも生成される成果物のセットは同一です。

このオプションは、数万ページに及ぶ大規模なエクスポートを行う場合や、個々のページでサーバー側の処理が重い場合(Shikiによるシンタックスハイライト、大規模なMDXツリー、負荷の高いサーバーコンポーネントなど)に効果を発揮します。小規模なエクスポートではフォーク自体のコストが支配的になるため、1を指定したほうが速いこともあります。

pnpm react-server build --export --export-concurrency 8

react-server.config.mjsexportConcurrencyとしても設定できます。

<Link name="build-compression"> ### --compression </Link>

圧縮をするか指定します。デフォルトはfalseです。

静的ファイルのビルドを圧縮したい場合、圧縮を有効にすることが出来ます。圧縮はデフォルトでは有効になっていません。圧縮を有効にすると、Gzipまたは、Brotliを使って圧縮することが出来ます。プロダクションモードのサーバーは圧縮された静的ファイルが存在する場合、デフォルトでこれらの圧縮ファイルを提供します。

<Link name="build-deploy"> ### --deploy </Link>

アダプターを使ってデプロイするか指定します。デフォルトはfalseです。

react-server.config.mjsファイルでアダプターを使用している場合、アダプターは事前にビルドを行い最後にアプリケーションをデプロイします。

--deploy にJSON文字列を渡すことで、デプロイ時にアダプター固有のオプションを指定することもできます。これらのオプションは設定ファイルの adapterOptions とマージされ、CLIの値が優先されます。

pnpm react-server build --deploy '{"project": "my-project"}'

これは、設定ファイルを変更せずにアダプターオプションを上書きまたは追加したい場合に便利です。例えば、デプロイ先のプロジェクトや環境を指定する際に使用できます。

<Link name="build-eval"> ### --eval </Link>

node -eと同じように引数に指定したエントリーポイントを評価します。値を指定せずに --eval だけを渡すと、エントリーポイントを 標準入力 から読み込みます。標準入力は 自動的には消費されません--eval が明示的に指定された場合にのみ読み込まれます。このエントリーポイントはファイルシステムに書き込んだものではなく仮想的なエントリーポイントです。

# インラインコード
pnpm exec react-server build --eval "export default () => <h1>Hello</h1>;"

# 標準入力から
echo 'export default () => <h1>Hi</h1>;' | pnpm exec react-server build --eval

# シェルのリダイレクトでファイルから
pnpm exec react-server build --eval < ./entry.jsx
<Link name="build-outdir"> ### --outDir </Link>

ビルドファイルの出力先を指定します。デフォルトは.react-serverです。

<Link name="build-edge"> ### --edge </Link>

Edge ビルドモードを有効にするか指定します。デフォルトはfalseです。Edge ランタイム環境向けにアプリケーションをビルドします。

<Link name="build-silent"> ### --silent </Link>

ビルド出力を抑制するか指定します。デフォルトはfalseです。

このオプションはバンドラーからのすべてのビルド出力を抑制します。CI/CD環境や、詳細な出力を必要としないプログラムからビルドを実行する場合に便利です。

<Link name="build-verbose"> ### --verbose </Link>

ビルド出力を詳細表示するか指定します。デフォルトはfalseです。バンドラーの詳細なビルドログを出力します。

<Link name="start-options"> ## スタートオプション </Link>

hostporthttpscorsは開発サーバーのオプションと同じ内容です。

<Link name="start-origin"> ### --origin </Link>

URLのオリジン部分を定数に指定します。環境変数ORIGINを使っても同じ結果になります。

<Link name="start-trust-proxy"> ### --trust-proxy </Link>

X-Forwarded-*ヘッダーを信頼します。

<Link name="start-build"> ### --build </Link>

指定されたエントリーポイントを使用して、プロダクションモードでサーバーを起動する前にビルドを実行します。

<Link name="start-outdir"> ### --outDir </Link>

ビルドファイルの出力先を指定します。デフォルトは.react-serverです。もしビルド時にファイルの出力先を変更している場合、このオプションを指定する必要があります。