Create React Appで作成したアプリにpackage.jsonのバージョン情報を表示する

f:id:kidani_a:20200512003126p:plain

 

こんな感じのものを作る話。

 

 

[バージョン情報]

$ yarn -v
1.22.4
$ create-react-app --version
3.4.1

 

yarnを使うとcreate-react-appは自動的に最新バージョンになるのであまり気にしなくてよい。

classic.yarnpkg.com

 

準備として、任意のディレクトリで下記のコマンドを実行し、新たにプロジェクトを作成する。

yarn create react-app sample-app --template typescript

 

[環境変数を利用する]

シンプルに<div>Version 0.1.0</div>という記述を追加してもアプリのバージョンを表示することはできる。しかしせっかくなので、package.jsonに記載されているバージョン情報を利用したい。

 

react package.json versionで検索すると、次のページにたどり着いた。

stackoverflow.com

 

var pjson = require('./package.json');のようにすれば、package.jsonの情報をなんでも利用できるが、セキュリティ上問題があるからやるべきではないと言われている。なるほど。

 

コメントを読み進めると、$npm_package_versionをnode上で環境変数として利用できるとある。

しかし、App.tsx<p>{process.env.npm_package_version}</p>を追加してサーバーを起動しても画面に反映されない。

 

create-react-appのサイトを調べると、React側で利用できる環境変数は、NODE_ENVという特別な環境変数と、REACT_APP_ではじまる環境変数しか利用できないらしい。

create-react-app.dev

 

環境変数はプロジェクトのルートディレクトリに配置した.envファイルに定義することもできる。これを利用して、下記のような.envファイルを作成する。

REACT_APP_VERSION=$npm_package_version

 

同様に、App.tsxファイルにも追記する。

<div>Version {process.env.REACT_APP_VERSION}</div>

 

これで無事バージョン情報をブラウザで確認できた。

f:id:kidani_a:20200509230310p:plain

(画像では.env.localファイルを追加して、その中でREACT_APP_VERSION=$npm_package_version.localと指定しているので、バージョンの末尾に.localとついている)

 

[productionビルドを試す]

yarn buildコマンドを実行するとbuildディレクトリ以下にminifyされたjsファイル(とcssファイル)が出力される。

念のためこちらの中身を確認しておくと、ちゃんとpackage.jsonに記載されているバージョンがjsファイル上にハードコーディングされていた。

 

f:id:kidani_a:20200512002511p:plain

.env.localファイルが存在しても、productionビルド時にはちゃんと.envファイルを参照してビルドしてくれていることが分かった。

 

yarn global add serveコマンドを実行してserveコマンドをインストールし、server -s buildコマンドを実行してビルド結果のディレクトリをWebサーバー経由で公開することができる。

ブラウザからhttp://localhost:5000を開いて動作確認すると、こちらも問題なく動作した。

f:id:kidani_a:20200512003126p:plain

 

[まとめ]

  • package.jsonのバージョン情報を.envファイル経由で環境変数に設定し、tsxファイル側で利用する方法をまとめた
  • .envファイルにREACT_APP_で始まる任意の環境変数を設定すると、process.env.REACT_APP_XXXXの形でtsxファイルから利用できる(それ以外はNODE_ENV環境変数のみ利用可)
  • .env.localファイルでローカル用に環境変数を設定していても、yarn buildした結果のproductionビルド時には.envファイルの情報が反映される