React(CRA)とRailsAPIを同一リポジトリで動かす方法

##前提条件

• Heroku blogの記事から必要最小限の部分だけ引用したものになります
• Ruby、Rails、Node、npmまたはyarnなどの基本的なインストールが済んでいること
• Railsアプリを作成したことがある
• Reactアプリをcreate-react-appで作成したことがある
• Herokuでホスティングをしたことがある(gitでデプロイ)

参考記事：A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku

Railsアプリの作成

rails new　コマンドでrails アプリを作成します。

--apiコマンドでapiモードにするのをお忘れなく

rails new rails_app --api

作成したアプリが起動するか確かめましょう。

cd rails_app
rails s

Reactアプリの作成

Railsアプリのルートディレクトリ上でclientという名前でReactアプリを構築します。

npm create-react-app client

Railsと同じように、Reactが動くか確かめましょう。

cd client
npm start 

このままだと開発中にReactとRailsで別ポートとなるので
package.jsonに設定を追加します。

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001", #ここを追加
  ...
}

この設定によりRails側には、Reactアプリがポート3001で起動しているように認識させます。

React - Rails ローカル編

ローカル環境立ち上げ用のタスクを作成します。

ProcfileにReactとRailsを立ち上げるコマンドを書き、Railsのタスクで呼び出す方法にします。

Procfileはheroku上で利用されるファイルで、プロセスのタイプ：コマンドで記述できます。

<process type>: <command>

今回は、ルートディレクトリにProcfile.devというファイル名で、RailsアプリとReactアプリの起動コマンドを記述します。

Procfile.dev

web: cd client && PORT=3000 npm start
api: PORT=3001 && bundle exec rails s

呼び出しコマンドを簡潔にしたいため、taskにします。

start.rake

namespace :start do
    desc 'Start development server'
    task :dev do
      exec 'heroku local -f Procfile.dev'
    end
end

taskでprocfileの起動コマンドをキックします。

rake start:dev

ReactとRailsがどちらも立ち上がったと思います。

ターミナル上のログでわかりづらい場合はRails側で何かしらJsonを返すようにしておき、React側からfetchできるようにしておくとわかりやすいと思います。

React - Rails Heroku編

メインテーマであるHeroku上へのデプロイです。

まずはルートディレクトリにpackage.jsonファイルを作成します。

RailsのpublicディレクトリにReactの静的ファイルを作成するコマンドを記述します。

package.json

{
    "name": "list-of-ingredients",
    "license": "MIT",
    "engines": {
      "node": "10.15.3",
      "yarn": "1.15.2"
    },
    "scripts": {
      "build": "yarn --cwd client install && yarn --cwd client build",
      "deploy": "cp -a client/build/. public/",
      "heroku-postbuild": "yarn build && yarn deploy"
    }
}

production用のProcfileを作成し、railsの起動コマンドを記述します。

必要に応じてrelease後のmigrateコマンドも記述します。

Procfile

web: bundle exec rails s
release: bin/rake db:migrate

CLIを利用してheroku上のdynoの作成とビルドパックの設定を行います。

アプリの作成

heroku apps:create

ビルドパックの設定

heroku buildpacks:add heroku/nodejs --index 1
heroku buildpacks:add heroku/ruby --index 2

heroku上の準備ができたのでgitでpushします。

git add .
git commit -m "React - Rails"
git push heroku master

アプリを開きます。

heroku open

あとがき

みなさん無事に動きましたでしょうか？

もっと良い方法があれば是非教えていただけるとありがたいです。

もし動かない場合は下記の参考元の記事を読んでみてください！

参考記事：A Rock Solid, Modern Web Stack—Rails 5 API + ActiveAdmin + Create React App on Heroku