こんにちは、高崎＠アノテーション です。
はじめに
dotenv は.envファイルを用いて環境変数を設定する Node.js のライブラリですが、react-scripts ライブラリにも依存されているほか、使い勝手の良いライブラリとして重宝されています。
この記事は筆者が dotenv の仕様の理解が薄かったがために起こした「やらかし」を公開します。
この記事について
対象となる方は下記条件です。
- dotenv を「環境変数を定義する」くらいのレベルで理解されている方
- 開発（ローカル）、開発（デバイス本体）、監査、本番…といった、ステージごとに環境が用意されている方
「やらかし」について
使用している環境はステージごとに環境変数を用意されているところで、とあるライブラリ関数のデバッグを行っていました。
そのライブラリ関数はローカルでは値を返せないデバイス本体上で動作するものでしたので、ラッパーを用意して下記の様に実装しました。
sample.ts
export const example = () => {
(process.env.REACT_APP_TEST !== undefined)
? process.env.REACT_APP_TEST
: library_function() // ライブラリ関数コール
}対する環境変数定義は下記。
.env.local
REACT_APP_TEST="test variable".env.staging や .env.production へはこの定義を行わないようにして、
production language=環境の立ち上げ例
env-cmd -f .env.production react-scripts start…こんな感じで立ち上げて振り分けようとしました。
しかし、仕様をご承知の方はもう自明だと思いますが、これは NG です。
.env.local に定義しているものを優先して他の環境もロードするため、デバイス側の開発環境や監査、本番環境においてもライブラリ関数はコールされません。
どう対処したのか
それぞれの環境変数にステージ名を設けて対処し判断するようにしました。
.env.local
REACT_APP_STAGE_NAME="LOCAL"
REACT_APP_TEST="test variable"sample.ts
export const example = () => {
(process.env.REACT_APP_STAGE_NAME === "LOCAL")
? process.env.REACT_APP_TEST
: library_function() // ライブラリ関数コール
}ちなみに
環境変数がどのように展開されたかを確認したければ react-scripts build 等で js にビルド展開してみると確認できますのでご参考まで。
おわりに
今回は初歩的な dotenv ライブラリの仕様とステージごとの対処について記事にいたしました。
この記事が皆様のお役に立てれば幸いです。
アノテーション株式会社について
アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。
サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。
0
