Reactで作ったアプリをHerokuにデプロイする時にやること！！

こんにちは！
私は、作り終わったアプリをいつもHerokuにデプロイするのですが、大抵どっかでつまづいてしまうんですよね。
っていうことで、今日は、**React**でアプリを作った時のHerokuでのデプロイについて、私自身の実体験をもとに備忘録も兼ねてまとめてみます！

<h1>1.Heroku(ヘロク)に登録</h1>

まずは、以下のサイトに行ってアカウント登録をします。
https://jp.heroku.com/

今回は、登録の仕方の詳細は、端折らせて頂きます。

<h1>2.Create New Appする</h1>

それでは、引き続きHerokuで作業していきましょう。
下の画像のような、Newというボタンがあるので、クリックして、Create New Appします。
<img width="353" alt="スクリーンショット 2020-08-08 15.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/619752/75021c10-c721-af1b-572f-43722254eea1.png">
すると、App nameの入力を求められます。お好きな名前を付けてください。(ただし、大文字などいくつか使えない文字や記号もあります。)
もし、この部分を空欄にしてしまっても、Herokuがテキトーに名前を付けてくれるので大丈夫です！
Choose a regionはUnited StatesのままでOKです。
フォームの最後にあるCreate appボタンを押せば、これでアプリケーションをデプロイするための最初の準備ができました！

<h1>3.アプリを作成する</h1>

ここでは、Reactを使って作りたいアプリを1つ作ってください。
むしろHello Worldでレンダリングするだけのページでも構いません。
作り方の解説は端折ります。

<h1>4.さぁ、デプロイしてみましょう！</h1>

おかえりなさい！いよいよデプロイです！
ターミナルを開いて、以下のコマンドを入力してください。

```
 heroku login 
```
q以外で好きなキーを押すように指示が表示される。好きなキーを押します。
すると、ブラウザが開いて、Log inと書かれたボタンが中央にあるのでクリック。
これで、ターミナルからHerokuへのログインができました。
それでは、作ったアプリを保存してあるフォルダに移動してください。

```
 cd 作ったアプリを保存してあるフォルダ
```

そして以下のコマンドを入力してください。

```
git init
/* Reinitialized existing Git repository inと出てきます。
in以降は、GitHubのリポジトリ名とかになってます。*/

heroku git:remote -a Herokuで登録したまたは与えられたApp name
/* set git remote heroku to っていうのが出てきます。
文字に色ついてたりしますが問題ないです。*/

git add . // addとピリオドの間に半角スペースを忘れない！

git commit -am "make it better"
/*  1 file changed, 2 insertions(+), 1 deletion(-)のような感じで、
変更したファイルの数が出てきます。何も変更していなければ、nothing to commit
って出てきます。*/

git push heroku master
```
少し時間がかかりますが、下にズラーと文字とか並びますが気長に待ちましょう。

<h1>5.ここから注意！エラー発生!?</h1>

Reactで作ったアプリをデプロイする時、git push heroku masterした後にエラーが起こりがちです。

```
! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/xxx.git'
```
上記のエラーが出てくることがあります。(xxxはみなさんのHerokuでのApp nameです。)
ブラウザのHerokuに行って、Overviewページに移動します。そこでBuild faildと赤字で書かれているものが、ページ右半分の一番上に表記されているはずです。その項目の、View build logというリンクをクリックして見てみます。すると、buildで何が起こったのかを調べることができる「ログ」が書かれています。
その「ログ」の最後の方までスクロールしてください。以下のような文章が見つかると思います。

```
Some possible problems:
       
       - Node version not specified in package.json
         https://devcenter.heroku.com/articles/nodejs-support#specifying-a-node-js-version
       
       - A module may be missing from 'dependencies' in package.json
         https://devcenter.heroku.com/articles/troubleshooting-node-deploys#ensure-you-aren-t-relying-on-untracked-dependencies

/* 2つ目の、A moduleの文章は出てこない人もいると思います。
パッケージやライブラリの使用状況による！*/
```

<h1>6.A module may be missing from 'dependencies' in package.jsonに対する解決策

エディタで、package.jsonを開き、上から4番目くらいにある"dependencies"という項目を見てください。そこできちんと使っているライブラリやパッケージの名前とバージョンの漏れがないか確認しましょう。このエラーが出ている人は、漏れがある可能性があるので、使っているのに書いていないパッケージなどがあれば、漏れなく追加しましょう。

<h1>7.Node version not specified in package.jsonに対する解決策

「ログ」の上の方を見てみると、lock fileをアップデートしてくださいって出てくるので、以下のコマンドを実行します。

```
npm install
```

忘れないうちに、ブラウザ上のHerokuのSettingsページにある、Buildpacksに次のBuildpackを追加しておきます。

<ul><li>heroku/nodejs</li>
<li>https://github.com/mars/create-react-app-buildpack</li></ul>

Add buildpackというボタンをクリックして上記の2つを追加します。
heroku/nodejsというBuildpackは選択肢にあります。
2番目のBuildpackは、このようにURL表記で入力欄に入力してください。

上記の工程を終了したら、もう一度、git add .の部分からデプロイに挑戦してみてください。

それでもダメな場合、package.jsonの"scripts"の"start"部分を次のように変更してください。

```
"scripts": {
    "start": "node index.js", // 左のように、node index.jsにする！
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
```

以上です！！
長くなりましたが、お読み頂きありがとうございました！
不備等あれば、コメントでお知らせください！

<h2>参考にさせて頂いた投稿</h2>
[Reactアプリケーションをherokuにデプロイする方法](https://qiita.com/nobu0605/items/355f1e890ad8dff8eb8f)