#はじめに

portfolioが完成したのでHerokuにデプロイしたのですが、application errorが発生。
どのように対応したのか、備忘録として残します。

https://blog.cloud-acct.com/posts/u-docker-rails-nuxtjs-heroku/
こちらの記事を参考に進めていきましたが、front側でerrorが発生。

#まずはエラーコードを見てみる

$ heroku logs --tail

2021-09-18T08:01:57.217293+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1137:30)
2021-09-18T08:01:57.382226+00:00 heroku[web.1]: Process exited with status 1
2021-09-18T08:01:57.496340+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-18T08:01:57.500557+00:00 heroku[web.1]: State changed from crashed to starting
2021-09-18T08:02:11.742573+00:00 heroku[web.1]: Starting process with command /bin/sh -c npm\ run\ start
2021-09-18T08:02:13.028346+00:00 app[web.1]: TypeError: Class extends value undefined is not a constructor or null
2021-09-18T08:02:13.028376+00:00 app[web.1]: at Object.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/socks-proxy-agent/dist/agent.js:114:44)
2021-09-18T08:02:13.028376+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1137:30)
2021-09-18T08:02:13.028377+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
2021-09-18T08:02:13.028377+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:985:32)
2021-09-18T08:02:13.028377+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:878:14)
2021-09-18T08:02:13.028377+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:1025:19)
2021-09-18T08:02:13.028378+00:00 app[web.1]: at require (internal/modules/cjs/helpers.js:72:18)
2021-09-18T08:02:13.028378+00:00 app[web.1]: at Object.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/socks-proxy-agent/dist/index.js:5:33)
2021-09-18T08:02:13.028378+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1137:30)
2021-09-18T08:02:13.028379+00:00 app[web.1]: at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
2021-09-18T08:02:13.028379+00:00 app[web.1]: at Module.load (internal/modules/cjs/loader.js:985:32)
2021-09-18T08:02:13.028379+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:878:14)
2021-09-18T08:02:13.028380+00:00 app[web.1]: at Module.require (internal/modules/cjs/loader.js:1025:19)
2021-09-18T08:02:13.028380+00:00 app[web.1]: at require (internal/modules/cjs/helpers.js:72:18)
2021-09-18T08:02:13.028380+00:00 app[web.1]: at Object.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/make-fetch-happen/lib/agent.js:161:25)
2021-09-18T08:02:13.028380+00:00 app[web.1]: at Module._compile (internal/modules/cjs/loader.js:1137:30)
2021-09-18T08:02:13.215055+00:00 heroku[web.1]: Process exited with status 1
2021-09-18T08:02:13.267055+00:00 heroku[web.1]: State changed from starting to crashed
2021-09-18T08:02:15.414235+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=todonuxt-front.herokuapp.com request_id=0241cf44-74fe-431a-a258-f56fe395c195 fwd="103.5.140.166" dyno= connect= service= status=503 bytes= protocol=https

#herokuを再起動
次に、https://qiita.com/Oakbow/items/1565922ddcdea0ce9ab5　
の記事で紹介されていたherokuの再起動コマンド

heroku restart --app application_name
や

heroku restart web.1 --app application_name
を試してみました。

解決できず、、、

#Googleで検索
application error10 heroku nuxt.js と検索すると

こちらの記事が出てきたので

heroku config:set NPM_CONFIG_PRODUCTION=false
heroku config:set HOST=0.0.0.0
heroku config:set NODE_ENV=production

こちらを打ち込んでみたが解決できず、、、

他にnpmを削除して再度インストールしたりしましたが解決できず心折れかけていました。

#エラーログを見てみる

原因を全然掴むことができなかったので一度エラーログをしっかり読んでみることに

ログにあったこちらのコマンドを打ってみることに

front $ /bin/sh -c npm\ run\ start
front_1 | ERROR Failed to compile with 5 errors
front_1 |
front_1 | These dependencies were not found:
front_1 |
front_1 | nuxt_plugin_axios_f766743c in ./.nuxt/index.js
front_1 | nuxt_plugin_moment_13f787f6 in ./.nuxt/index.js
front_1 | nuxt_plugin_plugin_787cc8cc in ./.nuxt/index.js
front_1 | nuxt_plugin_plugin_93273cc4 in ./.nuxt/index.js
front_1 | * nuxt_plugin_plugin_fe7fe2bc in ./.nuxt/index.js

このようなerrorが発生しており、
仮説として開発環境では動いているが本番環境では動かなくなるのではないかと思いpackage.jsonを確認

package.json

{
  "name": "front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "lint": "vue-cli-service lint",
    "lint:fix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore ."
  },
  "dependencies": {
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/proxy": "^2.1.0",
    "core-js": "^3.9.1",
    "madge": "^5.0.1",
    "nuxt": "^2.13.3",
    "vee-validate": "^3.4.11",
    "vue-ctk-date-time-picker": "^2.5.0",
    "vue-infinite-loading": "^2.4.5"
  },
  "devDependencies": {
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.17.0",
    "jest": "^26.6.3",
    "vue-jest": "^3.0.4"
  }
}

まずdependencies 、devDependenciesの違いがわからずググることに

devDependenciesには、開発に必要なパッケージのみを書きます。

なるほど。

#解決

moment vuetify eslint-moduleをdevDependenciesからdependenciesに変更

package.json

{
  "name": "front",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "test": "jest",
    "lint": "vue-cli-service lint",
    "lint:fix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .",
    "heroku-postbuild": "npm run build"
  },
  "dependencies": {
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/auth": "^4.9.1",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/moment": "^1.6.1",
    "@nuxtjs/vuetify": "^1.11.3",
    "axios": "^0.21.4",
    "core-js": "^3.9.1",
    "nuxt": "^2.13.3",
    "vee-validate": "^3.4.11",
    "vue-ctk-date-time-picker": "^2.5.0",
    "vue-infinite-loading": "^2.4.5"
  },
  "devDependencies": {
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-vue": "^7.17.0",
    "jest": "^26.6.3",
    "madge": "^5.0.1",
    "vue-jest": "^3.0.4"
  }
}

ようやくerrorが変わったーー
長い長いat=error code=H10 desc="App crashed"から抜けれました

#追記

2019-12-06T00:30:46.302146+00:00 heroku[router]: at=error code=H12 desc="Request timeout" method=GET path="/" host=test-react-admin.herokuapp.com request_id=b7cafb3a-311c-4ef2-bd61-cb1f863e69ca fwd="216.81.49.130" dyno=web.1 connect=1ms service=30000ms status=503 bytes=0 protocol=https

上記のerrorは

front $ heroku config:set NODE_OPTIONS="--max_old_space_size=2560" --app=アプリ名

こちらで解決しましたー

あとはport番号はHerokuがランダムで送ってくるので

nuxt.config.js

diff --git a/nuxt.config.js b/nuxt.config.js
index 3373f83..548deb1 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -5,7 +5,7 @@ export default {
   ssr: false,

   server: {
-    port: 8080,
+    port: process.env.PORT || 8080,
     host: "0.0.0.0",
   },

portを合わせてあげればfront側が表示されるようになりました。

一週間ほど時間かかってしまった、、、、、

同じerrorで悩んでいる方の解決に少しでもお役に立てれば幸いです。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！