Reactでdotenvを使う方法
2024-10-08
React プロジェクトで dotenv を使うことは可能ですか？
日本語訳
解説
.env ファイルは、プロジェクトの環境変数を設定するためのファイルです。React プロジェクトでは、.env ファイルを使用することで、開発環境、ステージング環境、本番環境といった異なる環境ごとに、API キー、データベース接続情報などの機密情報を安全に管理することができます。
Webpack を使った実装
Webpack を使用している React プロジェクトでは、webpack.DefinePlugin を利用して .env ファイルの変数をビルド時に定義することができます。
// webpack.config.js
const dotenv = require('dotenv');
const path = require('path');
dotenv.config({ path: path.join(__dirname, '.env') });
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed)
})
]
};
React アプリケーションでの使用
.env ファイルで定義した変数は、process.env オブジェクトからアクセスすることができます。
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log(process.env.API_KEY);
}, []);
return (
<div>
{/* ... */}
</div>
);
}
注意
- Webpack の
DefinePluginを使用することで、ビルド時に.envファイルの変数を定義するため、ビルド後の JavaScript ファイルには変数の値が埋め込まれます。 .envファイルは、ソースコード管理システム (Git など) にコミットしないように注意してください。機密情報を公開することはセキュリティリスクとなります。
.env ファイルの作成
プロジェクトのルートディレクトリに .env ファイルを作成します。
API_KEY=your_api_key
DATABASE_URL=your_database_url
Webpack の設定
webpack.config.js ファイルに dotenv パッケージをインストールし、webpack.DefinePlugin を使用して .env ファイルの変数を定義します。
const dotenv = require('dotenv');
const path = require('path');
dotenv.config({ path: path.join(__dirname, '.env') });
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed)
})
]
};
React コンポーネントでの使用
import React, { useEffect } from 'react';
function MyComponent() {
useEffect(() => {
console.log(process.env.API_KEY);
}, []);
return (
<div>
{/* ... */}
</div>
);
}
- React コンポーネントで
process.envオブジェクトから環境変数にアクセスします。 - Webpack の
DefinePluginを使用して、ビルド時に.envファイルの変数をprocess.envオブジェクトに定義します。 .envファイルに環境変数を定義します。
javascript reactjs webpack
