Rails+React with webpacker ~Herokuにデプロイ~

ここまでで簡単ですが

twitter認証 + タイムライン表示
postgresqlでデータベース構築
devise認証
Rails と React 間でaxiosで通信

できたので, いったんHerokuにデプロイできるかやってみました. ので, そのメモです.

dotenv-railsの導入
herokuにデプロイ
- .gitignoreの設定
- Herokuにデプロイ
Heroku
これから

dotenv-railsの導入

herokuにデプロイするにあたり, config/secrets.yml もアップロードしないといけません. ですが, 今までここにTwitterのAPI Keyとか載せていたのでどうにかしないとなということになりました.

そこでdotenv-railsで環境変数を扱うことにしました.

github.com

これを使うと, .envファイルに環境変数を書くだけで勝手にrailsのファイルから呼び出せます. ですが, ここでバージョンの問題が発生したのでそのメモ.

Gemfileに

group :development, :test do
  gem 'dotenv-rails'
end

として docker-compose run --rm web bundle install すると自分の環境だとdotenv-rails（0.7.0）が入りました. で, 仕様通りに使っても環境変数が呼び出せないと.

色々調べていくうちに, バージョンの問題が浮上しました.

github.com

というわけで, dotenv-railsを2018年8月現在で最新のバージョン2.5.0を指定して入れ直すことにしました.

dockerでのGemのアンインストールとGemfile.lockの更新は以下の感じです.

$ docker-compose run --rm web bundle exec gem uninstall dotenv-rails
$ docker-compose run --rm web bundle update
$ docker-compose build

したあとで, Gemfileを以下に書き換えて

group :development, :test do
  gem 'dotenv-rails', '~> 2.5.0'
end

$ docker-compose run --rm web bundle install
$ docker-compose build
// 一緒にコンテナ立ち上げるなら
// $docker-compose up -d --build

するとdotenv-railsが使えるようになります.

herokuにデプロイ

.gitignoreの設定

dotenv-railsを使って秘匿情報を切り分けましたが, デフォルトでは.envファイルが.gitignoreに書いてないので書きます. ついでにHerokuに上げる必要のないDockerfileとdocker-compose.ymlも載せときます.

Herokuにデプロイ

webpackerのデプロイに関する項目を読むと, Heroku側がいい感じにやってくれそうなので, 特別な設定なくいけます.

Heroku

Heroku installs Yarn and node by default if you deploy a Rails app with Webpacker so all you would need to do:
heroku create shiny-webpacker-app
heroku addons:create heroku-postgresql:hobby-dev
git push heroku master
github.com

で, webpack使っているので恐らくasset pipline使わない関係で, config/environments/production.rbの config.assets.compile = false にしないと警告出ます.

そしたらもう

$ cd 作業ディレクトリ
$ git init
$ git add -A
$ git commit -m "heroku"
$ heroku login
$ heroku create my-app
$ git push heroku master

で行けるかなと思ったのですがいくつかつまずいたのでメモ.

app/javascript/imagesに画像がなくてコンパイルエラー

webpackerのエントリポイントのファイルで require.context('images', true, /\.(png|jpg|jpeg|svg)$/) にしているのに画像がないため怒られました. 何でもいいのでこの拡張子の画像を入れておきましょう.

起動のコマンドがおかしなことになってた

今回develop環境ではforemanを使っていました. で, Procfileを書いてたんですが, ProcfileがあるとHerokuはここに書いてあるコマンドでアプリを起動させるみたいです. デフォルトだと bundle exec rails s -p $PORT -e $RAILS_ENV で起動するみたいなので, Procfileの中身を以下に書き換えます.

web: bundle exec rails s -p $PORT -e $RAILS_ENV

※ あまりよくわかっていないのですが, たとえProcfileを.gitignoreしたとしてもProcfileの中身が読み込まれます. なので, Herokuに上げる際は必ず書き換えたほうがいいでしょう.

※ もっと良いやり方あると思う...

config/environments/production.rb にdeviseメール認証の記述をしていない

開発環境では

config.action_mailer.default_url_options = { host: '127.0.0.1', port: 3000 }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  :enable_starttls_auto => true,
  :address => 'smtp.gmail.com',
  :port => 587,
  :domain => 'smtp.gmail.com',
  :user_name => '*********@gmail.com',
  :password => ENV["GMAIL_PASS"],
  :authentication => 'login'
}

を書いていたのですが, 単純にデプロイ側にこれを書いていなかったのでエラー吐かれました. なので, hostをデプロイ環境に合わせて

config.action_mailer.default_url_options = { host: 'my-app.herokuapp.com' }
config.action_mailer.delivery_method = :smtp
config.action_mailer.smtp_settings = {
  :enable_starttls_auto => true,
  :address => 'smtp.gmail.com',
  :port => 587,
  :domain => 'smtp.gmail.com',
  :user_name => '*********@gmail.com',
  :password => ENV["GMAIL_PASS"],
  :authentication => 'login'
}

を記述します.

twitterのコールバックURLが開発環境の時のまま

twitter developmentの登録したアプリのところで, CallbackURLに

https://my-app.herokuapp.com/auth/twitter/callback

を追加しておけば動きました.

以上が無事済んだら

$ git add -u
$ git commit -m "heroku v2"
$ git push heroku master

// データベース構築
$ heroku run rake db:migrate

// 各種環境変数設定
$ heroku config:set ENV_NAME="..."

// アプリ起動
$ heroku open

// ログを見たいときは
$ heroku logs -t

// データベースの情報取得
$ heroku config | grep DATABASE_URL
▽以下のような順番で出力されます.
postgres://(User)***:(Pass)***@(Host)***:(Port)***/(Database)***

でOKです. データベース情報は, PG Commander の設定に入れてやれば接続できます.

これから

今後もデプロイでつまずきそうなので, 気をつけながらやっていきたいです.

※ 追記

ちなみにdockerでもデプロイできるみたいなので, 余力があればやろうかな.

devcenter.heroku.com