Create React App で index.html に環境変数を使う
2024-06-20
Create React App で index.html に環境変数を使う
しかし、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>
注意事項
- 上記の方法は、CRA バージョン [email protected]以降 でのみ利用可能です。古いバージョンの CRA を使用している場合は、アップグレードする必要があります。
- 環境変数は、REACT_APP_ プレフィックスを付けて定義する必要があります。
- 開発環境と本番環境で異なる環境変数の値を使用する場合は、それぞれの環境用の
.envファイルを作成する必要があります。
Create React App で index.html に環境変数を使う：サンプルコード
.env ファイルの作成
まず、プロジェクトのルートディレクトリに .env ファイルを作成します。このファイルには、使用したい環境変数を定義します。
REACT_APP_MY_VARIABLE=my-value
REACT_APP_API_KEY=my-api-key
方法 1: % 記法
<!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>
方法 2: process.env オブジェクト
<!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
ブラウザでアプリケーションを開くと、環境変数が正しく参照されていることを確認できます。
補足
- この例では、2 つの環境変数
REACT_APP_MY_VARIABLEとREACT_APP_API_KEYを使用しています。 %PUBLIC_URL%プレースホルダーは、CRA によって自動的に置き換えられます。
Create React App で index.html に環境変数を使う：その他の方法
dotenv パッケージを使用すると、.env ファイルの環境変数を JavaScript コードで読み込むことができます。これにより、index.html ファイルだけでなく、React コンポーネント内でも環境変数を使用することができます。
手順
dotenvパッケージをインストールします。
npm install dotenv
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>
利点
dotenvパッケージを使用すると、.envファイルの環境変数を JavaScript コードで読み込むことができます。- 開発環境と本番環境で異なる
.envファイルを使用することができます。
- 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 テンプレートを使用すると、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
