読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

salesforce.com JSforce

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


ローカルからもHerokuからも簡単にSalesforce APIを実行できるので、Salesforce APIを実行するアプリを開発するときは、JSforceが一番便利だと思います。