Herokuにデプロイをする時に詰まった箇所について

# はじめに
RailsアプリケーションをHerokuにデプロイする際、自分が詰まった箇所について説明します。
また、herokuへのデプロイ方法は、最終行に記載した＜4.デプロイ手順の参考記事＞を参考にデプロイをしました。


それぞれのバージョンは以下の通りです。
MacOS 10.14.5
Ruby 2.5.1p57
Rails 5.2.3
heroku/7.26.2 darwin-x64 node-v11.14.0

画像
https://gyazo.com/847aa4661ae3b2f278ae2328d33d32dd


# 1.Herokuにログインする時
### ①現象
以下のように、herokuにログインするコマンドを実行しても、

```
$heroku login 
```
メールアドレスおよびパスワードを入力する画面いならない(おそらく、このような方法でログインすることもできるのだろう)。

動画(見えづらくて申し訳ありません(＞人＜;))
https://gyazo.com/e3873154a60890c7fa5aab07146c962c

### ②解決方法

以下のようなコマンドを入力すれば、解決できます。

```
$ heroku login --interactive
```
動画
https://gyazo.com/4829936b6a6626a7ea229383eecbeae9

### ③参考記事
https://teratail.com/questions/158638

# 2.Railsの設定
## (1).Gemfileの設定

本番環境用にGemfileの設定しておかないと、以下のようなエラーが発生します。
(今回は、自分がアプリで使用したdeviseおよびjquery-railsの２つのgemを例にあげます。)

### ①エラー現象
以下のような画面が表示され、デプロイが失敗する。

deviseの場合、

```
remote:        Caused by:
remote:        NameError: uninitialized constant Devise
```
画像
https://gyazo.com/eb6608754ad0937c550eb45acdf848b5

jquery-railsの場合、

```
remote:        rake aborted!
remote:        Sprockets::FileNotFound: couldn't find file 'jquery' with type 'application/javascript'
```
画像
https://gyazo.com/71cc267fe306d82fdf6e65df2b2288a1

### ②解決方法
Gemfileの一番下に、以下のような設定をすると解決します(deviseおよびjquery-rails)。

```Gemfile
group :development, :production, :test do
  gem 'devise'
  gem 'jquery-rails'
end
```

画像
https://gyazo.com/625adb044cecaff749c60f4f77fb317a

## (2).テンプレートリテラル記法を用いる場合のproduction.rbの設定

### ①エラー現象
以下のようなエラー画面が表示され、デプロイが失敗する。

```
remote:        rake aborted!
remote:        Uglifier::Error: Unexpected character '`'
```

下の方に赤文字で以下のような表示がされる。


```
remote:  !     Precompiling assets failed.
```

全体の画像
https://gyazo.com/37b8b091eda6cec2c0514b54dea5a5c5

### ②解決方法

config/environments/production.rbにある以下のコードをコメントアウトする。

```
# config.assets.js_compressor = :uglifier
```
自分の場合、production.rbの26行目に書いてありました。
https://gyazo.com/b66d6c1a13d7b22a5105f88e1303f40d

そもそも、テンプレートリテラル記法とは？
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/template_strings


# 3.デプロイ成功後
##(1).デプロイは成功後にアクセスするURLについて
### ①現象
herokuへのデプロイが成功すると、以下のような長いログの画面が表示される
https://gyazo.com/2d2e4ea40e66373aa6b62cb7df7f15cc
(画面が青い理由は、どこからどこまでがデプロイのログなのかを、自分で判断するためです。見えづらくて申し訳ありません(＞人＜;))。


そして、以下のような画面が表示される。

```
$ git push heroku master
　・
　・
　・
remote: -----> Compressing...
remote:        Done: 36.9M
remote: -----> Launching...
remote:        Released v6
remote:        https://enigmatic-reaches-21915.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/enigmatic-reaches-21915.git
 * [new branch]      master -> master
```
そして、同時にherokuへのURLが生成されます。

```
remote:        Released v6
remote:        https://enigmatic-reaches-21915.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/enigmatic-reaches-21915.git
 * [new branch]      master -> master
```

### ②解決方法
アクセスできるURLは以下のような表示がされている方にアクセスすると解決します。

```
remote:        https://＜個別のアプリの名前＞.herokuapp.com/ deployed to Heroku
```

※自分は、今回デプロイするときのアプリの名前を指定してなかったので、

```
enigmatic-reaches-21915
```
という名前になっています。



### ③参考記事
https://qiita.com/kodai_0122/items/a1f01b18bb3e0ddde62a

##(2).デプロイは成功し、正しいURLにアクセスしたが、エラー画面が表示される問題

### ①エラー現象
正しいURLにアクセスした時、以下のようなエラー画面が表示される。

```
"We're sorry, but something went wrong."
```

画像
https://gyazo.com/3a6a0c733d87efe0866c2e3f8d585a0f

### ②解決方法
デプロイをした後に、本番環境においてマイグレーションを行えば、解決できます。

### ③参考記事
https://i.gyazo.com/3a6a0c733d87efe0866c2e3f8d585a0f.png
https://qiita.com/KazuhoE/items/06d13ccd4c72fd31c5d9
https://teratail.com/questions/124183


# 4.デプロイ手順の参考記事
・https://qiita.com/NaokiIshimura/items/eee473675d624a17310f
・https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39
・https://sweets-engineer.com/heroku/#heroku
・https://qiita.com/fuwamaki/items/f7752eb7a2727660239f