tyoshikawa1106のブログ

- Force.com Developer Blog -

Heroku:React×Reduxのサンプルコードの動かし方

Reduxのサイトに勉強に使えるサンプルコードがたくさん紹介されています。
f:id:tyoshikawa1106:20160519225409p:plain

Read Me | Redux


サイトに記載されている手順どおりに進めることでローカル環境で動かすことができました。
f:id:tyoshikawa1106:20160519225253p:plain


ローカル環境で動くことを確認できたので、Herokuで動かしてみようとデプロイしてみたのですが、アプリケーションエラーとなってしまいました。
f:id:tyoshikawa1106:20160519225620p:plain


サンプルコードにはserver.jsがちゃんと用意されていて、Procfileは自分で追加済み、Herokuデプロイ時には特にエラーも発生していなさそう・・・。
f:id:tyoshikawa1106:20160519225736p:plain


これでどうしてエラーになるんだろうと悩んでいたのですが、この問題の解決方法について教えてもらうことができました。


原因は、server.jsのport指定のところが固定となっていたためです。
f:id:tyoshikawa1106:20160519225926p:plain


Herokuで動かすには次のように指定する必要がありました。

var port = process.env.PORT || 3000;


自分でheroku logsコマンドでログを見た時には気づけなかったのですが、こういったエラーとなっています。
f:id:tyoshikawa1106:20160519230143p:plain


このエラーが発生したときはPortの指定部分を確認してみれば良さそうです。

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch


Portの指定を修正しただけで、ReduxのサンプルコードをHeroku上で動かすことができるようになりました。
f:id:tyoshikawa1106:20160519230408p:plain


React × ReduxのサンプルコードをHerokuで動かしたいときは、Portの指定部分を変更することで対応できました。