-
開発環境の場合: Reactプロジェクトのルートディレクトリにある
.envファイルに環境変数を設定します。例えば、.envファイル内にREACT_APP_API_KEY=your_api_keyという行を追加すると、process.env.REACT_APP_API_KEYでその値にアクセスできます。 -
本番環境の場合: Reactアプリケーションを本番環境にデプロイする際には、ホスティングサービスや環境に応じた方法で環境変数を設定する必要があります。例えば、NetlifyやHerokuなどのホスティングサービスでは、環境変数を管理するためのダッシュボードが提供されています。
パッケージの依存関係が不足している:
Reactアプリケーションでは、環境変数にアクセスするためにdotenvパッケージやreact-scriptsパッケージなどが必要です。これらのパッケージが正しくインストールされていることを確認しましょう。
-
dotenvパッケージのインストール: Reactプロジェクトのルートディレクトリで、npm install dotenvコマンドを実行します。 -
react-scriptsパッケージのバージョン確認: Reactプロジェクトのpackage.jsonファイル内のreact-scriptsのバージョンを確認し、最新バージョンに更新することをおすすめします。npm install react-scripts@latestで最新バージョンをインストールできます。
設定ファイルの読み込みが不正確: Reactアプリケーションでは、環境変数の設定ファイルを正しく読み込む必要があります。設定ファイルのパスやファイル名が正しいことを確認し、読み込み方法も適切か確認しましょう。
create-react-appを使用している場合:srcディレクトリ内のindex.jsファイルで、import './env'という行を追加することで、環境変数の設定ファイルを読み込むことができます。