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
開発サーバーを起動するには次のオプションを指定することが出来ます。
host: リッスンするホストを指定します。デフォルトではlocalhostになります。
port: リッスンするポートを指定します。デフォルトでは3000になります。
https: HTTPSプロトコルを有効にする場合に指定します。デフォルトはfalseになります。
もし開発サーバーでHTTPSプロトコルを使う場合、react-server.config.mjsまたはvite.config.mjsでHTTPSの設定をする必要があります。詳しくはViteドキュメントのserver.httpsを参照してください。
open: サーバー起動時にデフォルトブラウザを開くか指定します。デフォルトはfalseです。
デフォルトブラウザでアプリケーションにアクセスします。
cors: CORSを有効にします。デフォルトはfalseです。
もしオリジン間リソース共有を有効化したい場合は便利です。より詳細なCORS設定が必要な場合はreact-server.config.mjsまたはvite.config.mjsで設定することが出来ます。詳しくはViteドキュメントのserver.corsを参照してください。
force: 依存関係を強制的に最適化します。デフォルトはfalseです。
これはvite --forceと同じです。依存関係の最適化を強制し、Viteキャッシュをクリアします。
watch: 設定ファイルの変更を監視します。デフォルトはfalseです。
監視を無効にするには--no-watchを指定する必要があります。
clear-screen: サーバー起動時にターミナルをクリアするか指定します。デフォルトはfalseです。
ターミナルをクリアしてサーバーを起動したいときに使います。
no-color: カラー出力を無効化するか。デフォルトはfalseです。
CI/CD環境では便利なオプションです。
eval: node -eと同じように引数からサーバーのエントリーポイントを評価します。または標準入力も指定することが出来ます。このエントリーポイントは仮想化エントリーポイントとなり、ファイルシステムには書き込まれません。
version: バージョンを表示します。 出力にはマシンのアーキテクチャとnode.jsのバージョンも含まれます。
outDir: ビルドファイルの出力先を指定します。デフォルトは.react-serverです。
name: サーバー名を指定します。ログに表示します。デフォルトはreact-serverです。
minify: ビルドを最小化する。デフォルトはtrueです。
TodoアプリケーションのようにReact Server Componentのみを使用し、クライアントコンポーネントを使用していない場合はファイルサイズを最小化する必要はありません。もしクライアントコンポーネントを最小化する必要がない場合は--no-minifyをオプションに指定してください。
sourcemap: Source Mapを作成するか指定します。デフォルトはfalseです。
詳細はViteドキュメントのbuild.sourcemapを参照してください。
no-color: コンソールでのカラー出力するか指定します。デフォルトはfalseです。
CI/CD環境では便利なオプションです。
server: サーバーコンポーネントのビルドを行うか指定します。デフォルトはtrueです。
アプリケーションのクライアント部分だけをビルドしたい場合は、--no-serverをオプションに指定します。
client: クライアントコンポーネントのビルドを行うか指定します。デフォルトはtrueです。
サーバーコンポーネントだけをビルドしたい場合は、--no-clientをオプションに指定します。
export: 静的ファイルのエクスポートをするか指定します。デフォルトはfalseです。
アプリケーションを静的HTMLページでエクスポートすることが出来ます。react-server.config.mjsでルーティングを定義してエクスポートすることが出来ます。詳細は静的生成を参照してください。
compression: 圧縮をするか指定します。デフォルトはfalseです。
静的ファイルのビルドを圧縮したい場合、圧縮を有効にすることが出来ます。圧縮はデフォルトでは有効になっていません。圧縮を有効にすると、Gzipまたは、Brotliを使って圧縮することが出来ます。プロダクションモードのサーバーは圧縮された静的ファイルが存在する場合、デフォルトでこれらの圧縮ファイルを提供します。
deploy: アダプターを使ってデプロイするか指定します。デフォルトはfalseです。
react-server.config.mjsファイルでアダプターを使用している場合、アダプターは事前にビルドを行い最後にアプリケーションをデプロイします。
eval: node -eと同じように引数に指定したエントリーポイントを評価します。または標準入力も指定することが出来ます。このエントリーポイントはファイルシステムに書き込んだものではなく仮想的なエントリーポイントです。
outDir: ビルドファイルの出力先を指定します。デフォルトは.react-serverです。
host、port、https、corsは開発サーバーのオプションと同じ内容です。
origin: URLのオリジン部分を定数に指定します。環境変数ORIGINを使っても同じ結果になります。
trust-proxy: X-Forwarded-*ヘッダーを信頼します。
originとtrust-proxyについてはHattipのドキュメントを参照してください。
build: 指定されたエントリーポイントを使用して、プロダクションモードでサーバーを起動する前にビルドを実行します。
outDir: ビルドファイルの出力先を指定します。デフォルトは.react-serverです。もしビルド時にファイルの出力先を変更している場合、このオプションを指定する必要があります。