開発時のJavaScriptの環境変数などの管理

JavaScript webpack

最近JavaScirptでAPI key取扱いをどうしようかと思い、ちょっと試してみたこと。

最初行っていたのは自分のマシンの環境変数を設定して、 webpack.config.jsのpluginsで読み込む方法。 この方法でも実装は可能なんですが、複数人で作業とかする時に環境依存や環境変数の値が被ったりするとめんどそうなので、別の方法がないかを検討 あと、環境変数の管理をするのがめんどい…

前提条件

  • node.js npmが動作すること
  • webpackが動作すること

dotenvのインストール

npm install --save-dev dotenv

dotevnはプログラム実行時の環境変数を、.envファイルで管理するためのライブラリ

github.com

webpackの設定

var webpack = require('webpack');
require('dotenv').config();

var defineEnv = new webpack.DefinePlugin({
  'process.env': {
    'TEST': JSON.stringify(process.env.TEST)
  }
});

module.exports = {
  context: __dirname + '/app',

  entry: {
    js: "./sample.js"
  },

  output: {
    path: __dirname + '/dist',
    filename: "./bundle.js"
  },

  plugins: [defineEnv]
};

.envファイル

TEST=apikey

前半で.envファイルから環境変数を取得し、defineEnv という変数に設定しておく。 build対象のjsファイルから環境変数が読み込めるようにするために、plugins に defineEnv を設定する。

jsファイルから読み込み方

console.log(process.env.TEST);

process.env.*** という形式で実装すると、build後のjsファイルで.envファイルの値で置き換えたjsファイルが出力される。

注意点

  • githubとかに公開する時は .env 、build後のファイルはアップしない。 これをアップしたら全く意味が無いので、しっかりとgitignoreしておく

  • フロントエンドのjsの場合は、実行時にDeveloper toolsのソースは隠蔽出来ない。 build後のファイルにはAPIkeyが直書きされているので、ここまでは隠蔽することは出来ない。

あくまでこの方法は、誤ってgithubとかにAPI keyを公開してしまわないようにするための対応策です。

サンプルのソース

github.com