[JavaScript]Webpackとdotenvで環境変数を設定する

0

dev/stg/prod　など環境によって変更したい変数を設定できるようにするのがdotenvというNODE.JSのモジュールです。
.envファイルを設置して使用します。

dotenv-webpackの使い方

webpackで使用する場合は下記モジュールをインストールして使用します。
npm dotenv-webpack

インストール

npm install dotenv-webpack --save-dev

 

.envファイル作成

作成した.envはwebpack.config.jsと同じ階層に配置します。
dotenvの設定時にファイルのpathを指定することも可能です。

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

 

コンフィグファイルに設定する

// webpack.config.js
const Dotenv = require('dotenv-webpack');
 
module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

 

設定した変数の呼び出し

webpackでバンドルされるjs内で下記のように呼び出すことができます。

console.log(process.env.DB_HOST);

 

webpack.config.js内でdotenvで設定した変数を使う場合

dotenv-webpackはバンドル時のプラグインとして設定しているため、webpack.config.js内では設定した変数にアクセスできません。
webpack.config.js内で使用するには、下記のようにdotenvを呼び出します。

require('dotenv').config();

 
dotenv-webpackはdotenvをラップしているので、改めてdotenvをインストールしなくても使用できます。
また、webpack.config.js内だけで使用するのであれば、dotenv-webpackでなく、dotenvのみインストールでもよいです。

dotenvについて解説しているサイト
環境変数の代わりに .env ファイルを使用する (dotenv)

セキュアな情報が含まれるケースが多いのでgit管理から外す

.envファイルは.gitignoreに記載しておきましょう。

JavaScriptおすすめの書籍

JavaScriptはonlineの情報も多く、Google検索が便利なので書籍を読む必要はないかもしれません。
ただ、これから学ぶ方は一冊簡単な本を読んだ方が理解が深まると思います。逆引き本とかも良書はあるのですが、Google検索した方がコピー＆ペーストできるので便利なのでいらないかな。

確かな力が身につくJavaScript「超」入門 第2版
これからはじめる方向け

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質
超おすすめ！Google検索では出てこないJavaScriptが学べます。これを読み終えた時、一段自分のコーディング力が上がったと思いました。

LINEで送る