Heroku：React Starter Kitを試してみました

React Starter Kitというのがあったので、ちょっと確認してみました。

以下の手順でアプリを起動してみることができます。

$ git clone git@github.com:kriasoft/react-starter-kit.git
$ cd react-starter-kit/
$ npm i
$ npm start

デモアプリはこんな感じ。ページ遷移も利用できます。

React Starter KitとHerokuデプロイ

Herokuにはこのままデプロイできるかなと実行してみました。残念ながらエラー。

Heroku Logsで確認してみると次のエラーが原因と思われます。

babel-node: not found

参考になりそうなのはたぶんこれ。

内容を追っていったら、Gitterとかでそういった質問に答えています。といったリンクがありました。

Gitterを読んでいて気になったのが次の部分。『npm run build』でbuildファイルを生成して、生成したbuildファイルだけをherokuにデプロイすれば大丈夫。的な内容だと思います。

try to run npm run build then cd build then node server.js, do it at local.
Then deploy only build directory to heroku
Let me know if this works.

package.jsonやserver.jsってひとつだけだと思っていたのですが、buildするようなプロジェクトの場合はそちらにも用意されていました。Procfileや.gitファイルは当然用意されていないので自分で用意してHerokuデプロイを実行してみました。

結果は無事デプロイ成功。

今までNode.jsとかのサンプルを動かしていたたときは、.gitignoreで不要なファイルを除外したあと、基本プロジェクトファイル全部をHerokuにデプロイしていたので、こういったbuildファイルだけをHerokuデプロイするという考え方に気づきませんでした。。

今回のようなbuildファイルをHerokuデプロイする場合、何かベストプラクティス的なことはあるのかなと検索してみたところQiitaに参考になる情報が投稿されていました。

デプロイ用にブランチを用意したり、postinstallにgulpコマンドを記述してheroku上でbuildを実行したりという考え方があるみたいです。(コメント欄を含めてその他にもいろいろ紹介されていました。)

とりあえず、React Starter KitのデモアプリをHeroku上で動かすことまで確認できたので良かったです。

React Starter Kitとテスト

React Starter Kitにはテスト実行の環境も用意されています。次のコマンドで実行できました。

$ npm test

React Starter Kitはこんな感じのアプリでした。React開発で必要なファイル構成が用意されていて、Herokuへのデプロイ方法も確認できたので、これを基準にいろいろ勉強できそうでした。