CLI

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

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

pnpm react-server --help

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

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

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

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

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

pnpm react-server ./App.jsx

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

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

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

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

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

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

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

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

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

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

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

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

node -eと同じように引数からサーバーのエントリーポイントを評価します。または標準入力も指定することが出来ます。このエントリーポイントは仮想化エントリーポイントとなり、ファイルシステムには書き込まれません。

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

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

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

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

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

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

使用できる値: true、inline、hidden、server、server-inline。

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はプラットフォームごとに自動的に処理されます：

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

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

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

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

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

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

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

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

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

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

node -eと同じように引数に指定したエントリーポイントを評価します。または標準入力も指定することが出来ます。このエントリーポイントはファイルシステムに書き込んだものではなく仮想的なエントリーポイントです。

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

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

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

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

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

host、port、https、corsは開発サーバーのオプションと同じ内容です。

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

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

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

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