Nuxt.jsで作成したアプリで、作成直後にデプロイしたときは本番環境にアクセスできていたのに、microCMSと連携してからデプロイしたらServer Errorで表示されなくなりました。
エラーログにも詳しいことが書いていなくて、ググるのも難航かなと思ったところで、それっぽい記事を見つけて解決できましたので、同じようなことで悩んでいる方の参考になれば。
エラー内容
デプロイして本番環境を覗きにいくとこんな感じの画面に。
herokuのエラーログを見ると特に詳しくは書いてなさそうでした。
$ heroku logs --tail
2020-08-13T07:07:29.876353+00:00 app[web.1]:
2020-08-13T07:07:29.876361+00:00 app[web.1]: ERROR connect ECONNREFUSED 127.0.0.1:80
2020-08-13T07:07:29.876361+00:00 app[web.1]:
2020-08-13T07:07:29.876362+00:00 app[web.1]: at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)
2020-08-13T07:07:29.876362+00:00 app[web.1]:
2020-08-13T07:07:29.879730+00:00 app[web.1]:
2020-08-13T07:07:29.879731+00:00 app[web.1]: ERROR connect ECONNREFUSED 127.0.0.1:80
2020-08-13T07:07:29.879732+00:00 app[web.1]:
2020-08-13T07:07:29.879732+00:00 app[web.1]: at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1141:16)
2020-08-13T07:07:29.879733+00:00 app[web.1]: 結論、microCMSのAPIを取得するときに.envの設定をしたのですが、その設定をherokuにもしてあげないといけませんでした。
設定済の内容
一度デプロイは成功しているので、Herokuにデプロイするのに必要な設定は事前にしています。
具体的には下記です。
- Herokuへの登録
- Herokuアプリ作成
- Herokuの環境変数（
heroku config）設定 - スクリプト（
heroku-postbuild）の登録
このへんはこちらの記事でも紹介しています。
これから行う設定
環境変数を.envに設定していますので、それをHeroku側にも設定します。
なお、Herokuにはログイン済です。
Procfileを作成する
Nuxtのプロジェクト直下にProcfileを作成して下記を入力します。
Heroku側でコマンドを指定するためのファイルのようです。
web: nuxt startこちらは公式にも書いてあり、最初から設定しておくような雰囲気なのですが、完全に見逃しておりましたｗ
（が、設定しなくても初期構築時はデプロイできていました）
.envファイルの内容を適用させる
環境変数の設定を確認します。コマンドラインで下記のように返ってきたら大丈夫です。
$ heroku config
HOST: 0.0.0.0
NODE_ENV: production
NPM_CONFIG_PRODUCTION: falseもしまだ設定されていなければ下記のように設定します。
$ heroku config:set NPM_CONFIG_PRODUCTION=false
$ heroku config:set HOST=0.0.0.0
$ heroku config:set NODE_ENV=productionでは、.envの内容を設定してきます。
ターミナルからheroku-configをインストールして、.envファイルの環境変数を使えるようにします。
$ heroku plugins:install heroku-config
$ heroku config:pushここまでできたら、.envファイルに書いてある環境変数を一行ずつ登録していきます。私の場合は２つしかなかったのですが、たくさんあると面倒かも。
.envのファイルは下記のようになっているので、
API_KEY='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
このように登録しました。
$ heroku config:set API_KEY='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'二行目、三行目もあれば登録していきましょう。
デプロイする
.envの設定もできたらいよいよデプロイです。
$ git add .
$ git commit -m 'your message'
$ git push heroku masterデプロイが終わったら本番環境にアクセスしてみましょう。