React アプリで環境変数を正しく使うために
React アプリを開発する際、環境変数を使ってAPIサーバーのURLやシークレットキーなどを管理することがあります。ですが、React アプリで環境変数をうまく呼び出せないという問題に直面したことがありました。
このノートでは、React アプリ内で環境変数を正しく使うためのポイントについて解説します。
なぜ環境変数が読み込めないのか？
たとえば、次のようなコードを書いても、期待通りに動作しないことがあります。
const serverUrl = process.env.HASH_SERVER_URL;
console.log(serverUrl);このコードでは process.env.HASH_SERVER_URL に設定された環境変数が参照されるはずですが、実際には undefined が出力されてしまうことがよくあります。原因として、いくつかの点をチェックする必要があります。
環境変数には特定の接頭辞が必要
create-react-app で生成した React プロジェクトでは、環境変数を利用する際に特定のルールがあります。すべての環境変数は REACT_APP_ という接頭辞で始まる必要があります。これが最もよくある原因です。
たとえば、環境変数を .env ファイルに設定する場合、次のように記述します：
REACT_APP_HASH_SERVER_URL=https://api.example.comそして、コード内では次のように呼び出します：
const serverUrl = process.env.REACT_APP_HASH_SERVER_URL;
console.log(serverUrl); // 正しく出力される
もし REACT_APP_ をつけずに環境変数を定義してしまうと、React はその変数を認識せず、 undefined となります。
環境変数はビルド時に注入される
React アプリは環境変数をビルド時に取り込むため、 .env ファイルを編集した後には、必ずアプリを再ビルドする必要があります。npm start や yarn start を使用して開発サーバーを再起動し、変更を反映させてください。
.env ファイルの場所に注意
.env ファイルは プロジェクトのルートディレクトリ に配置する必要があります。package.json が存在するディレクトリと同じ場所に置くのが正解です。
間違えて src ディレクトリやその他のフォルダに .env ファイルを置いてしまうと、React がそれを読み取ることができません。
セキュリティのための制約
process.env で取得できるのは、REACT_APP_ で始まる環境変数だけです。create-react-app ではセキュリティの観点から、他の環境変数（例えばサーバー側のシークレットキーなど）は参照できないようになっています。
console.log(process.env); // REACT_APP_ で始まるものだけが表示される
React アプリはクライアントサイドで実行されるため、サーバーサイドの環境変数を直接参照したり、表示させたりすることはできません。
環境変数に秘密情報を含む場合の注意点
React アプリは クライアントサイド で動作するため、環境変数に秘密情報（APIキーやシークレットキーなど）を直接含めることはセキュリティ上危険です。以下の点に注意してください。
クライアントサイドに秘密情報を含めない
React の環境変数はビルド時にクライアントサイドのコードに埋め込まれるため、ユーザーが process.env で設定した情報を直接閲覧することが可能です。そのため、APIキーやパスワードなどの 機密情報を環境変数に含めるのは避けるべきです。
もし秘密情報が必要な場合、バックエンド で処理するか、認証を行うサーバーを経由してクライアントと安全に通信する仕組みを設けることが重要です。
.env ファイルを .gitignore に追加する
環境変数を管理する .env ファイルには、機密情報が含まれる場合があるため、必ず .gitignore に .env ファイルを追加し、リポジトリにコミットされないようにする必要があります。
.gitignore ファイルに次のように追加します：
# .gitignore
.envこれにより、機密情報が含まれる .env ファイルがバージョン管理システム（Git）に保存されることを防ぎます。
デプロイ時の環境変数管理
デプロイ環境（本番サーバーやホスティングサービス）では、環境変数の設定をサーバーの設定パネルやホスティングサービスの環境変数管理機能を使って行います。
たとえば、Heroku や Vercel などのホスティングサービスでは、ダッシュボードから直接環境変数を設定できる仕組みが提供されています。これにより、機密情報を .env ファイルに含めることなく、安全にデプロイ環境で利用できます。
まとめ
React アプリで環境変数を利用する際のポイントは以下の通りです。
- すべての環境変数に
REACT_APP_をつける .envファイルはプロジェクトのルートに配置する- 環境変数を変更したらアプリを再ビルドする
- クライアントサイドでは秘密情報を扱わない
.envファイルを.gitignoreに追加し、バージョン管理システムに含めない- デプロイ環境ではホスティングサービスの環境変数設定機能を活用する
環境変数の管理はセキュリティの重要な要素です。これらのポイントを押さえて、安全かつ効率的にアプリを開発しましょう。