Emberで他のApiサーバを使うとき

概要

ローカルで開発してデータだけApiサーバから取得したいとき、
server/配下をどうにかすると便利な話。

DSのRESTAdapterにHostを設定しても良いのだが、
開発だけ向き先を別ドメインに変えたい時などにしたい場合はhttp-proxyを使用する。

http-proxy

作成

proxyファイルを作成

ember g http-proxy <Local Path> <Remote URL>

doc

作成の際にserver/index.jsの上書きを聞かれるので問題ない場合はy、
すでに記述がある場合は上書きしないように気をつける。
上書きをしない場合はserver/index.jsで”proxies”が読み込まれる用にする。

1
2
3
4
5
6
7
8
9
10
module.exports = function(app) {
  var globSync   = require('glob').sync;
  var proxies    = globSync('./proxies/**/*.js', { cwd: __dirname }).map(require);

  // Log proxy requests
  var morgan  = require('morgan');
  app.use(morgan('dev'));

  proxies.forEach(function(route) { route(app); });
};

api配下の全てを指定するとき

例えばhttp://your-domain/のapi/*を利用したい場合などは

proxyファイル作成

ember g http-proxy api /api

上記のコマンドでapiのproxyファイルが作成される

server/proxies/api.jsファイル修正

作成したserver/proxies/api.jsを修正

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
var proxyPath = '/api';

module.exports = function(app) {
  // For options, see:
  // https://github.com/nodejitsu/node-http-proxy
  // 追記
  var serverUrl = 'http://hogeproxy:80';

  options = {
    target: serverUrl,
    changeOrigin: false
  }

  // var proxy= require('http-proxy').createProxyServer({});
  var proxy = require('http-proxy').createProxyServer(options);

  proxy.on('error', function(err, req) {
    console.error(err, req);
  });

  app.use(proxyPath, function(req, res, next){
    // include root path in proxied request
    // リクエストパスをサーバUrlとローカルパス、リクエストパスに書き換え
    req.url = serverUrl + proxyPath + req.url;
    // proxy.web(req, res, { target: '/api' });
    proxy.web(req, res);
  });
};

それでもmockを利用したい場合などは設定値にする

server/index.jsを変更し、起動時environmentに値を指定する

ember sever 起動時 ember server --environment=offline

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
module.exports = function(app, options) {
  var globSync = require('glob').sync;
  var mocks, proxies;

  if (options.environment === 'offline') {
    mocks = globSync('./mocks/**/*.js', {
      cwd: __dirname
    }).map(require);
  } else {
    proxies = globSync('./proxies/**/*.js', {
      cwd: __dirname
    }).map(require);
  }

  // Log proxy requests
  var morgan = require('morgan');
  app.use(morgan('dev'));

  if (mocks) {
    mocks.forEach(function(route) {
      route(app);
    });
  }

  if (proxies) {
    proxies.forEach(function(route) {
      route(app);
    });
  }
};

参考

※注 proxyファイルの書き方が、何か違うかもしれない。。

追記

上記の用に設定しなくてもserver/index.jsでmockを読み込まない用にして、
サーバ起動さの際にproxyを指定してあげれば良い。ember sever --proxy 'http://your-domain/'

参考

いちいちServerに設定するのが面倒な場合は~/.ember-cliに記述もできる

1
2
3
4
5
{
  "liveReload" : true,
  "environment" : "server",
  "proxy" : "http://your-domain"
}

doc