[初心者向け]herokuをデプロイしよう

herokuとは
-
開発したWEBアプリケーションを10分程度で全世界に公開することができ、そのままサービスを本格的に運用することも可能なホスティングサービスの事を指します。

実行と流れ
-
まず前提としてデプロイしたいアプリが作成済み、GitHubにアカウント登録済み、GitHubにリポジトリを作成済みという前提でお話しして行きます。今回はrailsで作成したアプリをデプロイしていきます。
流れとしては以下になります。
<h4>herokuアカウント作成→Heroku Toolbelt (CLI)のインストール→デプロイ</h4>


1.アカウント作成
-
herokuに登録してアカウントを作成
(1)herokuの公式サイトにアクセス
sign upボタンを押す

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/1e785347-e9cd-fc00-48e3-16152bd322b3.png)

(2)下記の赤枠の部分を入力
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/012da4ab-00c0-afbd-e50e-2586df84a7d8.png)

(3)下記のページが出れば成功
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/0af1a970-fdc9-e3d0-9489-0b113087fd45.png)

その後メールが届くと思うので、メールからリンクをクリックしてアクセス。

(4)リンク先でパスワードを決定する。下記の画像の通り入力

![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/1f03a7da-95a6-6c6c-a4ee-7f06f4c34307.png)

(5)下の画像のページに遷移するので、画像の通りクリック。
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/575cbe9c-8492-5122-0dfb-b11be09c5ceb.png)

下記のページに遷移する。
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/7922e9b5-f32b-1558-4602-21bc7d95948f.png)

以上で、会員登録は終了。

2 Heroku Toolbelt (CLI)のインストール
-
(1)下記のボタンを押し、ソフトをダウンロード
以下のリンクにアクセス
https://devcenter.heroku.com/articles/heroku-cli
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/0dac7b7e-2c41-a822-94cf-ec8bcb610ee0.png)
mac版をインストールして解凍する


(2)下記の指示通りに、インストールを完了させる
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/5183d2dd-e9e7-88d7-36e9-c2a7b8566380.png)
(3)下記の画像が出てきたら、続けるを押す
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/fa14584f-ef23-0917-eef6-549b546fae98.png)
以下も同様に続けるを押す
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/3671f5fa-9eb7-7f42-b712-4c1190a5dbec.png)
(4)インストールを押す
![スクリーンショット 2020-04-10 20.03.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/811dc4e1-47ab-ee93-5535-7390c47c9a91.png)
(5)PCのパスワードを入力する
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/deb93324-4b4b-de22-a54e-ff6b3e0d30de.png)
(6)下記の画像が出たら、インストールは終了
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/576859/0dd98e19-da9c-149e-e1b8-3a45724bb57d.png)
3 Heorkuにターミナルからログインしてサーバーを設定しよう
-

```!!!
#デプロイしたいアプリのディレクトリパスに移動

$ cd [移動したいディレクトリのパス]

#herokuにログイン。

$ heroku login 
```
注意点として事前にローカルでデプロイしたいアプリは全てコミットしてプッシュしておく必要がある。

```!!!

git add .
git commit -m "コミット"
git push origin master  //masterを更新

```

そのあとheroku create サーバーの名前　という構成でターミナルにタイプすれば
サーバーの構築をすることができる。

```!!!
#サーバー名は例

$ heroku create ○○
```


上記サーバーの名前がHerokuのトップ画面より確認できたら、
それではいよいよデプロイする！

デプロイとリリース後の確認
-
```!!!
#herokuのサーバに、アップロードするためのコマンド

$ git push heroku master

#今回はPostgresqlを使ったアプリを本番リリース。DB設定

$ heroku run rake db:migrate
```
もし以下のエラーが出たならば
-
```!!!
remote:  !
remote:  !     Precompiling assets failed.
remote:  !


```
アセットのプリコンパイルの設定でエラーが起こっていることを疑ってみて下さい。
プリコンパイルとは
-

```!!!
アセットを事前に
1.コンパイル
2.統合
3.圧縮
4.ダイジェスト付与
する行為のことを指します。コンパイルというのはSASSやVue.js、Reactなどで書かれたコードを素のCSSやJavaScriptに変換する処理です。
Rails Ver.5だとアセットコンプラインという機能がプリコンパイルをやっていて、sporockets-railsというgemで実装されています。

```
エラー解消法
-
```!!!

config/environments/production.rbの

config.assets.js_compressor = :uglifier
をコメントアウトする。

その後、
$ git push heroku master
を実行するとエラーが解消されると思います。

ターミナル上で以下のような記述があると思うので「(例)https://○○.herokuapp.com」がデプロイ後のURLになります。
remote:        https://○○.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/○○.git

エラー解消後は$ heroku run rake db:migrateを忘れずに実行

```