開発時のJavaScriptの環境変数などの管理
最近JavaScirptでAPI key取扱いをどうしようかと思い、ちょっと試してみたこと。
最初行っていたのは自分のマシンの環境変数を設定して、 webpack.config.js
のpluginsで読み込む方法。
この方法でも実装は可能なんですが、複数人で作業とかする時に環境依存や環境変数の値が被ったりするとめんどそうなので、別の方法がないかを検討
あと、環境変数の管理をするのがめんどい…
前提条件
- node.js npmが動作すること
- webpackが動作すること
dotenvのインストール
npm install --save-dev dotenv
dotevnはプログラム実行時の環境変数を、.envファイルで管理するためのライブラリ
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を公開してしまわないようにするための対応策です。