Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

前回→今からはじめるReact.js〜Flux〜

Herokuへのデプロイ

Herokuは自分が作成したWEBサービスを無料でクラウド上に公開できるサービスです。
OSや開発言語のインストールが不要なため、ソースをデプロイすることでサービスが起動できます。DBなどもアドオンという形で面倒なコマンド作業を行うことなく利用することができます。
サポートしている開発言語は以下の図のようになっています。
スクリーンショット 2015-12-09 9.04.03.png
Salesforce社の一事業であるため、アドオンを使えばSalesforceサービスとのデータ連携が容易に実現できます。

Herokuにサインアップ

サインアップしていない場合はサインアップします。
https://www.heroku.com/home

サインアップが完了するとダッシュボード画面が表示されます。
スクリーンショット 2015-12-05 19.01.46.png

アプリの追加

公開したいサービスを設定します。ダッシュボードの画面右上にある、+ボタンをクリックします。
スクリーンショット 2015-12-06 12.17.38.png
次に、「Create new app」ボタンをクリック。
スクリーンショット 2015-12-06 12.19.03.png
すると、以下の画面が表示されます。
スクリーンショット 2015-12-06 12.20.55.png
App Nameにサービスの名前を入力して、「Create App」ボタンをクリックします。Regionはそのままで大丈夫です。(来年からエンタープライズ版だとTokyoが選択できるみたいですが、いつか無料でTokyoも選べるようになってほしいですね。。)
入力したサービス名でURLが与えられます。

https://hogehoge.herokuapp.com/

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

作成が完了すると、以下のような画面が表示されます。
スクリーンショット 2015-12-06 12.41.48.png

heroku toolbeltのインストール

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

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

$ sudo vi ~/.bash_profile
以下の2行を最下部に追記します。
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"に2行追記します。
npm installはheroku側が勝手にやってくれますので、install後のビルドとサーバー起動がされるようにコマンドを追記する感じです。
(実際のサービスはビルドしたものしか使いませんので、ビルドしたものをデプロイしている場合はstartの指定だけでOKなはず)

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

※ history.jsの追加
Herokuだとnpmのバージョンが3以上になっているため、サンプルソース(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を使えるように、アドオンを設定します。
スクリーンショット 2015-12-07 20.10.04.png
上記、アプリのResourcesページで、Add-onsの検索欄に、「Postgres」とか入力して、Heroku Postgresを選択します。
スクリーンショット 2015-12-07 20.13.57.png
無料版を使う場合はこのPlan nameのままProvisionボタンをクリックします。
下記のように追加されます。ちなみに1万行まで無料です。
スクリーンショット 2015-12-07 20.16.17.png

Node.jsソースの修正

追加したHeroku Postgresのアドレスですが、Settingsページで確認することができます。
「Reveal Config Vars」ボタンをクリックすると、DATABASE_URLという変数名で値が確認できます。
スクリーンショット 2015-12-07 20.22.38.png

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

server/pghelper.js
var pg = require('pg'),
    databaseURL = 'postgres://postgres:postgres@127.0.0.1:5432/postgres';

としていたところを、

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行までしか保持しないらしいです。

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

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

$ heroku logs --tail

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

サンプルソース

https://github.com/kunitak/react-tutorial/tree/day10

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away