RubyのRailsをMySQLでHerokuにあげてみた

今までの麻雀アプリは一人でずっとやるだけだったので、
もう少しデータ的なのを集められるようになりたいなーと思って
ちょっと改良しました。

https://rubymahjong.herokuapp.com/

↓こんなの
<img width="1105" alt="スクリーンショット 2019-07-16 2.51.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/505ec51d-f0e8-e269-cb36-aed830a4d7cc.png">


みんなのあがり回数とあがりまでの平均ツモ数を表示できるようにしました！

◇開発言語
　ruby 2.6.3
◇サーバーサイドフレームワーク
　ruby on rails 5.2.3
◇フロントエンドフレームワーク
　Vue.js
◇データベース
　MySQL
◇開発OS
　mac
◇IDE
　vscode
◇ソース管理
　GitHub
◇アプリケーションプラットフォーム
　Heroku

忘れないうちにRuby On Railsのインストール手順とかまとめておきます。

#Ruby On Railsのインストール
まぁ、Railsのインストール手順とかは色々記事があるのでそれを見ればできます。
自分は[Rails Girls ガイド](http://railsgirls.jp/install)を見ながら環境を作りました。（Girlじゃないけど）

基本的にはRails Girls ガイドの通りに作業を進めればいいんですが、
Homebrewのインストールがうまく行きませんでした。
brew doctor　を実行してエラーがないか確認したところ

```
11:05:46 Users $ brew doctor
Please note that these warnings are just used to help the Homebrew maintainers
with debugging if you file an issue. If everything you use Homebrew for is
working fine: please don't worry or file an issue; just ignore this. Thanks!

Warning: "config" scripts exist outside your system or Homebrew directories.
`./configure` scripts often look for *-config scripts to determine if
software packages are installed, and which additional flags to use when
compiling and linking.

Having additional scripts in your path can confuse software installed via
Homebrew if the config script overrides a system or Homebrew-provided
script of the same name. We found the following "config" scripts:
  /Library/Frameworks/Python.framework/Versions/3.7/bin/python3.7-config
  /Library/Frameworks/Python.framework/Versions/3.7/bin/python3.7m-config
  /Library/Frameworks/Python.framework/Versions/3.7/bin/python3-config
11:05:52 Users $ 
```

と大量のWarningが…。
原因ですが、「-config」ファイルにPathが通っているとWarningが発生するみたいです。
envコマンドで環境設定確認すると、確かにPythonのPathが通ってますね。

```
11:12:40 Users $ env | grep PATH
PATH=/Users/itoutoshiya/.rbenv/shims:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin
```
以下のサイトを参考に、
PathからPythonを除外してbrewコマンドを実行するエイリアスを作成しました。
参考：https://www.task-notes.com/entry/20141223/1419324649

```
alias brew="env PATH=${PATH/\/Library\/Frameworks\/Python.framework\/Versions\/3.7\/bin:/} brew"
```

コンソールを再起動してbrew doctorを再実行。

```
11:22:47 ~ $ brew doctor
Your system is ready to brew.
```

これでHomebrewのインストールはうまくできました！

残りのソフトは、Rails Girls ガイドの通りに実装できました。

#MySQLのインストール
MySQLのインストール手順も参考になる記事はたくさんありますね。
自分は以下のサイトが分かりやすかったので参考にさせてもらいました。
https://qiita.com/fuku_tech/items/a380ebb1fd156c14c25b

```
brew install mysql
```

#railsプロジェクト作成
必要なものは全部インストールできたので、早速
mysqlを利用するRailsプロジェクトを作成します。
といっても、さすがRails。コマンド一つだけですぐにできます。

```
rails new ./ -d mysql
```

適当なフォルダにて上記コマンドを実行すればOKです。
VScodeにてコンソールを表示し、上記コマンドを実行すれば必要なファイルが勝手に作成されます。

<img width="1136" alt="スクリーンショット 2019-08-01 14.48.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/38ae35fa-927d-ee6b-ee58-90b6037a404c.png">

config/database.ymlを確認すると、ちゃんとMySQLを使う設定になってますね！

んで、早速Railsの起動コマンド「rails server」を実行。
デフォルトだと地球儀の絵がTOPページに表示されるはず。
<img width="1099" alt="スクリーンショット 2019-08-01 14.37.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/1afae107-ad52-9ce5-f2ca-8a11e1f03955.png">
うーん失敗。

ただ、以下のメッセージからするに、mysqlに接続できていない感じ。

```
Can't connect to local MySQL server through socket '/tmp/mysql.sock' (2)
```

というか、そもそもsqlサーバーを起動していないので、そりゃDB接続できないよってエラー出ますよね。
ということで、以下コマンドを実行してsqlサーバーを起動。

```
mysql.server start
```

<img width="641" alt="スクリーンショット 2019-08-01 14.42.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/dffcb30e-66e5-db02-5f6f-37271be3d557.png">

うん。sqlサーバーは起動できたみたいです。
じゃぁもう一度Railsを起動し画面を確認！
<img width="1238" alt="スクリーンショット 2019-08-01 14.51.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/530fb23f-ad50-e00a-ff5d-03f554409d2f.png">
まぁ、エラーになるよね。今回のエラー原因は以下の通り。

```
Unknown database 'project_development'
```

project_developmentってデータベースがないよーってい言ってますね。
project_developmentは、config/database.ymlで設定している
データベースですね。
mySqlにログインしようとしてもproject_developmentはないからエラーになりますね。
まぁ、project_developmentを作ってないので当たり前ですね。

<img width="641" alt="スクリーンショット 2019-08-01 14.56.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/7e95ed80-5d1c-0498-741d-b9e1943f8843.png">


なので、project_developmentを作ります。
ただ、これもRailsを利用して作成することができます。
以下コマンドを実行するだけ！

```
rails db:create
```
<img width="1087" alt="スクリーンショット 2019-08-01 14.59.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/ecf25a99-ea39-af68-c1ce-f9c62e00ed37.png">

はい！できましたー。
じゃぁもう一度Railsを起動し画面を確認！

<img width="1071" alt="スクリーンショット 2019-08-01 15.01.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/4370eeb7-9914-be67-8ad0-a39dde9fe407.png">

地球の絵！
見慣れた画像が表示されました！
とりあえず、これで環境面は一通りできました！

#テーブル作成
今回は、上がりまでにかかった自摸の回数をテーブルに記録させていきたいと思います。
Railsのコマンドを実行すると、テーブルやそのテーブルにアクセスするための機能（プログラムファイル）
も自動でできます。

```
rails generate scaffold WonCount name:string wonCount:integer
```
<img width="1087" alt="スクリーンショット 2019-08-01 15.16.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/5d9dd18e-1a11-11de-131d-b6a014050430.png">

ですが、上記コマンドだけだと肝心のテーブル自身は作成されません。
<img width="830" alt="スクリーンショット 2019-08-01 15.24.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/d650edeb-bf5c-66bd-2b93-0335b2d224e0.png">


マイグレーションを実行する必要があります。
と言っても難しいことは何もしません。
以下コマンドを実行するだけです。

```
rails db:migrate
```

<img width="1087" alt="スクリーンショット 2019-08-01 15.21.15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/d2afdd46-4f62-a802-ee26-10df8f90919d.png">

<img width="830" alt="スクリーンショット 2019-08-01 15.34.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/31a82f66-f4c2-c34e-d98e-a9c09746f52c.png">

参考：https://www.sejuku.net/blog/14229

ここまでくれば、後はあがりまでの自摸数をDBに登録するAPIを実装するだけです。

#Herokuへのデプロイ
ローカル環境ではうまく出来たので、早速インターネットに公開したいと思います。
サーバーは、またHerokuを使います。便利ですね、PaaS。
参考：http://arfyasu.hatenablog.com/entry/2016/01/11/035101
　　　https://devcenter.heroku.com/articles/rails4#logging-and-assets

###rails_12factor
rails_12factorというのをHeroku上で利用できるように設定します。
rails_12factorは、Herokuでのログを見れるようにするgem（Rubyのライブラリ）です。
Gemfileに以下記述を追加するだけでOKです。

```Gemfile
group :production do
  gem 'rails_12factor'
end
```

###Procfile作成
Procfileを作成し、Heroku上での起動コマンドを記述します。
以下記述だけでOK。


```
web: bundle exec rails server -p $PORT
```

<img width="1087" alt="スクリーンショット 2019-08-04 21.11.10.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/ae38dfe7-74a2-f4d0-e226-0154694c26f1.png">

###Herokuにアップ
はい。ここまで出来たらHerokuにアップします。
HerokuGitにアップする方法もありますが、
自身のGitHubにアップしたプロジェクトを利用します。

んで、プロジェクトアップロード後にWebサイトを確認。

<img width="1041" alt="スクリーンショット 2019-08-04 21.32.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/cdf44153-9afe-f13f-8ed1-7819da0e3cf9.png">

はい。失敗〜。
Herokuのログを見ます。コマンドプロンプトから以下コマンドを実行〜。

```
heroku logs --tail --app rubymahjong
```

※「rubymahjong」は、Herokuにアップしたプロジェクト名です。
<img width="1159" alt="スクリーンショット 2019-08-04 21.32.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/9224be26-0d55-0efa-8214-1ee44e9712a1.png">

```
Mysql2::Error::ConnectionError (Can't connect to local MySQL server through socket '/var/run/mysqld/mysqld.sock' (2)):
```
MySQLに接続出来なくてエラーになってますね。


#HerokuにMySQLのDB作成
MySQLを利用するにはHerokuにクレジットカードの情報を登録する必要があります。
クレジットカードの登録だけなら無料です。（2019/08/04現在）

クレジットカード登録後、コマンドプロンプトから以下コマンドを実行しMySQLが利用できるようにcleardbアドオンをインストールします。
参考：https://www.yuta-u.com/programing/rails/heroku-mysql-2

```
heroku addons:create cleardb:ignite --app rubymahjong
```
<img width="1159" alt="スクリーンショット 2019-08-04 22.20.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/69aaf175-b6bf-aafb-4006-880250c85a3f.png">

Heroku上の「Overview」を見ると、MySQLがアドオンされたことが分かりますね。
<img width="1200" alt="スクリーンショット 2019-08-04 22.10.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/9a99b67e-73f6-bd61-e9a4-b22ddec493e2.png">

以下コマンドを実行してコンフィグを確認しても、MySQLが追加されたことが分かります。

```
heroku config --app rubymahjong
```

【変更前】
<img width="1159" alt="スクリーンショット 2019-08-04 22.24.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/7658c16e-843c-afd3-b20b-8dc1827b2688.png">
【変更後】
<img width="1159" alt="スクリーンショット 2019-08-04 22.23.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/4db05b23-9555-e207-2d5e-35f6e4ca3c4f.png">

CLEARDB_DATABASE_URLに、デプロイ用のDB接続情報が記載されています。

```
CLEARDB_DATABASE_URL:     mysql://bfc76098d1b006:90049602@us-cdbr-iron-east-02.cleardb.net/heroku_c287fee3253ccb2?reconnect=true
```

この情報をDATABASE_URLとして設定します。
ただし、Railsのgemでインストールしているのがmysql2のため、
mysqlではなくmysql2に変更して設定します。

```
heroku config:set DATABASE_URL=mysql2://bfc76098d1b006:90049602@us-cdbr-iron-east-02.cleardb.net/heroku_c287fee3253ccb2?reconnect=true --app rubymahjong
```

<img width="1159" alt="スクリーンショット 2019-08-04 22.56.06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/58225b6f-fbd2-64fa-f758-28ed357fd2ab.png">

変更後、またコンフィグを確認してみます。
【変更後】
heroku config --app rubymahjong
<img width="1159" alt="スクリーンショット 2019-08-04 23.10.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/b535734b-a5a7-8f09-6320-21f045d3ff28.png">
DATABASE_URLが追加されてますね！

この状態でブラウザから画面を確認すると…。
<img width="1041" alt="スクリーンショット 2019-08-04 21.32.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/9a90e974-0440-c867-db1f-d67441d05d69.png">

エラー。でも、ログの内容は変わってます。
<img width="1159" alt="スクリーンショット 2019-08-04 23.16.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/bb01caa0-d9f0-fa3e-9020-5c008724ca07.png">

```
ActiveRecord::StatementInvalid (Mysql2::Error: Table 'heroku_c287fee3253ccb2.won_counts' doesn't exist: SHOW FULL FIELDS FROM `won_counts`):
```

won_countsテーブルがなくてエラーになってますね。

テーブル作成はマイグレーションですね。以下コマンドを実行！

```
heroku run rails db:migrate --app rubymahjong
```
<img width="1159" alt="スクリーンショット 2019-08-04 23.22.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/25d21dba-d0fe-8eee-a6e4-b9916c47bb41.png">

なんか出来てる感じですね！
早速ブラウザから画面を確認してみます。

<img width="1200" alt="スクリーンショット 2019-08-04 23.24.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/363095/bcdc1907-51ab-c552-4ba4-d04af99dd348.png">
できました！
きちんとあがり回数をDBに登録し、その結果を出力出来てます！

Herokuって便利ですねー。
Rails＋MySQLってかなりのWebサービスで利用されてそうで、
その環境が簡単に作れると色々なことが出来て夢が広がりますね！

----------
今回のプログラムは以下GitHubにあげてます。
https://github.com/kph7m/rubymahjong