Webpack build 時に環境にに応じた .env を読み込ませたい

前回までのあらすじ resolve.alias を使って環境毎に別のファイルを読み込ませる事ができました。

今回は .env を環境に毎に process.env に入れてビルドする方法をやってみましたの Tofu on Fire

dotenv-webpack プラグインを使う

dotenv-webpack プラグインを使えば .env ファイルを webpack を通じてプログラムに渡すことが出来るようなので、ビルドのモードに応じて読み込ませる .env ファイルを変更すれば OK

webpack.config.js

const Dotenv = require('dotenv-webpack');
const enviroment = process.env.NODE_ENV || 'dev';

module.exports = {
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, `.env.${enviroment}`),
    }),
  ],
}

npm-script

"scripts": {
  "build:dev": "NODE_ENV=dev webpack --config ./webpack.config.js",
  "build": "NODE_ENV=prod webpack --config ./webpack/config.js",
}

dotenv-webpack プラグインで渡される .env ファイルはプログラム内では process.env からアクセスすることができます。 npm run build:dev の場合は .env.dev が、npm run build の場合は .env がそれぞれ読み込まれてビルドできるようになりました ✨

nodemon, ts-node からの実行時に `.env` ファイルを渡す

webpack dev-server を使って開発をするのであれば特に問題はないのですが、開発時は nodemon や ts-node でアプリを起動するのであれば webpack を介さないので dotenv-webpack プラグインで渡していた環境変数が undefined になってしまいます。
かと言ってプログラムに .env を読み込むコードを書いてしまうと本末転倒です。

dotenv は node 実行時に `.env` ファイルをプログラムに渡すことが出来る

dotenv を使ってプログラムから .env を読み込むような使い方をしていたのですが、node 実行時に -r dotenv/config オプションを付けて dotenv を require して実行させることで .env ファイルを渡すこともできるようです。

node 実行時に `.env` ファイルを指定して渡す方法

通常では .env ファイルが読み込まれますが dotenv_config_path=<読み込ませるファイル名> で環境変数ファイルを指定して読み込ませることができるようでした。

e.g .env.dev を読み込んで src/app.js を nodemon で実行させる場合

"scripts": {
  "dev": "nodemon -r dotenv/config src/app.js dotenv_config_path=.env.dev"
}

ts-note を nodemon で実行する場合

nodemon.json の exec にある実行プログラムに -r dotenv/config, dotenv_config_path=オプションを追加すればOK

nodemon.json

{
  "restartable": "rs",
  "env": {
    "NODE_ENV": "dev"
  },
  "watch": [
    "src"
  ],
  "ext": "js, ts, json",
  "exec": "ts-node -r dotenv/config ./src/app.ts dotenv_config_path=.env.dev"
}