SFDC：HerokuとJSforceとProxyの設定について

HerokuとJSforceとProxyの設定についてです。少し前にjsforce-ajax-proxyを利用してローカル環境でSalesforce APIを実行する方法について確認できました。

このようにlocalhostからApex REST APIでクエリを実行できています。
f:id:tyoshikawa1106:20160328132927p:plain

この処理をHerokuアプリから実行すると次のようなエラーが発生してしまいました。(SalesforceのCORSは設定済み)
f:id:tyoshikawa1106:20160328133311p:plain

f:id:tyoshikawa1106:20160328133421p:plain

Proxyサーバを用意すれば解決することまで教えてもらいながらも、その設定方法がよくわからずあきらめていたエラーなのですが、ここの対応方法をやっと理解できました。

このエラーも『jsforce-ajax-proxy』が解決してくれます。

jsforce-ajax-proxyにはMiddlewareとしてアプリ内で利用できる仕組みも用意されています。
f:id:tyoshikawa1106:20160328133934p:plain

Nodeのことをよくわかっていなかったため、README.mdに書いてあることを理解できずに止まっていたのですが、記載どおりの手順で進めれば簡単に設定できました。

まずアプリ内で次のコマンドを実行してjsforce-ajax-proxyをインストールします。

$ npm install jsforce-ajax-proxy --save

次のserver.jsにサンプル通りに読み込み処理を実装します。
f:id:tyoshikawa1106:20160328134232p:plain

var express = require('express');
var jsforceAjaxProxy = require('jsforce-ajax-proxy');
var app = express();
var port = process.env.PORT || 8080;

app.all('/proxy/?*', jsforceAjaxProxy());

// Serve static files
app.use(express.static(__dirname + '/public'));

// Serve your app
console.log('Served: http://localhost:' + port);
app.listen(port);

あとは、JSforceのbrowser.init処理でProxyURLを指定すれば対応完了です。

console.log(location.host);
if (location.host == 'localhost:8080') {
    // ローカル用設定
    jsforce.browser.init({
      clientId: '<Client ID>',
      redirectUri: 'http://localhost:8080/',
      proxyUrl: 'http://localhost:3123/proxy/'
    });
} else {
    // Heroku用設定
    jsforce.browser.init({
      clientId: '<Client ID>',
      redirectUri: 'https:/sample.herokuapp.com/',
      proxyUrl: 'https:/sample.herokuapp.com/proxy/'
    });
}
var conn = jsforce.browser.connection;

これでHerokuからアクセスした際のproxyUrlを設定できます。HerokuアプリのURLの後に『/proxy/』をつけるのを忘れないようにします。

上記のProxy設定をしてあげることで、HerokuからJSforceをつかってApex REST APIを呼び出せるようになりました。
f:id:tyoshikawa1106:20160328135047p:plain