eureka

Nuxt×MicroCMS×HerokuでデプロイしたらServer Errorになる

0

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

こちらは公式にも書いてあり、最初から設定しておくような雰囲気なのですが、完全に見逃しておりましたw
(が、設定しなくても初期構築時はデプロイできていました)

.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ファイルに書いてある環境変数を一行ずつ登録していきます。私の場合は2つしかなかったのですが、たくさんあると面倒かも。

.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

デプロイが終わったら本番環境にアクセスしてみましょう。

参考

0