【初心者向け】Herokuにアプリをあげるまで（Rails）

#始めに

「いざHerokuにアプリをあげようとしたらうまくいかない…」
という方向けに書きますので、Railsアプリの作成については省略します。

アプリを上げるまで、詳しくはこちらで。
[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39)

#基本的な流れ

```
$ git add -A
$ git commit -m
$ git push heroku master
```

```
$ heroku run rake db:migrate
$ heroku open
```

#Herokuへpushする前の確認事項

##注意点その①　Gemfile（環境によって使用DB変更）

開発環境 `sqlite3`

```Gemfile
group :development, :test do
  .
  .
  gem 'sqlite3'
  .
  .
end
```
本番環境　`pg(postgreSQL)`

```Gemfile
group :production do
  .
  .
  gem 'pg'
  .
  .
end
```
本番環境以外の設定を適用
（実行すると、以降は本番環境以外のgemをインストールしてくれるように変更）

```
$ bundle install --without production
```

##注意点その②　config/datebase.yml

```config/database.yml
production:
  <<: *default
  adapter: postgresql
  encoding: unicode
  pool: 5
```

↑　※半角スペース２個分の空白を必ずつくる

##注意点その③　config/environments/production.rb

```config/environments/production.rb
config.assets.compile = false
```
↓　`false`→`true`に変更

```config/environments/production.rb
config.assets.compile = true
```

Railsは本番環境の画像表示がデフォルトでオフになってます。

`assets/...`のフォルダから動的にコンパイルしながらページを読み込みます。


##注意点その④　bin/...

```
#!/usr/bin/env ruby 2.3.1
```

↓ バージョン指定を削除

```
#!/usr/bin/env ruby
```

ファイル全て(`bundle`,`rails`,`rake`,`setup`,`spring`, `update`,`yarn`)を確認して、あれば消去。
（無い場合はスルー）

#大体これで通るようになる

上の４つを修正後、

```
$ heroku run rake db:migrate
```
で反映させて、

```
$ heroku open
```
で出てくる「`https://〇〇〇（アプリ名）.herokuapp.com/`」を開けば無事完了です。


#番外編

無事herokuへpush出来たものの、うまく開かなかったり、レイアウトがおかしかったり、画像だけが表示されなかったりすることがあります。

経験したものと、その解決策を書いていきます。
（順次書き足していきます。）

##画像が表示されない
※4/10編集

pushして機能も問題なく動くけど、**トップページやユーザーアイコン、投稿画像の写真が表示されませんでした。**

`$ heroku open`してみると、

```
$ heroku open

 ▸    Error opening web browser.
 ▸    Error: Exited with code 3
 ▸    
 ▸    Manually visit https://〇〇〇.herokuapp.com/ in your browser.
```
とブラウザにエラーが。

試しに`$ heroku run rake assets:precompile`をしてみると、

```
$ heroku run rake assets:precompile

Running rake assets:precompile on ⬢ 〇〇〇... up, run.4535 (Free)
Yarn executable was not detected in the system.
Download Yarn at https://yarnpkg.com/en/docs/install
I, [2019-03-28T12:09:50.398320 #4]  INFO -- : Writing /app/public/assets/background_image-4c406010e1a1a554a1516aa47c2775b910d5f74ebbc726adab18b2c4318332b8.jpg
I, [2019-03-28T12:09:50.400678 #4]  INFO -- : Writing /app/public/assets/default_image-0623224cb799b383943847c9c18d6869f69093664276a7285dcd97c83ef0d89f.jpg
I, [2019-03-28T12:09:54.506385 #4]  INFO -- : Writing /app/public/assets/application-12c38dbb5cd42f3823565c5b3235458657f3638d129e58caece32a1929edfffc.js
I, [2019-03-28T12:09:54.506558 #4]  INFO -- : Writing /app/public/assets/application-12c38dbb5cd42f3823565c5b3235458657f3638d129e58caece32a1929edfffc.js.gz
I, [2019-03-28T12:10:04.107958 #4]  INFO -- : Writing /app/public/assets/application-5433e2c0e48fb845db4c2a29699ce6c07dc1d29c9146b0618c0115ae6690e8d2.css
I, [2019-03-28T12:10:04.108258 #4]  INFO -- : Writing /app/public/assets/application-5433e2c0e48fb845db4c2a29699ce6c07dc1d29c9146b0618c0115ae6690e8d2.css.gz
```
と、`Yarn`をダウンロードしてこいと言われますので、`npm`を経由して**`$ npm install yarn -g`**で`Yarn`をインストールします。

```
$ npm install yarn -g

/home/ec2-user/.nvm/versions/node/v8.0.0/bin/yarn -> /home/ec2-user/.nvm/versions/node/v8.0.0/lib/node_modules/yarn/bin/yarn.js
/home/ec2-user/.nvm/versions/node/v8.0.0/bin/yarnpkg -> /home/ec2-user/.nvm/versions/node/v8.0.0/lib/node_modules/yarn/bin/yarn.js
added 1 package in 0.946s


   ╭─────────────────────────────────────╮
   │                                     │
   │   Update available 5.0.0 → 6.9.0    │
   │     Run npm i -g npm to update      │
   │                                     │
   ╰─────────────────────────────────────╯

```
これで無事ダウンロード。

`$ git add`より順に行い、無事`git push heroku`までできれば成功です。

参考
[Herokuへデプロイ時に「assets precompile error」$ npm install yarn で対処]
(https://remonote.jp/heroku-assets-precompile-npm-yarn)

##CSSが表示されない
※4/10編集

**エラー表示も特になく普通に動くけど、全て（一部）のCSSだけがなぜか表示されない**、という場合。

結果から言うと、
**`public/assets`以下のファイルを全て削除する**ことで、HerokuでCSSが動くようになります。

railsは自動でプリコンパイル(js・cssを一つのファイルにまとめ、アクセス回数を減らす)してくれます。
本番環境とローカルにはこのプリコンパイルの違いがあるので、「ローカルで動いてても本番環境で動かない」というのはこのためでした。

上記後、
`$ git add`〜`heroku run rails db:migrate`まですれば成功です。

参考
[Heroku でcssが突然読み込まれなくなったので、改善方法を知りたい。]
(https://teratail.com/questions/86473)




##参考

・[【初心者向け】railsアプリをherokuを使って確実にデプロイする方法【決定版】](https://qiita.com/kazukimatsumoto/items/a0daa7281a3948701c39)
・[Herokuで画像が表示されなかった時の解決法](https://qiita.com/tsumichan/items/4daf7355eb6c4f947912)
・[Herokuへデプロイ時に「assets precompile error」$ npm install yarn で対処]
(https://remonote.jp/heroku-assets-precompile-npm-yarn)
・[Heroku でcssが突然読み込まれなくなったので、改善方法を知りたい。]
(https://teratail.com/questions/86473)