最近Reactで本番環境用にBuildをする機会があったのですが、これまでbuildせず開発用サーバーで試したことしかなかった私からすると、いろいろ考慮しなければいけないポイントが多くて不安になることが多くありました。
そんな私がもし開発前に知っていれば楽だっただろうな。と思うReact開発のポイントをまとめてみたいと思います。
１，本番環境ではBuildしよう。
reactでBuildする。というのは簡潔に言うと 「js, cssファイルを一つにまとめること」 である。Reactにはいくつかこのような処理をおこなってくれるツールがあるらしいが、今回はcreate react appにより作成したプロジェクトなので、webpackがデフォルトのビルドツールらしい。
最初のころはBuildをする必要があることを知らなかったのと、 「よくわからなくて怖い」となっていたので 「本番環境ではBuildする必要があるけど、怖くないよ。ただファイルをまとめて軽くするだけだよ」 ってことを以前の自分に教えてあげたい。
２，環境ごとにBuildコマンドは使い分けよう
build（jsファイルやcssファイルをまとめて軽量化）するときに、dotenv-cliをプロジェクトにinstallしておけば、どの環境変数ファイルを使うのかをわけることができる。
buildコマンドはデフォルトでは一つしかないが、package.jsonを編集すればstaging環境用Buildとproduction環境用Buildを分けることができる。
最終的にはこのような構成に落ち着いた。
当初の自分には、 「buildコマンドは使い分けると便利だからどんどんcustomしていけばいい」 とでも言ってあげたい。
..... package.json
"scripts": {
"start": "react-scripts start",
"build-staging": "dotenv -e .env.staging react-scripts build",
"build-production": "dotenv -e .env.production react-scripts build",
"test": "dotenv -e .env.test react-scripts test",
"eject": "react-scripts eject"
},
......
３，エラーページの設置
本番環境レベルの運用を意識しないとこういったエラー対応ページを用意しようと思わないもので、 「エラー時のページってどうすればいいんだろ」 と思っていた自分には 「Reactだとめっちゃかんたんに用意できるよ」 と言って不安を和らげてあげたい。
500や404ページは、シンプルにComponentで用意すればいい。それを<ErrorBoundary/>で挟むだけでいい。
<ErrorBoundary/>Componentを使用するとエラー時に表示したいページを制御することができる。一番単純に使うとすると、APP.jsのを挟む形で利用するとすべてのエラーを受け止めるエラーページを設置できる。
また、もっと個別の機能やページごとにエラーバウンダリーを設置できる。
ドキュメントによるとfaceBookMessangerはサイドバーとメイン画面は別々のエラーバウンダリーでラップされており、どちらかでエラーが起きても、もう片方に問題がなければそちらは動くといったようにできているらしい。
４，Build時にコードが丸見えになる問題への対処
reactはBuild時に、SourceMapと言われるMinifyされたコードをMinify前のコードに復元できる情報を持ったファイルを生成する。
Chromeではこれを読み込んでコードを復元するという機能がデフォルトであるため、devToolのsouceタブを開くとreactのコードが復元されてしまっている。これは対処しないとセキュリティ的によろしくない。
対処法は、GENERATE_SOURCEMAP=falseを環境変数（.envファイル）に適用するだけでいい。
これは少なくともやっておかないといろいろ怖いので、これからReact使うって人にはとりあえず教えておきたい。
５，Reactのビルド時に出るメモリ不足のエラー
Reactはビルドするときに、ソースマップを生成する過程でメモリ不足になることがあるらしい。４で記述したGENERATE_SOURCEMAP=falseを設定しておけばソースマップが生成されないので解決すると思われる。
それでも解決できなそうであれば、NODE_OPTIONS=--max_old_space_size= ~ で確保できるヒープ領域の上限を開放してあげれば解決できると思う。
僕の場合、EC2でビルドしていたのですがそもそもそちらのメモリ不足でswap領域を確保することで解決できたので問題の切り分けは大事ですね。
これくらいを知っておけばReactを本番環境で動かすための不安はだいぶ減らすことができそうなので、まとめてみました。