はじめに
今回初めてHerokuにアプリをデプロイしました。デプロイ記事はネット上にいくつもありますが、自分なりの作業手順、つまづいた点などを記述していきます。
アプリ
POSTしたデータをDBに格納するだけのシンプルなアプリです
https://storedatainmysql.herokuapp.com/
現在アプリの都合でいったん削除しています
仕様
- Node.js
- Express
- ejs
- body-parser
- mysql
環境
- PC:Macbook Pro
- OS:MacOS Mojave Ver10.14.4
- エディタ: Visual Studio Code
- MySQLDB: 今回はherokuのアドオン
ClearDBを使用します
前提条件
- Herokuに登録済み
- Herokuにクレジットカード登録済み（登録しないとアドオンが使用できません）
- Herokuインストール済み
- HerokuとCLIを紐づけている
- Node.jsインストール済み
アプリをherokuにデプロイする
CLIでの操作
-
package.json作成
npm init -
gitレポジトリ作成
git init -
CLIからherokuにアプリを追加する
heroku create [アプリ名]
アプリ名は任意なので、書かない場合はherokuがランダムで生成してくれます。 -
herokuをリモートレポジトリに紐付ける
heroku git:remote -a [アプリ名]
[アプリ名]の欄は先ほど追加したアプリ名に記述してください。わからない場合は、herokuのweb上からコードをコピペしてください。
-
とりあえずデプロイ
初めてのデプロイで不安だったので、Expressのhello worldを使用して実際に起動するか確認してみましたgit add .git commit -m 'コミット名'git push heroku master
ここまでが通常のデプロイ方法です。アプリはherokuのweb上Open Appから開けます。と、ここでアプリが起動しませんでした。
アプリが起動しない(問題点2つ)
解決1: npm startを設定し忘れていた
Node.jsでデプロイした場合、herokuではデフォルトでnpm startから起動するようで、package.jsonでその設定をし忘れていました。
"scripts": {
"start":"node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
しかし、それでもアプリは起動しませんでした。
解決2: ポート番号の設定方法を間違えていた。
待ち受けポートはHeroku側で設定されるので、process.env.PORTとコードに記述しなければいけません。本当にそうなのか固定ポートで試してみましたが、当たり前ですがやはり必要でした。
app.listen(process.env.PORT || 5000)
このコードは環境変数と言い、これで実行時にサーバが指定したポートを受け取れるようです。||はローカルで実行した際に使用されるポートです。
Node.jsのprocess.env.PORTとは何ですか？ - コードログ
これでアプリが正常に実行されるようになりました。
MySQLを使用できるようにする
ClearDBをインストール
CLIから今回使用するアドオンであるClearDBをインストールします。
heroku addons:add cleardb
DBの情報を確認する
インストール後、自動でDBが作成されるので、情報を確認します。
heroku config | grep CLEARDB_DATABASE_URL
すると、以下のようなデータが出てきます
CLEARDB_DATABASE_URL: mysql://~~
このデータは以下のようになっています。
CLEARDB_DATABASE_URL: mysql://ユーザ名:パスワード@サーバ名/データベース?reconnect=true
DBをセットする。
確認できたら、mysql://~~をコピーし、セットします
heroku config:set DATABASE_URL='mysql://~~'
これで、サーバーと接続することができました。後は個人的に先ほどのDBの情報を元にNodeとDBのコネクションを作成しました。
Node:コネクションの作成
const connection = mysql.createConnection({
host: "サーバ名",
user: "ユーザー名",
password: "パスワード",
database: "データベース"
});
アプリが完成したらデプロイ
完成したら、再度herokuにデプロイします。
git push heroku master
しかし、アプリが起動しませんでした。
アプリがまたまた起動しない(問題点1つ)
エラーをlogで確認する
もし、アプリが起動しない場合、画面にheroku log --tailと出てくるはずなので、CLIに打ち込んでエラーを確認してみます。すると、
at=error code=H10 desc="App crashed" method=POST path="/register" host= ~~ request_id= ~~ fwd="~~" dyno= connect= service= status=503 bytes= protocol=https
このようなログを発見しました、ここで見たのはcode=H10 ``status=503の２つです、この二つのコードを検索してみたら、どうやら接続ができずにタイムアウトしたようです。
解決: Webdynoを再起動してみる。
HerokuでApplicationErrorが発生したときの対処法 - Qiita
こちらの記事を参考に、以下のコードを実行しました。
heroku restart web.1 --app application_name
すると、アプリが起動するようになりました。
終わりに
初めてのデプロイでしたが、初心者でも半日あれば問題解決してデプロイできるくらいにHerokuは簡単でした。これからも簡単なアプリであればHerokuを使っていこうと思います。