webpack フロントエンドでも環境変数を扱う

React+SpringBootアプリでローカル、ステージング、本番環境用に環境変数ファイルがあって、それぞれに接続するAPIアドレスなどが定義されているのはよくあるケース

SpringBootで環境変数を読み込むのは何度も行ってきましたが、Reactで環境変数にアクセスしたことなかった！

今回フロントエンドはwebpack+Reactだったのでwebpackを使って環境変数を読み込む

そもそもwebpackの話

web資材（js、css、画像などのファイル）をpacking（まとめる）するツール

この記事のようにindex.jsなどのエントリポイントから参照される各モジュール（画面コンポーネントなど）をひとまとめにできる！

まとめる設定をwebpack.config.jsファイルに記述する

goworkship.com

DefinePluginで環境変数を読み込む

あらかじめlocal.envなどの環境変数ファイルをサーバ内に環境変数として読み込まれるようにしておく

今回はdockerだったのでdocker-compose.ymlにビルド実行するコンテナのenv-filesにlocal.envを指定した

webpack.config.jsにDefinePluginを記述して環境変数をフロントエンドのグローバル変数に置き換える

local.envに定義したAPI_GATEWAYはprocess.env.でアクセスしグローバル変数API_HOSTに格納

const webpack = require('webpack');

module.exports = {
  mode: 'development',
  plugins: [
    new webpack.DefinePlugin({
      'API_HOST': JSON.stringify(process.env.API_GATEWAY || "")
    }),
  ]
};

実際にAPI接続するモジュールで declear const API_HOST: string; と記述すると環境変数の値が利用できる

webpack.js.org

環境変数を扱う方法にはdotenv、dotenv-webpackもあるがライブラリを追加したくない場合はこの方法が使える