【　Ruby on Rails 6.0　】heroku + Mysqlで本番環境にデプロイするよ

# 始めに
railsアプリをherokuを使って本番環境にデプロイする過程をまとめます。
herokuとMysqlの環境でデプロイを考えている人の助けになれば幸いです。
ちなみに今回は`Github Desktopを導入している`、`railsアプリを作成済み`という前提で話を進めていくので、gitとアプリ作成の説明は省略します。。

# 開発環境

* macOS Catalina
* Ruby 2.6.5
* Ruby on Rails 6.0.0
* heroku
* Mysql
* Github Desktop

# 目次
[1.Gemfileの設定](#1-Gemfileの設定)
[2.config/datebase.ymlの設定](#2-config/datebase.ymlの設定)
[3.config/environments/production.rbの設定](#3-config/environments/production.rbの設定)
[4.bin以下のフォルダの設定](#4-bin以下のフォルダの設定)
[5.herokuの登録・設定](#5-herokuの登録・設定)
[6.おまけ](#6-おまけ)

## 1. Gemfileの設定
デプロイ予定であるherokuでは`PostgreSQL(略してpg)`というデータベースがデフォルトでインストールされているため通常はpgを用いますが、今回はMysqlをデータベースとして使います。

まず、gem 'sqlite3'と、書いてある箇所があると思うのですが、それをコメントアウトします。

```php:Gemfile
# sqlite3
```
代わりにMysqlをインストールします。

```php:Gemfile
# 記述場所は本番環境でも適用されるように末尾にでも書きましょう。
gem 'mysql2', '>= 0.5.3' # バージョン0.5.3
```

```:php:ターミナル
$ bundle install
```
これでGemfileは完了です。

## 2. config/datebase.ymlの設定
Gemfileの設定でこのアプリは本番環境でMysqlを使います、という宣言は完了しました。
しかし実際にデータベースと接続する記述はまだ完了していません。
その接続の設定をする箇所がconfigフォルダの中にある**database.yml**というファイルです。

ファイル内の下の方にあるproduction環境についての設定を、以下のように変更してください。

```php:config/database.yml
production:
  <<: *default
  database: app_production
  username: root
  password: <%= ENV['DATABASE_PASSWORD'] %>　# 環境変数を設定していない場合は空欄で
  socket: /var/lib/mysql/mysql.sock
```
これでデータベースの接続の記述は完了です。

## 3. config/environments/production.rbの設定
Railsは本番環境での動的な画像の表示がデフォルトでオフになっています。
画像を表示するために以下の記述を**falseからtrueに変更してください。**
この記述により、assets以下のフォルダから動的にコンパイルしながらページを読み込みます。

```php:config/environments/production.rb
#デフォルトでfalseとなっている以下の箇所をtrueに変更
  config.assets.compile = true
```
この工程を踏まないと、全ての設定が完了してブラウザを開くと**"We're sorry, but something went wrong."**というエラーと遭遇してしまいますので注意してください。

## 4. bin以下のフォルダの設定
アプリ内にbinというフォルダがあるのですが、その中のファイル全て(bundle,rails,rake,setup,spring, update,yarn)の一番上に

```php:
#!/usr/bin/env ruby
```
という記述があると思います。ここの記述が、

```php:
#!/usr/bin/env ruby 2.3.1
```
など**バージョン指定されてしまっているファイル全てのバージョンを削除してください。**つまり、上の記述から

```php:
#!/usr/bin/env ruby
```
このように**数字を削除しましょう。**(今回は2.3.1の部分)

ここまででrailsアプリ側の設定は終了です。
**Github Desktop上でmasterにpushしておきましょう。**
ここからはターミナルを主に操作していきます。

## 5. herokuの登録・設定
AWSだとRailsアプリはデプロイが難しいことが多いのですが、このherokuを使うと比較的簡単にデプロイすることができます。
機能的には物足りない部分もあるのですが、その場合は有料版を使えば問題なくサービスを立ち上げることができます。就活用にポートフォリオを管理している場合、アプリ起動時間は重要だと思うので、あまりにも遅い場合はその期間だけでも、有料版を使うようにしたほうがいいと思います。
↓
[herokuに登録](https://signup.heroku.com/login)

会員登録が完了したら、今度はherokuの機能を自分のPCに紐付けましょう。cliをダウンロードします。
[https://devcenter.heroku.com/articles/heroku-cli](https://devcenter.heroku.com/articles/heroku-cli)

```php:ターミナル
$curl https://cli-assets.heroku.com/install-ubuntu.sh | sh

$echo 'PATH="/usr/local/heroku/bin:$PATH"' >> ~/.profile

# インストールしたherokuのバージョンが確認できたら成功です
$heroku --version
>>heroku/7.0.47 darwin-x64 node-v10.1.0
```
### PCからherokuにログイン

```php:ターミナル
$heroku login
```
### herokuに登録したemailとpasswordの入力

```php:ターミナル
Enter your Heroku credentials:
Email: ~~~~~@example.com  (herokuに登録したアドレス打ってください)
Password: **********  (herokuに登録したパスワード打ってください)
Logged in as ~~~~~@example.com
```
無事、ログインしたら、以下のコマンドを打ってください。
このコマンドはherokuとアプリを紐づけるコマンドなので、最初の一回だけで大丈夫です。

```php:ターミナル
$heroku create 任意の名前 (「任意の名前」に入力する文字列はアプリのurlになるものです。記号は使用不可)
```
「Name is already taken...」というエラーが表示されたら、残念ながらそのアプリ名は他の方にurlを使われているので名前を変更してもう一度createしてみましょう。

### herokuのDB設定
heroku上でMysqlを使うにはクレジットカードの登録が必要です。
といっても無料プランでの登録なので料金はかかりませんので安心してください。
クレジットカードの登録はherokuのアカウントから行います。
↓
[https://signup.heroku.com/login](https://signup.heroku.com/login)


カードを登録したら、下記のコマンドを入力します。

```php:ターミナル
$ heroku addons:create cleardb:ignite
```
もしカード登録前に上のコマンドをうった場合はこのようなエラーが返って来ます。

```PHP:ターミナル
▸    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アプリの環境変数設定
以下のコマンドで、ClearDBのURLが確認できます。

```php:ターミナル
$ heroku config
=== <アプリの名前> Config Vars
CLEARDB_DATABASE_URL: mysql://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
```
上記コマンドで表示されたそれぞれの値を変数に設定しましょう。

```php:ターミナル
$ heroku config:add DB_NAME='<データベース名>'

$ heroku config:add DB_USERNAME='<ユーザー名>'

$ heroku config:add DB_PASSWORD='<パスワード>'

$ heroku config:add DB_HOSTNAME='<ホスト名>'

$ heroku config:add DB_PORT='3306'

$ heroku config:add DATABASE_URL='mysql2://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true'
```
最後のDATABASE_URLは先程のGemfileで'mysql2'をインストールしているので、mysql2://で始める必要があります。
設定が終わったら以下のコマンドで確認しましょう。

```php:ターミナル
$ heroku config

# 実行結果
=== <アプリの名前> Config Vars
CLEARDB_DATABASE_URL: mysql://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DATABASE_URL:         mysql2://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DB_HOSTNAME:          <ホスト名>
DB_NAME:              <データベース名>
DB_PASSWORD:          <パスワード>
DB_PORT:              3306
DB_USERNAME:          <ユーザー名>
```
ここまでくればもう少しです！

### Herokuへデプロイ
ローカルリポジトリをHerokuへpushします。

```php:ターミナル
$ git push heroku master
```
次に本番環境にマイグレーションします。

```php:ターミナル
$ heroku run rails db:migrate
```
この時、Rubyのバージョンによっては、RubyのバージョンとHerokuのStack(HerokuのOSイメージ)のバージョンが合わずにエラーが出ることがあります。（2.6.5ではエラー出ました）

なのでRubyのバージョンを新しくするか、以下のコマンドでstackのバージョンをHeroku-16からHeroku-18に変更する必要があります。（2021年2月現在は20がデフォルトのようです。）
[(Heroku公式ドキュメント)](https://devcenter.heroku.com/changelog-items/2005)

```php:ターミナル
$ heroku stack:set heroku-18 # herokuのバージョン変更
```
エラーが出たらもう一度、`$ heroku run rails db:migrate`してみましょう。

以下のコマンドを実行すると、ブラウザでアプリケーションが開きます。

```php:ターミナル
$ heroku open
```
これでブラウザに表示されるはずです！

## 6. おまけ
### アプリケーションの情報を確認したいときのコマンド

```php:ターミナル
$ heroku apps:info
```
ここで出てくるWeb URLが完成したURLがブラウザに打ち込むURLです。

### herokuでデプロイしたDBにSequelProで接続する
heroku configのコマンドで接続情報が出てくるので確認

```php:ターミナル
$ heroku config

# 実行結果
=== <アプリの名前> Config Vars
CLEARDB_DATABASE_URL: mysql://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DATABASE_URL:         mysql2://<ユーザー名>:<パスワード>@<ホスト名>/<データベース名>?reconnect=true
DB_HOSTNAME:          <ホスト名>
DB_NAME:              <データベース名>
DB_PASSWORD:          <パスワード>
DB_PORT:              3306
DB_USERNAME:          <ユーザー名>
```
上の情報を入力しましょう。
![スクリーンショット 2021-02-21 16.10.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/772095/d8aa2e3a-8272-4f95-0424-6506b00bf365.png)

・ポートは空欄でも大丈夫なようですが、一応3306を入力
・標準を選択

# 終わりに
最後まで読んでいただきありがとうございました！
お役に立てれば幸いです。。

# 参考記事
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39#gemfile%E3%81%AE%E8%A8%AD%E5%AE%9A)
[Herokuへのデプロイ方法【Heroku+Rails+MySQL】](https://qiita.com/murakami-mm/items/9587e21fc0ed57c803d0)
[mysqlを使ったRailsアプリをHerokuにデプロイする流れ](https://qiita.com/shou1012/items/bf55a185920e717f4011)
[Rails4 + MySQL のアプリケーションを Heroku で動かすまで](http://arfyasu.hatenablog.com/entry/2016/01/11/035101)
[Heroku で 'DATABASE_URL' を変更する方法](https://obel.hatenablog.jp/entry/20200316/1584300600)
[herokuでデプロイしたDBにSequelProで接続してみる](https://qiita.com/mami3sansan/items/ecb2c2216be9b1d4f11e)