初めて Heroku に Rails アプリをデプロイする

# はじめに

PomoRoad というポモドーロテクニックのためのWebアプリケーションを作っています。
まずは自分自身で使うために、 Heroku にデプロイすることにしました。
せっかくなので、手順を整理しようと思います。

# バージョン

Ruby : 2.4.2
Rails : 5.1.4
React : 16.2.0
Redux : 3.7.2
Webpacker : 3.3.1
Heroku CLI : heroku-cli/6.15.35-cf39a29 (darwin-x64) node-v9.8.0

(Webpacker 使って Rails のレールに乗せてフロントエンドも開発している？という感じですが、バージョン情報はこんなもので良いのだろうか・・・)

# デプロイ手順

## ローカルで production モードで動かしてみる

Heroku に限らず、デプロイ前にローカルで production モードで動かしてみると良いです。
先に、エラーは潰しておきましょう。

[ローカルで Rails アプリを production モードで起動する \- Qiita](https://qiita.com/mokuo/items/b766ca36521530fd3084)

## Heroku にデプロイしてみる

[Rails チュートリアル](https://railstutorial.jp/chapters/beginning?version=5.1#sec-deploying)と [Heroku の公式](https://devcenter.heroku.com/articles/heroku-cli)を参考にしました。
おそらくそのままでは動かないだろうと思いながら、まずはデプロイしてみます。

### Heroku CLI のセットアップ

Mac の場合、 Homebrew でインストールできる

```
$ brew install heroku/brew/heroku
$ heroku --version
heroku-cli/6.15.35-cf39a29 (darwin-x64) node-v9.8.0
```

ログインする

```
$ heroku login
Enter your Heroku credentials.
Email: adam@example.com
Password (typing will be hidden):
Authentication successful.
```

### Heroku app を作成する

```
$ cd ~/myapp
$ heroku create
Creating app... done, ⬢ sleepy-meadow-81798
https://sleepy-meadow-81798.herokuapp.com/ | https://git.heroku.com/sleepy-meadow-81798.git
```

### アプリケーションの名前を変更する

```
$ heroku rename your-app-name
Renaming salty-refuge-51969 to your-app-name... done
https://your-app-name.herokuapp.com/ | https://git.heroku.com/your-app-name.git
Git remote heroku updated
 ▸    Don't forget to update git remotes for all other local checkouts of the app.
```

### Heroku にデプロイする

```
$ git push heroku master
```

コンソールのログを見ていると、以下のことは自動でやってくれているようだ。

- bundle install
- yarn install
- アセットプリコンパイル

`heroku open` でアクセスできる。

予想通り、エラーで表示できない。

<img width="828" alt="スクリーンショット 2018-03-18 18.15.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/102964/6b426735-8454-e9a9-38a3-b42e92d8a06e.png">

**参考**

- [第1章 ゼロからデプロイまで \| Rails チュートリアル](https://railstutorial.jp/chapters/beginning?version=5.1#sec-deploying)
- [Heroku CLI \| Heroku Dev Center](https://devcenter.heroku.com/articles/heroku-cli)

## ログを見てみる

`heroku logs` で確認できる。

```
Mysql2::Error (Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)):
```

Heroku はDBにデフォルトで PostgreSQL を使うが、 PomoRoad では MySQL を使っている。
MySQL を使うには、アドオンの追加が必要。

## アドオンで MySQL を追加して、設定する

[Add\-ons \| Heroku Dev Center](https://devcenter.heroku.com/categories/add-ons) を見てみると、 ClearDB と JawsDB が使えるようだ。
ググってみると、 ClearDB を使っている人が多そうなので、今回はそちらを選択する。

[ClearDB MySQL \| Heroku Dev Center](https://devcenter.heroku.com/articles/cleardb) を参考に進める。

```
$ heroku addons:create cleardb:ignite
Creating cleardb:ignite on ⬢ pomo-road... !
 ▸    Please verify your account to install this add-on plan (please enter a credit card) For more
 ▸    information, see https://devcenter.heroku.com/categories/billing Verify now at
 ▸    https://heroku.com/verify
```

エラーになった。
Heroku で MySQL を使用するためには、クレジットカードの登録が必要っぽい。
[ClearDB MySQL \- Add\-ons \- Heroku Elements](https://elements.heroku.com/addons/cleardb) によると、 Ignite プランであれば、無料のようだ。
https://dashboard.heroku.com/account/billing から設定する。

改めて、設定していく。

```
$ heroku addons:create cleardb:ignite
-----> Adding cleardb to sharp-mountain-4005... done, v18 (free)
$ heroku config | grep CLEARDB_DATABASE_URL
CLEARDB_DATABASE_URL => mysql://adffdadf2341:adf4234@us-cdbr-east.cleardb.com/heroku_db?reconnect=true
```

Rails で mysql2 gem を使っている場合、URLの `mysql://` を `mysql2:` に置き換える必要がある。

```
$ heroku config:set DATABASE_URL='mysql2://adffdadf2341:adf4234@us-cdbr-east.cleardb.com/heroku_db?reconnect=true'
Adding config vars:
DATABASE_URL => mysql2://adffd...b?reconnect=true
Restarting app... done, v61.
```

改めて、 `heroku open` でアクセスしてみる。
再びエラー。 `heroku logs` で確認してみる。

```
Mysql2::Error: Table 'heroku_da490e6a0cf8b91.users' doesn't exist
```

テーブルがない、ということですね。マイグレーションをする必要がありそうです。

## DBのマイグレーションをする

```
$ heroku run rails db:migrate
```

再度アクセスする。
エラーなく表示できれば、OK！！

# おわりに

PomoRoad というWebアプリですが、もう少し作り込んだらベータ版として公開して、改善を続けていこうと思っています。
ご興味ある方は、 [@mokuo_](https://twitter.com/mokuo_) で情報は呟いていくと思いますので、よろしくお願いいたします。