webpack使ってるReactをNetlifyに上げたら環境変数が読めなくて困った

環境

react: 16.13.1
webpack: 4.42.0
dotenv: 8.2.0

webpack設定ファイル内でのdotenvをいい感じに設定する

参考までにpackage.jsonのscriptを置いておきます。

package.json

  "scripts": {
    "start": "webpack-dev-server --hot --inline --config webpack.development.js",
    "build": "webpack --config webpack.production.js",

こんな感じで、開発環境と本番環境でwebpackの設定ファイルを分けていました。参考: https://webpack.js.org/guides/production/

で、開発環境だと.envの内容が読めているのに、本番ではNetlifyのGUIで設定した環境変数が読めてなくて困ってました。というのも、Dotenvは.envを探しにいくけど、.envはgitで管理しないので本番に上がらず…という次第ですね。

設定をこんな感じに変えたら読めました。

webpack.production.js

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

module.exports = {
  mode: 'production',

略

  plugins: [
    new Dotenv({
      systemvars: true
    })

systemvars: trueが肝です。

systemvarsの他にもオプションがありました。とかとか、Dotenvについての詳細はこちら。
https://www.npmjs.com/package/dotenv-webpack#properties