Production BuildしたReactアプリをローカル環境で実行する
こんにちは、CX事業本部 IoT事業部の若槻です。
今回は、Production Build（本番ビルド）したReactアプリケーションをローカル環境で実行する方法を確認してみました。
環境
- react@17.0.2
- react-scripts@5.0.0
Development Buildはデバッグしながらの開発に便利
開発作業中のReactアプリケーションをローカル端末で手っ取り早くデバッグしたい時には、npm run start（react-scripts start）を実行すればローカルでアプリケーションを実行することができます。
$ npm run start Compiled successfully! You can now view react-app in the browser. Local: http://localhost:3000 On Your Network: http://192.168.10.101:3000 Note that the development build is not optimized. To create a production build, use npm run build.
http://localhost:3000またはhttp://<local address>:3000に作業中のブラウザからアクセスすれば、開発中のアプリケーションを開くことができます。
このビルド方法をDevelopment Build（開発ビルド）といいます。Development Buildでは、ソースコードの変更が動的にビルドされるため、ローカルで起動中のアプリケーションにリアルタイムに反映されるのでデバッグしながらの開発においてとても便利です。
Production Buildのデバッグもローカルでしたい
開発時に使用されるDevelopment Buildに対して、本番アプリケーションとしてのデプロイのために使用されるビルド方法を Production Build（本番ビルド）といいます。
Production Buildでは、Development Buildに比べてパフォーマンスやその他本番利用の面での最適化（Optimize）がされたビルドが行われます。
npm run build（create-react-appでプロジェクト作成した場合は既定ではreact-scripts build）を実行することにより、/buildディレクトリにProduction Buildされたファイル群が作成されます。この/buildディレクトリの中身をインターネット上のホスティングサービスなどにデプロイすればユーザーがアプリケーションを利用できるようになります。
$ npm run build > react-app@0.1.0 build > react-scripts build Creating an optimized production build... Compiled successfully. File sizes after gzip: 43.71 kB build/static/js/main.22512158.js 1.78 kB build/static/js/787.b701888c.chunk.js 541 B build/static/css/main.073c9b0a.css The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json. The build folder is ready to be deployed. You may serve it with a static server: serve -s build Find out more about deployment here: https://cra.link/deployment
このProduction Buildの最適化処理がされたアプリケーションではWarningsの抑制などが行われます。ユーザーに対してブラウザのコンソールに不必要なWarningsが表示されるのは好ましくありませんからね。
さて、本番利用だけでなく開発作業においても、Development BuildではなくProduction Buildを使用してより本番に近い挙動得られるアプリケーションでデバッグをしたい場合がよくあります。しかしプログラマは怠け者なので、時間の掛かるデプロイの実行は極力は行いたくありません。
そんな時にはserveコマンドを使用すればProduction Buildなアプリケーションをローカルで実行可能です。
まずserveをインストールします。
$ npm install -g serve
すでにnpm run buildによるProduction Buildが行われていれば、serve -s buildを実行するだけで/buildディレクトリからアプリケーションがローカルで起動されます。
$ serve -s build ┌────────────────────────────────────────────────────┐ │ │ │ Serving! │ │ │ │ - Local: http://localhost:3000 │ │ - On Your Network: http://192.168.10.101:3000 │ │ │ │ Copied local address to clipboard! │ │ │ └────────────────────────────────────────────────────┘
Production Buildのアプリケーションがローカルで起動できました！
React Developer Tools
React Developer ToolsというFacebook謹製のReactアプリケーションを視覚的にデバッグできる便利なChrome拡張があるのですが、これを使うと現在起動しているアプリケーションがDevelopmentとProductionのいずれのビルドなのか簡単に確認することができます。
Production Buildによるアプリケーションの場合。
Development Buildによるアプリケーションの場合。拡張アイコンが赤くなります。
どちらもURLはlocalhostで起動されるので、今どっちで起動してるんだっけ？と迷わずに済みますね。
参考
以上
