手元で動作するアプリケーションをHerokuにデプロイしました。

特にデプロイでエラーはなかったと思ったのですが、実際にアクセスすると次のエラーとなりました。

この問題を解決するのHerokuの使い方の基本を学んでいなかったので基本を勉強して解決できましたという低次元の記事になります。

まず、私がやった事ですが、ログを見ろとあるので、デプロイのコマンドを実行したVisual Studio Codeのターミナルで指示に従い次のコマンドを入れてみました。

> heroku logs --tail 

ひたすら似たようなエラーが連続しているだけですね。 これが出ている理由は「Heroku（無料）を寝かさない方法」によるものです。

• エラーの画面に check your logs for details と青字で書いてあるのでそこも見ました。
• status=503 は 503 Service Unavalable でサーバーがリクエストを処理する準備ができていないことを示すようですが、理由はさっぱりわかりません。
• code=H10 は、Heroku Error Codes を見ると、単に H10 – App crashed ということでその理由はわかりません。

コードをいじっては以下のようなコマンドを打ち込むことにより、GitHubにpushして、Herokuにデプロイして、やっぱり駄目を繰り返してしまいました。

> git add .
> git commit -m"console.logを少し削除"
> git push
> git push heroku master

Herokuの使い方をほとんど勉強せずに、Herokuを使っていて、これではgitの履歴を汚しまくりで、拉致があかないと思いました。

そこで、急がば回れで、以下などを勉強しました。

1. Getting Started on Heroku with Node.js | Heroku Dev Center
2. How Heroku Works | Heroku Dev Center
3. The Procfile | Heroku Dev Center
4. Deploying Node.js Apps on Heroku | Heroku Dev Center
5. Heroku Node.js Support | Heroku Dev Center
6. Best Practices for Node.js Development | Heroku Dev Center

• 1ではGitHubからクローンしたNode.jsのサンプルプロジェクトを用いてHerokuの概要を学習できます。
• 2ではHerokuがいかに動作するのかの技術的なざっくりとした説明を得ることができます。
• 3ではアプリを実行するための方法を指定するためのProcfileについて知ることができます。
• 4では既存のNode.jsアプリをHerokuにデプロイする方法について知ることができます。

結局、ここに書くのも馬鹿らしいものも含め、色々とソースコード等に不具合があったのですが、肝に命じて置きたいポイントとして次があります。

• アプリケーションを開発及びデバッグするために、ローカル開発環境がリモート環境と同じ方法で実行されるようにする
  • 環境ファイルを使用するには heroku local -e ./config/dev.env のような感じで指定する
• heroku local を実行することによりローカルで徹底的にテストする
• Herokuへのデプロイの準備
  • Procfileを配置する
  • Node.jsのバージョンを指定する
  • 環境変数をローカルと同じように設定する
  • システムレベルのパッケージに依存していないことを確認する
    • node_modulesフォルダを一旦削除する
    • npm install –production を実行する
    • これで改めてローカルでテストする
• ローカルで十分にデバッグが完了したらHerokuでテストする
  • GitHubにはプッシュせずに git push heroku master でテストをする
  • ログを確認する
  • 別途、ChromeのDev Toolでもログを確認する
• ローカル及びHerokuでの環境変数の取り扱いは要注意でした

これでようやく作りかけのチャットアプリのReact化ができたので、更にReactを勉強し、チャットアプリの機能追加など続けたいと思います。