create-react-appのプロジェクトで環境変数を.envから読み込めない原因と解決策
Create React Appで.envファイルが読み込まれない時の解決策
.envファイルは、プロジェクトのルートディレクトリに配置する必要があります。srcディレクトリ内ではなく、package.jsonと同じ階層にあることを確認してください。
変数のプレフィックス
.envファイルで設定する環境変数は、REACT_APP_というプレフィックスを付ける必要があります。例えば、APIキーをAPI_KEYという名前で設定したい場合は、.envファイルに以下のように記述します。
REACT_APP_API_KEY=your_api_key
キャッシュのクリア
create-react-appは、開発サーバー起動時に環境変数をキャッシュします。.envファイルを変更した後は、キャッシュをクリアしてからサーバーを再起動する必要があります。
- npm startコマンドを実行する前に、
rm -rf .env.development.local.jsonコマンドを実行する。 - ブラウザの開発者ツールを開き、ApplicationタブのLocal Storageセクションで、
env-developmentという名前のキーを削除する。
エジェクト
上記の方法で解決できない場合は、create-react-appからプロジェクトをejectすることができます。Ejectすると、Webpackの設定をカスタマイズできるようになり、.envファイルを読み込むための独自の仕組みを導入できます。
Ejectの手順
npm ejectコマンドを実行する。- プロジェクトのルートディレクトリにある
webpack.config.jsファイルを開く。 dotenvライブラリをインストールする。
npm install dotenv --save-dev
webpack.config.jsファイルに、dotenvライブラリを読み込むコードを追加する。
const dotenv = require('dotenv');
dotenv.config();
- サーバーを再起動する。
ファイル構成
- package.json
- .env
- src/index.js
package.json
{
"name": "my-app",
"version": "1.0.0",
"description": "My React App",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.0"
},
"devDependencies": {
"dotenv": "^16.0.0"
}
}
.env
REACT_APP_API_KEY=your_api_key
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
const apiKey = process.env.REACT_APP_API_KEY;
return (
<div>
<h1>My App</h1>
<p>API Key: {apiKey}</p>
</div>
);
};
ReactDOM.render(<App />, document.getElementById('root'));
このコードを実行すると、ブラウザに"My App"というタイトルと、.envファイルで設定したAPIキーが表示されます。
補足
- このサンプルコードでは、
dotenvライブラリを使用して.envファイルを読み込んでいます。 .envファイルは、開発環境と本番環境で異なる内容を設定することができます。.envファイルは、バージョン管理システムで追跡しないように注意してください。
.envファイルを読み込むための他の方法
環境変数を使う
.envファイルを使用せずに、環境変数を使用して環境設定を行うことができます。
方法
- ターミナルで以下のコマンドを実行して、環境変数を設定します。
export REACT_APP_API_KEY=your_api_key
- アプリケーション内で、
process.envオブジェクトを使用して環境変数を読み込みます。
const apiKey = process.env.REACT_APP_API_KEY;
メリット
.envファイルを使用する必要がない。- バージョン管理システムで環境設定を追跡できる。
- 環境変数はコマンドラインで設定する必要がある。
- 複数の環境で異なる設定を使用する場合、コマンドを複数回実行する必要がある。
Webpack DefinePluginを使用して、.envファイルの内容をJavaScriptコードに直接埋め込むことができます。
npm install dotenv-webpack --save-dev
webpack.config.jsファイルに、dotenv-webpackライブラリとDefinePluginプラグインを追加します。
const dotenv = require('dotenv-webpack');
module.exports = {
// ...
plugins: [
new dotenv({
path: './.env',
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.config().parsed),
}),
],
};
const apiKey = process.env.REACT_APP_API_KEY;
.envファイルの内容をJavaScriptコードに直接埋め込むことができる。
webpack.config.jsファイルを編集する必要がある。
自作のライブラリを使う
上記の方法以外にも、自作のライブラリを使用して.envファイルを読み込むことができます。
- 独自のロジックで
.envファイルを読み込むことができる。
- 自作のライブラリを開発する必要がある。
create-react-appで.envファイルを読み込むには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあるため、プロジェクトの要件に合わせて最適な方法を選択する必要があります。
reactjs create-react-app
