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
です。もしビルド時にファイルの出力先を変更している場合、このオプションを指定する必要があります。