React Redux のアプリをHerokuにあげるまでの作業メモ

まずは、ローカルでサクッと実行できるように、Yeomanとreduxのジェネレータを入れる。

npm install -g yo

$ yo
? ‘Allo Yusuke! What would you like to do? Install a generator
? Search npm for generators: redux
? Here’s what I found. Official generator → ෴
Install one? redux CLI for Redux: next-gen functional Flux/React with devtools

$ mkdir redux-zoetin; cd redux-zoetin/; git init

$ yo redux
_—–_
| | .————————–.
|–(o)–| | Welcome to the |
`———´ | pioneering Redux |
( _´U`_ ) | generator! |
/___A___\ ‘————————–‘
| ~ |
__’.___.’__
´ ` |° ´ Y `

? What’s the name of your application? redux-zoetin
? Describe your application in one sentence: …
? Which port would you like to run on? 3000
? Install dependencies? Yes

$ npm start

> redux-zoetin@0.1.0 start /Users/yusukenozoe/Documents/redux-zoetin
> DEBUG=true node server.js

Listening at localhost:3000
webpack built d5f31bc70943e3f275bd in 3561ms

ここまででデフォルトのアプリが起動する。次に、これをそのままHerokuにデプロイする。この際、以下の2点を変えておく必要がある。(参考:https://devcenter.heroku.com/articles/getting-started-with-nodejs)

  1. Herokuはdevdependenciesをインストールしないので、全部dependenciesに追加する。
  2. app.set(‘port’, (process.env.PORT || 3000));とし、app.listen(app.get(‘port’), function (err, result) {のように書き換える。

$ heroku create

$ git push heroku master

完了したら、heroku openコマンドでアプリがデプロイされていることを確認する。