この記事には新しいURLが設定されています

実現したいこと

  • リリース環境と開発環境でAPIのオリジンを替えたい
  • オリジンを環境変数として別ファイルに定義したい
  • リリースするJSファイルに開発環境用の記述が混ざらないようにしたい
  • クライアントサイド(JavaScript)内で完結させたい

解決策

webpackを使ってビルドする前提で、ビルド時にprocess.dev.NODE_ENVを見て読み込む設定ファイルを切り替える方法をとりました。

ファイル構成

app
  ├ ...	
  ├ webpack.config.js
  └ src
     ├ environment
         ├ index.js
         ├ _development.js
         └ _production.js

_development.jsと_production.jsがそれぞれ環境ごとの設定ファイルです。
index.jsが設定ファイルを切り替えて読み込む主体です。

環境ごとの設定ファイル

当然と言えば当然ですが、両方のファイルに同じ項目が用意されている状態にします。

設定を読み込む

ポイントは、後に指定するNODE_ENV = 設定ファイル名となっていることです(今回はenvironment/以外でrequireしないで欲しいという意味を込めて_の接頭辞をつけました)。

import env from '../environment/index';

const FETCH_API = env.API_ORIGIN + 'user/articles';

このように、environment/index.jsを呼び出せばどこでも環境ごとの設定値を参照できるようになりました。

process.env.NODE_ENV を利用できるようにする

ロジック内でprocess.env.NODE_ENVを利用するには、webpack.config.jsに以下を追記します。

plugins: [
　　new webpack.DefinePlugin({
　　　　'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
　　})
]

DefinePluginを使います。

The DefinePlugin allows you to create global constants which can be configured at compile time.

コンパイル時にグローバル変数を定義してくれるというものです。

ビルド時に process.env.NODE_DEV を指定する

用意が整ったのであとはビルドするだけです。ビルド時にproductionビルドかdevelopmentビルドかを指定してあげると、それに応じた設定ファイルを読み込んでコンパイルしてくれる算段です。

$ NODE_DEV=production webpack

ビルドコマンドをたたくときにkey=valueと指定すると、process.env.keyにvalueが紐付けられます。

あとはこれをnpm scriptsにして呼び出しやすいようにしておけば、手元で実行するもよし、CIに実行させるもよしです。

おわりに

不要な設定ファイルがそもそもrequireされない、というのはけっこういい感じだなと思っています。が、もっといい方法もあると思うので気づいたら教えていただけると嬉しいです。その際は@aloerina_までお気軽に。