Create React App で index.html に環境変数を使う
2024-07-27
しかし、CRA で生成されるデフォルトのビルドでは、index.html ファイルで環境変数にアクセスすることはできません。これは、CRA が静的な HTML/CSS/JS バンドルを生成するため、実行時に環境変数を読み込むことができないからです。
そこで、[email protected]以降では、index.html ファイルで環境変数を参照するための以下の方法が提供されています。
方法 1: % 記法
.envファイルに環境変数を定義します。
REACT_APP_MY_VARIABLE=my-value
- index.html ファイルで、
%記法を使用して環境変数を参照します。
<title>%REACT_APP_MY_VARIABLE%</title>
方法 2: process.env オブジェクト
REACT_APP_MY_VARIABLE=my-value
- index.html ファイルで、
process.envオブジェクトを使用して環境変数にアクセスします。
<script>
console.log(process.env.REACT_APP_MY_VARIABLE);
</script>
注意事項
- 開発環境と本番環境で異なる環境変数の値を使用する場合は、それぞれの環境用の
.envファイルを作成する必要があります。 - 環境変数は、REACT_APP_ プレフィックスを付けて定義する必要があります。
- 上記の方法は、CRA バージョン [email protected]以降 でのみ利用可能です。古いバージョンの CRA を使用している場合は、アップグレードする必要があります。
まず、プロジェクトのルートディレクトリに .env ファイルを作成します。このファイルには、使用したい環境変数を定義します。
REACT_APP_MY_VARIABLE=my-value
REACT_APP_API_KEY=my-api-key
index.html ファイルの編集
次に、index.html ファイルを編集して、環境変数を参照します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>%REACT_APP_MY_VARIABLE%</title>
</head>
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/build/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Create React App</title>
</head>
<body>
<div id="root"></div>
<script>
console.log(process.env.REACT_APP_MY_VARIABLE);
console.log(process.env.REACT_APP_API_KEY);
</script>
<script src="%PUBLIC_URL%/build/main.js"></script>
</body>
</html>
アプリケーションの実行
上記の変更を保存したら、以下のコマンドを実行してアプリケーションを起動します。
yarn start
ブラウザでアプリケーションを開くと、環境変数が正しく参照されていることを確認できます。
%PUBLIC_URL%プレースホルダーは、CRA によって自動的に置き換えられます。- この例では、2 つの環境変数
REACT_APP_MY_VARIABLEとREACT_APP_API_KEYを使用しています。
dotenv パッケージを使用する
dotenv パッケージを使用すると、.env ファイルの環境変数を JavaScript コードで読み込むことができます。これにより、index.html ファイルだけでなく、React コンポーネント内でも環境変数を使用することができます。
手順
dotenvパッケージをインストールします。
npm install dotenv
.envファイルを作成します。
REACT_APP_MY_VARIABLE=my-value
REACT_APP_API_KEY=my-api-key
src/index.jsファイルの先頭に以下のコードを追加します。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import dotenv from 'dotenv';
dotenv.config();
ReactDOM.render(<App />, document.getElementById('root'));
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>%REACT_APP_MY_VARIABLE%</title>
</head>
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/build/main.js"></script>
</body>
</html>
利点
- 開発環境と本番環境で異なる
.envファイルを使用することができます。 dotenvパッケージを使用すると、.envファイルの環境変数を JavaScript コードで読み込むことができます。
欠点
Webpack DefinePlugin を使用する
- Webpack DefinePlugin をインストールします。
npm install webpack-define-plugin
webpack.config.jsファイルを編集します。
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.DefinePlugin({
'process.env.REACT_APP_MY_VARIABLE': JSON.stringify('my-value'),
'process.env.REACT_APP_API_KEY': JSON.stringify('my-api-key'),
}),
],
// ...
};
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>%REACT_APP_MY_VARIABLE%</title>
</head>
<body>
<div id="root"></div>
<script src="%PUBLIC_URL%/build/main.js"></script>
</body>
</html>
- Webpack DefinePlugin を使用すると、ビルド時に環境変数を JavaScript コードに注入することができます。
EJS テンプレートを使用する
EJS テンプレートを使用すると、index.html ファイルを動的に生成することができます。これにより、環境変数をテンプレート内に直接埋め込むことができます。
- EJS テンプレートエンジンをインストールします。
npm install ejs
src/templates/index.ejsファイルを作成します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title><%= process.env.REACT_APP_MY_VARIABLE %></title>
</head>
<body>
<div id="root"></div>
<script src="<%= process.env.PUBLIC_URL %>/build/main.js"></script>
</body>
</html>
const webpack = require('webpack');
const EjsWebpackPlugin = require('ejs-webpack-plugin');
module.exports = {
// ...
plugins: [
new EjsWebpackPlugin({
src: path.resolve
reactjs create-react-app
