今からはじめるReact.js〜Herokuへのデプロイ〜

前回→[今からはじめるReact.js〜Flux〜](http://qiita.com/kuniken/items/b532d4fa980b53fd6bd5)

# Herokuへのデプロイ
[Heroku](https://www.heroku.com/)は自分が作成したWEBサービスを無料でクラウド上に公開できるサービスです。
OSや開発言語のインストールが不要なため、ソースをデプロイすることでサービスが起動できます。DBなどもアドオンという形で面倒なコマンド作業を行うことなく利用することができます。
サポートしている開発言語は以下の図のようになっています。
<img width="881" alt="スクリーンショット 2015-12-09 9.04.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/9dd6e922-dbec-e4e1-5b59-b2c905a72ff1.png">
Salesforce社の一事業であるため、アドオンを使えばSalesforceサービスとのデータ連携が容易に実現できます。

## Herokuにサインアップ
サインアップしていない場合はサインアップします。
[https://www.heroku.com/home](https://www.heroku.com/home)

サインアップが完了するとダッシュボード画面が表示されます。
<img width="1188" alt="スクリーンショット 2015-12-05 19.01.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/5a23bfc3-e7d7-fa94-6019-bdec270f13df.png">

## アプリの追加
公開したいサービスを設定します。ダッシュボードの画面右上にある、＋ボタンをクリックします。
<img width="146" alt="スクリーンショット 2015-12-06 12.17.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/59503c37-61ef-b7eb-b550-2d2b12d62abd.png">
次に、「Create new app」ボタンをクリック。
<img width="227" alt="スクリーンショット 2015-12-06 12.19.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/7fdb5579-3c2f-40fa-a37d-930c39ef6b61.png">
すると、以下の画面が表示されます。
<img width="909" alt="スクリーンショット 2015-12-06 12.20.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/99f4503f-91d8-9ea9-690c-801ee3de6d06.png">
App Nameにサービスの名前を入力して、「Create App」ボタンをクリックします。Regionはそのままで大丈夫です。（来年からエンタープライズ版だとTokyoが選択できるみたいですが、いつか無料でTokyoも選べるようになってほしいですね。。）
入力したサービス名でURLが与えられます。

`https://hogehoge.herokuapp.com/`

のようになります。したがって、サービス名は世界で一意とする必要があります。
自分でドメインを持っている場合は、アプリ作成後にそのドメインを付与することもできます。

作成が完了すると、以下のような画面が表示されます。
<img width="922" alt="スクリーンショット 2015-12-06 12.41.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/bcac18f6-6b85-8b4e-4a13-6a80afca7688.png">

## heroku toolbeltのインストール
自分の端末からHeroku環境にソースをデプロイするなど、Herokuのコマンドが実行できるように、heroku toolbeltをインストールします。
[https://toolbelt.heroku.com](https://toolbelt.heroku.com)
からダウンロードしてインストールするか、仮想環境（unix）の場合は下記のようにインストールします。

```lang:Herokuインストール
$ sudo wget -qO- https://toolbelt.heroku.com/install.sh | sh

$ sudo vi ~/.bash_profile
以下の２行を最下部に追記します。
PATH="/usr/local/heroku/bin:$PATH"
export PATH
```

## heroku gitとの紐付け
Herokuでアプリを公開する場合は、Herokuのgitリポジトリにソースをpushすることで、デプロイが行われるようになっています。

Herokuのgitリポジトリとの紐付けを行います。
`$ heroku git:remote -a 上記で入力したアプリ名`
gitの管理下にないディレクトリでHerokuのデプロイを行う場合は、
`$ git init`
してから上のコマンドを実行します。
heroku git:remoteする際にemailとパスワードを求められる場合はHerokuアカウントを作成した際に設定したものを入力します。

## Procfileの作成
Herokuのアプリを起動するためには、Procfileが必要なのですが、今回はpackage.jsonに標準的なコマンドを記述しているため、なくても起動できます。あえて書くなら、
`web: npm start`
のように`web:起動コマンド`と書きます。

## package.jsonの編集
下記のように、"scripts"に２行追記します。
npm installはheroku側が勝手にやってくれますので、install後のビルドとサーバー起動がされるようにコマンドを追記する感じです。
(実際のサービスはビルドしたものしか使いませんので、ビルドしたものをデプロイしている場合はstartの指定だけでOKなはず)

```json:package.json
  "scripts": {
    "postinstall": "gulp browserify",
    "start": "node server/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
```

※ history.jsの追加
Herokuだとnpmのバージョンが３以上になっているため、サンプルソース（[https://github.com/kunitak/react-tutorial](https://github.com/kunitak/react-tutorial)）を参考にしている場合は、historyのインストールが必要になります。デプロイ前にhistoryをインストールします。
`$ npm install history --save`

## デプロイ
サンプルソースを使用している場合はmasterブランチをチェックアウトし、今までの修正分をマージしておいてください。

デプロイは以下のコマンドで行います。
`$ git push heroku master`

うまくデプロイできたら、

```
・
・
・
remote: -----> Compressing... done, 16.8MB
remote: -----> Launching... done, v6
remote:        https://アプリ名.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy.... done.
```
と出力されますので、urlにアクセスして
DBアクセスはこの時点ではまだできませんが、起動できるか確認してみましょう。
なお、DBアクセスは下記で行います。

## アドオンの追加
### Heroku Postgres
サンプルソースではDBはpostgreSQLを使って開発していました。
Heroku環境でもpostgreSQLを使えるように、アドオンを設定します。
<img width="987" alt="スクリーンショット 2015-12-07 20.10.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/53e01d52-0255-70bb-b52e-8ae651665b5a.png">
上記、アプリのResourcesページで、Add-onsの検索欄に、「Postgres」とか入力して、Heroku Postgresを選択します。
<img width="876" alt="スクリーンショット 2015-12-07 20.13.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/48a6b50b-efab-9cbf-87fe-ea7bcc71b92e.png">
無料版を使う場合はこのPlan nameのままProvisionボタンをクリックします。
下記のように追加されます。ちなみに１万行まで無料です。
<img width="903" alt="スクリーンショット 2015-12-07 20.16.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/a883134c-8ab5-e4b9-2a44-c09a3b7165d1.png">

### Node.jsソースの修正
追加したHeroku Postgresのアドレスですが、Settingsページで確認することができます。
「Reveal Config Vars」ボタンをクリックすると、DATABASE_URLという変数名で値が確認できます。
<img width="983" alt="スクリーンショット 2015-12-07 20.22.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/89819/104e8232-0d86-48ef-1844-1dcfd2c86a5f.png">

確認したアドレスでDBアクセスできるように、サーバサイドのソースを修正します。

```js:server/pghelper.js
var pg = require('pg'),
    databaseURL = 'postgres://postgres:postgres@127.0.0.1:5432/postgres';
```
としていたところを、

```js:server/pghelper.js
var pg = require('pg'),
    databaseURL = process.env.DATABASE_URL || 'postgres://postgres:postgres@127.0.0.1:5432/postgres';
```
とするだけです。以上のようにして、Config Variablesに設定した変数は
`process.env.HOGE`
としてNode.js側で参照することができます。適宜、必要な変数を自分で追加して利用することもできます。

今回はベタ書きしていますが、使用する環境変数が増えてきた場合は管理しやすいように定義用のjsファイルを作成するなどして、切り出しておくと良いでしょう。

### Heroku環境でのDB作成
初めてHeroku環境にDBを作成する場合は、ローカルDBをそのままHerokuに移行するだけで良いかもしれません。そんな時は、次のコマンドで移行することができます。

```
$ heroku pg:push postgres://postgres:postgres@127.0.0.1:5432/postgres DATABASE_URL --app アプリ名
```
Heroku環境のDBをリセットする場合は、下のコマンドを実行します。

```
$ heroku pg:reset DATABASE_URL --confirm アプリ名
```

ちなみに、Heroku環境でsqlを実行したい場合は、次のコマンドを実行します。

```
$ heroku pg:psql
```

DB作成が完了したら、もう一度デプロイしてアプリを動かしてみましょう。

## デバッグログを確認する
アプリを実行した際に、ログを確認したくなったら、次のコマンドを実行することで確認できます。

```
$ heroku logs
```
直近の100行までのログが出力されます。
出力行数を増やしたい場合は、以下のコマンドを実行します。1500行までしか保持しないらしいです。

```lang:例：200行出力したい場合
$ heroku logs -n 200
```

リアルタイムでログを監視し続けたい場合は、以下のコマンドを実行します。

```
$ heroku logs --tail
```

Papertrailなど、アドオンに便利なログ監視ツールがありますので、そちらを利用する手もあります（無料でもクレジットカードの登録が必要になるアドオンがあります）。

# サンプルソース
https://github.com/kunitak/react-tutorial/tree/day10