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");