WebpackとReact.jsとdotenvで.envの環境変数をbuildされるコード上でprocess.envとして使いたい #React

はじめに
react dotenvで検索すると「前提、create-react-appを使う」と指定されていて
「うわぁあああ」となったので書いてみた。

※本記事はReact.jsである必要はありません。react-create-app系記事へのプロパガンダです。

もっといい方法があれば教えて下さい。

結論

webpack.config.js

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;

  return {
    // ---------- 全て省略 ----------
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(env)
      })
    ],
  };
};

前提

create-react-appを使わずに構築
webpackを使っている

プラグインのインストール

今回はdotenvを採用
https://github.com/motdotla/dotenv

yarn add -D dotenv

dotenvやdotenv-webpackと選択肢がある

下記の様に選択肢があり、dotenvはサーバー上でしか動かない、つまりビルドする時に.envファイルから取得してwebpackを介して環境変数を渡して上げなければならないので、dotenv-webpackなどを使う方法もありだと思います。

.env作成

package.jsonなどと同じ階層に.envファイルを作ってください。
rootに無いとdotenvでpathを指定しないといけなくなります。（逆に言えばpathさえ指定できればどこでもいい）

.env

SERVICE_URL="https://hogehoge.com"
API_URL="https://hoge-api.com"
NODE_ENV="development"

webpack.config.jsの編集

dotenvで.envファイルを読み込む
dotenv.config().parsedで設定値を取得
webpack.DefinePluginを使って注入する
JSON.stringify()で変換して上げないと正しく値を渡せないので変換

DefinePluginは、webpack.config.js内からモジュールに対し、設定値等の値を注入できるプラグインです。

webpack.config.js

const webpack = require('webpack');
const dotenv = require('dotenv');

module.exports = () => {
  const env = dotenv.config().parsed;

  return {
    // ---------- 全て省略 ----------
    plugins: [
      new webpack.DefinePlugin({
        'process.env': JSON.stringify(env)
      })
    ],
  };
};

process.envの取得方法

home.tsx

import React from 'react';

const Home = (): JSX.Element => {
  console.log(process.env.NODE_ENV); // -> development
  return (
    <div>
      <p>this is Home</p>
    </div>
  );
};

export default Home;

参考

Environment Variables : Webpack config using DefinePlugin
Using environment variables in React
Webpackを使ってJSでも.envしたい