create-react-app環境での環境変数の扱いを備忘録的にまとめます。大きく分けて「前提知識」「具体的な設定方法」に分かれています。
基本的な使い方や知識を知りたい方は「前提知識」を、設定方法や.envファイルの扱いについて知りたい方は「具体的な設定方法」を見て下さい。
基本的には公式ドキュメントを要約したものです。
正確な内容はドキュメントを参照して下さい。
Contents
前提知識
環境変数の基本的な使い方
JSコード内では環境変数はprocess.env.変数名でアクセス出来る。
環境変数のPUBLIC_URLとNODE_ENVは自動で設定されており、それ以外の追加する環境変数はREACT_APP_で始まる変数名にしなければならない。
REACT_APP_から始まる環境変数以外は、秘密鍵などが誤って公開されることを防ぐために無視されるようになっている。
またクライアント側のコードは開発者ツールを使えば全ての人が閲覧可能であるため、環境変数に秘密情報は一切含めてはならない。
環境変数はビルド時に埋め込まれる。環境変数を変更したい場合は再度ビルドしなければならず、開発サーバーを使っている場合、環境変数を変更した場合はリスタートしないと読み込まれないので注意。
ココがポイント
環境変数はREACT_APP_で始める変数名でなければならない
HTML内で環境変数にアクセスする場合
public/index.htmlなどで環境変数を使いたい場合は以下のように%で囲む。
<title>%REACT_APP_WEBSITE_NAME%</title>
上でも述べたようにREACT_APP_から始まる環境変数でないと無視されるので注意すること。
実行時に環境変数を注入する必要がある場合は、代わりにこの方法を使う。
ココがポイント
HTML内で環境変数を使う場合は%で囲む
NODE_ENVの扱い
NODE_ENVは自動的に設定される環境変数で、手動で上書きすることは出来ない。
npm startを実行したときには'development'になり、npm testの際には'test'、npm run buildの際には'production'に自動で設定される。
使用例：
if (process.env.NODE_ENV !== 'production') {
analytics.disable();
}
ちなみに上記の例ではnpm run build時の最小化ステップで条件文ごと自動的に削除される。
ココがポイント
NODE_ENVは自動で設定される
具体的な設定方法
一時的にシェルで環境変数を注入する場合
シェルでも環境変数を注入出来るが、あくまでセッションが途切れるまでの一時的なもの。
Linux, macの場合：
REACT_APP_NOT_SECRET_CODE=abcdef npm start
windowsの場合：
ドキュメントを参照
.envファイルで環境変数を設定する場合
プロジェクトのルートフォルダに.envを作成し、.envファイル内は以下のように記述する。
REACT_APP_NOT_SECRET_CODE=abcdef
以下は各環境で読み込まれる.envファイルで、左に行くほど優先度が高く、変数は上書きされていく。
| npm start | .env.development.local > .env.local > .env.development > .env |
| npm run build | .env.production.local > .env.local > .env.production > .env |
| npm test | .env.test.local > .env.test > .env |
要するに.envがベースとなり上書きされていき、~~.localが最優先の環境変数になるということ。
testの場合は.env.localは読み込まれないので注意すること。
ココがポイント
.envファイルには優先順位があり、変数が上書きされていく
CIやホスティングサービスを使う場合はそれぞれドキュメントを参照する。
自由なメモ
Dockerは.envを自動で読み込むため、混同しないように注意すること
すでにマシン上に設定されている環境変数を.envファイルで使う場合
.env ファイルで使用するために、すでにマシン上にある変数を拡張できる。package.json内のversionは$npm_package_versionで取得できるので以下のように環境変数として設定出来る。
REACT_APP_VERSION=$npm_package_version
# also works:
# REACT_APP_VERSION=${npm_package_version}
もしくは同一.envファイルから拡張することも出来る。
DOMAIN=www.example.com
REACT_APP_FOO=$DOMAIN/foo
REACT_APP_BAR=$DOMAIN/bar
まとめ
create-react-app環境での環境変数の使い方、設定方法を解説しました。
一番のポイントは.envファイルの優先順位かと思います。開発中では.envをベースにしつつ.env.development.localなどで上書きをしていくというやり方になるかもしれません。
ただしDockerなど外部のサービスと組み合わせて開発を行っていく場合は.envファイルの扱いも変わってくるので注意しましょう。
以上です。