クソWebアプリ制作日記　その７

これまで

Express(vue-cli-plugin-express)からHeroku PostgresのDBに接続ができず、超苦戦。八方塞がりになる。

そして、昨日は個人的に一番好きな声優の藤原啓治さんが亡くなったというニュースを見て、ショックで業務終了後に気絶(寝落ち)してしまう。素晴らしい声優だったのに、本当に残念。ご冥福をお祈りします。
エウレカの映画、早く作らないからどんどん取り返しつかなくなってるじゃないか。

今日は金曜日だから、気絶するまで酒を飲まなければいけないので時間が無い。明日から本気出す！
さて、八方塞がりになってしまっている中、今日は何から手を付けようか。

APIサーバとアプリの連携

立ち止まっていてもしょうがないので、DB接続は後回しで進めることにする。

Vue-CLI3 ベースのアプリ開発で JSON API が使える express server を使う - Qiita

この記事を参考に、APIサーバとの連携を試みる。
ローカル環境では、記事の通りで問題なく連携できた。

ここで一つの疑問が生じる。 webサーバは

npm run strat

で起動し、ローカル環境ではlocalhost:8080で接続できる。
APIサーバは、

npm run express

で起動し、ローカル環境ではlocalhost:3000で接続できる。

記事の通りに、「npm run build」でパッケージングしたあとは、

npm run express:run

で起動すると、localhost:3000に接続するとアプリが表示される。

Herokuにアップした際は、(動作を見る限り)「npm run strat」が実行されているようだが、「npm run express:run」を実行するには、どうすればよいのだろうか。
実行コマンドはどこで設定するのだろうか。

f:id:majigomi:20200417210106p:plain
ここだと思うのだけれど、編集方法がわからない。
そもそも、よく分からず使用していたけど、「Dynos」とは何なのか？

Dynoとは？

アプリケーションを実行するための実行環境。仮想のLinuxコンテナ(のようなもの)。
詳細はやはり公式リファレンス参照。
Dynos and the Dyno Manager | Heroku Dev Center

起動時にはprocfileファイルが実行されるようだ。
プロジェクトの直下に「procfile」ファイルを作成して、「npm run express:run」を記載してみる。Gitにcommitしてpush。デプロイ完了後に接続してみる。
・・・だめだ。ログを見る限り、APIサーバへのレスポンスは正常になっているが、応答結果が画面に表示されない。

2020-04-17T12:33:27.888858+00:00 heroku[router]: at=info method=GET path="/gomi" host=sample-pj.herokuapp.com request_id=ed876c23-5c37-4271-b46e-33f2793b051f fwd="60.126.33.73" dyno=web.1 connect=0ms service=6ms status=304 bytes=173 protocol=https

そもそも「procfile」ファイルが効いていない気がする。
試しに、scripts.startの内容をscripts.express:runの内容に書き換えてみる。

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "express": "vue-cli-service express:watch",
    "express:run": "vue-cli-service express:run",
    "start": "vue-cli-service express:run"
  },

f:id:majigomi:20200417214719p:plain
うまく連携できた！(※morimoriがAPIサーバからの応答を表示している部分。)

ということは、やはり作成したprocfileファイルは効いていないようだ。
うーん。難しい。今日はここまで。
課題が山積み。。土日でアプリ開発まで進められるのか・・・。DB連携は切り捨てないとダメかも。