Javascript (Webpackプロジェクト) で .env

JS で環境変数を管理する

dotenv による環境変数の管理

先日環境変数周りで失敗をしてしまったため .env を使った環境変数の管理について学んでいく。
Rails プロジェクトだと dotenv という gem があって、それを使って .env ファイルに書いた変数の値を読み出すって方法がある。

dotenv | RubyGems.org | your community gem host

もちろん .env は .gitignore に書いてパブリックにさらされることを防ぐ必要がある。

Javascript でも同じようなやり方で .env で環境変数を管理できるようなので試してみる。

やり方

1 dotenv をインストール

$ npm install --save-dev dotenv

# yarn の方
$ yarn add dotenv

2 dotenv を記述

TEST_ACCESS_TOKEN=xxxxxxxxxxxxxx

3 webpack の plugins に設定

require('dotenv').config();

const dotenvPlugin = new webpack.DefinePlugin({
  'process.env': {
    'TEST_ACCESS_TOKEN': JSON.stringify(process.env.TEST_ACCESS_TOKEN)
  }
});


# config の中の plugins の配列の中に関数を入れる
plugins: [dotenvPlugin]

4 JS 側から呼び出す

console.log(process.env.TEST_ACCESS_TOKEN);