[Node.js + Heroku] 環境変数を実行環境ごとに切り替えて接続する

ローカルで開発して、Herokuでデプロイする際に環境変数を切り替えて接続したかったのでその手順を記録しました。

Herokuのバージョンは、下記の通りです。

$ heroku --version
heroku/7.39.0 darwin-x64 node-v12.13.0

ローカルの環境変数を設定

npmのconfigパッケージをnpmインストールします。

$ npm install config

次に、default.jsonを作成しましょう。

$ mkdir config
$ vi config/default.json

このdefault.jsonを読み込んで接続します。

your-app/
　　└ config/
　　　　└ default.json

ローカル開発の環境設定を記述します。

{"localDB":{"dbConfig":{"host":"localhost","port":3000,"dbName":"your-db-name"}}}

Herokuの環境変数を設定

以下はHerokuにログインして、CLIで設定する手順です。

Heroku CLI Commands | Heroku Dev Center

$ heroku login
$ heroku config:set <ENV_NAME>=<your-db-url> -a<your-app-name>

これで、共有サーバーの環境変数を設定できました。
CLIでなくても、ブラウザ上で設定可能です。

実行環境に応じて、環境変数を切り替えて接続

まずは、アプリケーションの接続先の設定を切り替える処理を確認します。
ここで、Node.jsのフレームワークであるExpressのファイルの一部を見てみましょう。

/**
 * Get port from environment and store in Express.
 */varport=normalizePort(process.env.PORT||'3000');app.set('port',port);

process.env.PORTが参照できなければ、環境変数にローカルDBの接続先を代入しています。Expressを使用している場合は、アプリケーションの接続先の設定が切り替わるようになっていますね。

次は、DBの接続先を切り替える方法を確認します。
まずは、default.jsonの設定を読み込んで変数に代入しましょう。

constconfig=require('config');constlocalDBConfig=config.get('localDB.dbConfig');

localhost接続でなければ、Herokuの環境変数を読み込むように設定します。

下記はHerokuで実行した場合、mLabのmongodbを接続するようにした例です。
process.env.PORTが参照できなければ、環境変数にローカルDBの接続先を代入しています。

constMONGODB_ENV=process.env.MONGODB_ENV||`mongodb://${localDBConfig.host}/${localDBConfig.dbName}`;

後続の処理で、設定した環境変数を参照して接続するといいでしょう。

注意事項

APIキー等の認証情報を含む場合は、gitの管理対象からconfigファイルを外しましょう。

備考

• フロント側でアプリケーションのurlを参照するには、location.originを使います。
  Location - Web API | MDN

• mLabのMongoDBを利用する場合、設定は下記の記事が参考になります。
  mLabのMongoDBを利用する方法