【小ネタ】dotenv の仕様を身体で理解した話

こんにちは、高崎＠アノテーション です。

はじめに

dotenv は.envファイルを用いて環境変数を設定する Node.js のライブラリですが、react-scripts ライブラリにも依存されているほか、使い勝手の良いライブラリとして重宝されています。

この記事は筆者が dotenv の仕様の理解が薄かったがために起こした「やらかし」を公開します。

この記事について

対象となる方は下記条件です。

• dotenv を「環境変数を定義する」くらいのレベルで理解されている方
• 開発（ローカル）、開発（デバイス本体）、監査、本番…といった、ステージごとに環境が用意されている方

「やらかし」について

使用している環境はステージごとに環境変数を用意されているところで、とあるライブラリ関数のデバッグを行っていました。

そのライブラリ関数はローカルでは値を返せないデバイス本体上で動作するものでしたので、ラッパーを用意して下記の様に実装しました。

export const example = () => {
  (process.env.REACT_APP_TEST !== undefined)
  ? process.env.REACT_APP_TEST
  : library_function() // ライブラリ関数コール
}

対する環境変数定義は下記。

REACT_APP_TEST="test variable"

.env.staging や .env.production へはこの定義を行わないようにして、

env-cmd -f .env.production react-scripts start

…こんな感じで立ち上げて振り分けようとしました。

しかし、仕様をご承知の方はもう自明だと思いますが、これは NG です。

.env.local に定義しているものを優先して他の環境もロードするため、デバイス側の開発環境や監査、本番環境においてもライブラリ関数はコールされません。

どう対処したのか

それぞれの環境変数にステージ名を設けて対処し判断するようにしました。

REACT_APP_STAGE_NAME="LOCAL"
REACT_APP_TEST="test variable"

export const example = () => {
  (process.env.REACT_APP_STAGE_NAME === "LOCAL")
  ? process.env.REACT_APP_TEST
  : library_function() // ライブラリ関数コール
}

ちなみに

環境変数がどのように展開されたかを確認したければ react-scripts build 等で js にビルド展開してみると確認できますのでご参考まで。

おわりに

今回は初歩的な dotenv ライブラリの仕様とステージごとの対処について記事にいたしました。

この記事が皆様のお役に立てれば幸いです。

アノテーション株式会社について

アノテーション株式会社はクラスメソッドグループのオペレーション専門特化企業です。
サポート・運用・開発保守・情シス・バックオフィスの専門チームが、最新 IT テクノロジー、高い技術力、蓄積されたノウハウをフル活用し、お客様の課題解決を行っています。
当社は様々な職種でメンバーを募集しています。
「オペレーション・エクセレンス」と「らしく働く、らしく生きる」を共に実現するカルチャー・しくみ・働き方にご興味がある方は、アノテーション株式会社 採用サイトをぜひご覧ください。