こんにちは！
私は、作り終わったアプリをいつもHerokuにデプロイするのですが、大抵どっかでつまづいてしまうんですよね。
っていうことで、今日は、Reactでアプリを作った時のHerokuでのデプロイについて、私自身の実体験をもとに備忘録も兼ねてまとめてみます！
1.Heroku(ヘロク)に登録
まずは、以下のサイトに行ってアカウント登録をします。
https://jp.heroku.com/
今回は、登録の仕方の詳細は、端折らせて頂きます。
2.Create New Appする
それでは、引き続きHerokuで作業していきましょう。
下の画像のような、Newというボタンがあるので、クリックして、Create New Appします。
すると、App nameの入力を求められます。お好きな名前を付けてください。(ただし、大文字などいくつか使えない文字や記号もあります。)
もし、この部分を空欄にしてしまっても、Herokuがテキトーに名前を付けてくれるので大丈夫です！
Choose a regionはUnited StatesのままでOKです。
フォームの最後にあるCreate appボタンを押せば、これでアプリケーションをデプロイするための最初の準備ができました！
3.アプリを作成する
ここでは、Reactを使って作りたいアプリを1つ作ってください。
むしろHello Worldでレンダリングするだけのページでも構いません。
作り方の解説は端折ります。
4.さぁ、デプロイしてみましょう！
おかえりなさい！いよいよデプロイです！
ターミナルを開いて、以下のコマンドを入力してください。
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
少し時間がかかりますが、下にズラーと文字とか並びますが気長に待ちましょう。
5.ここから注意！エラー発生!?
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の文章は出てこない人もいると思います。
パッケージやライブラリの使用状況による！*/
6.A module may be missing from 'dependencies' in package.jsonに対する解決策
エディタで、package.jsonを開き、上から4番目くらいにある"dependencies"という項目を見てください。そこできちんと使っているライブラリやパッケージの名前とバージョンの漏れがないか確認しましょう。このエラーが出ている人は、漏れがある可能性があるので、使っているのに書いていないパッケージなどがあれば、漏れなく追加しましょう。
7.Node version not specified in package.jsonに対する解決策
「ログ」の上の方を見てみると、lock fileをアップデートしてくださいって出てくるので、以下のコマンドを実行します。
npm install
忘れないうちに、ブラウザ上のHerokuのSettingsページにある、Buildpacksに次のBuildpackを追加しておきます。
- heroku/nodejs
- https://github.com/mars/create-react-app-buildpack
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"
},
以上です！！
長くなりましたが、お読み頂きありがとうございました！
不備等あれば、コメントでお知らせください！