AngularJSで開発環境やプロダクション環境など複数の環境間で設定を切り替える方法

AngularJSでシングルページアプリケーションを開発しているとき、バックエンドのAPIサーバのURLが環境ごとに異なるため、各環境にデプロイ時にこのURLを切り替えるようにしたい。

例えば、LoopBack.jsはAngularJS用のSDKを自動生成してくれ、そのSDKはエンドポイントURLをangular.module.configで設定するようになっている。

app.js

angular
  .module('app', ['loopbackServices'])
  .config(['LoopBackResourceProvider', function(LoopBackResourceProvider) {
    LoopBackResourceProvider.setUrlBase('http://localhost/api');  // ここでエンドポイントURLを指定する
  }]);

はじめこのファイルをデプロイするときは、プロダクション環境のURLに手動で書き換えてからデプロイしていたが、この書き換え処理を自動化する方法を見つけた。

gulp-ng-constant

Gulpのプラグインであるgulp-ng-constantを使うと、この設定切り替えを自動化することが出来る。

まず、gulpfile.jsを以下のように作成する。

gulpfile.js

var gulp = require('gulp');
var ngConstant = require('gulp-ng-constant');

gulp.task('config', function() {
    var config = require('./config.json');
    ngConstant({
      constants: config[process.env.NODE_ENV || 'development'],
      stream: true,
      name: 'app.config'
    })
      .pipe(gulp.dest('./'));
  }
);

次に、環境ごとのエンドポイントURLをconfig.jsonに記述する。

config.json

{
  "production": {
    "apiUrl": "http://production.example.com/api"
  },
  "staging": {
    "apiUrl": "http://staging.example.com/api"
  },
  "development": {
    "apiUrl": "http://localhost/api"
  }
}

２つのファイルが用意出来たら、以下のコマンドを実行する。

$ gulp config

すると、カレントディレクトリにngConstants.jsというファイルが作成される。

angular
  .module("app.config", [])
  .constant("apiUrl", "http://localhost/api");

アプリケーション側ではこのモジュールを読み込み、apiUrlという変数からエンドポイントURLを取得する。

app.js

angular
  .module('app', ['loopbackServices', 'app.config'])  // 依存モジュールにapp.configを追加
  .config(['LoopBackResourceProvider', 'apiUrl', function(LoopBackResourceProvider, apiUrl) {
    LoopBackResourceProvider.setUrlBase(apiUrl);  // apiUrlという変数からエンドポイントURLを取得する
  }]);

環境ごとに切り替える

以下のコマンドを実行すると、エンドポイントURLがステージング環境用に切り替わる。

$ NODE_ENV=staging gulp config

ngConstants.js

angular
  .module("app.config", [])
  .constant("apiUrl", "http://staging.example.com/api");

プロダクション環境用のエンドポイントURLにしたければ、同様に以下のコマンドを実行する。

$ NODE_ENV=production gulp config

ngConstants.js

angular
  .module("app.config", [])
  .constant("apiUrl", "http://production.example.com/api");