Nuxt.js How to fix heroku deployment issue?

A

Artem Mikhnevich2021-05-13 20:58:48

Heroku

Artem Mikhnevich, 2021-05-13 20:58:48

Good day, gentlemen, experts and experienced colleagues, help me find the cause or advise ways to solve this problem)
So far I think that the problem is with imports or variables in the configs, or something with the version of the node in the dockerfile.
stack and deployment path: nuxt.js - dockerfile - github actions - heroku
trying to send a repo to heroku in the logs says this:

2021-05-13T17:56:03.759170+00:00 app[web.1]: <--- JS stacktrace --->
2021-05-13T17:56:03.759170+00:00 app[web.1]: 
2021-05-13T17:56:03.759171+00:00 app[web.1]: ==== JS stack trace =========================================
2021-05-13T17:56:03.759171+00:00 app[web.1]: 
2021-05-13T17:56:03.759172+00:00 app[web.1]:     0: ExitFrame [pc: 0x1376519]
2021-05-13T17:56:03.759172+00:00 app[web.1]: Security context: 0x3fc7aa2c08a1 <JSObject>
2021-05-13T17:56:03.759173+00:00 app[web.1]:     1: startNode [0x1e055403b051] [/usr/src/app/node_modules/jiti/dist/babel.js:~2144] [pc=0x28e10bdf4903](this=0x19aa45de9dc1 <JSObject>)
2021-05-13T17:56:03.759179+00:00 app[web.1]:     2: parsePropertyDefinition [0x1e055403a909] [/usr/src/app/node_modules/jiti/dist/babel.js:2144] [bytecode=0x356cb9f3cdb9 offset=141](this=0x19aa45de9dc1 <JSObject>,0x13024b7006e1 <false>,0x21d5cee46fe9 <Ce map = 0x3bbba939...
2021-05-13T17:56:03.759179+00:00 app[web.1]: 
2021-05-13T17:56:03.759180+00:00 app[web.1]: FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
2021-05-13T17:56:03.759357+00:00 app[web.1]: 
2021-05-13T17:56:03.768863+00:00 app[web.1]: Writing Node.js report to file: report.20210513.175603.23.0.001.json
2021-05-13T17:56:03.768864+00:00 app[web.1]: Node.js report completed
2021-05-13T17:56:03.769319+00:00 app[web.1]:  1: 0x9dab80 node::Abort() [node]
2021-05-13T17:56:03.769739+00:00 app[web.1]:  2: 0x9dbd36 node::OnFatalError(char const*, char const*) [node]
2021-05-13T17:56:03.770199+00:00 app[web.1]:  3: 0xb3b45e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [node]
2021-05-13T17:56:03.770660+00:00 app[web.1]:  4: 0xb3b7d9 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [node]
2021-05-13T17:56:03.771270+00:00 app[web.1]:  5: 0xce6b75  [node]
2021-05-13T17:56:03.771796+00:00 app[web.1]:  6: 0xce7206 v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [node]
2021-05-13T17:56:03.772310+00:00 app[web.1]:  7: 0xcf309a v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [node]
2021-05-13T17:56:03.772839+00:00 app[web.1]:  8: 0xcf3fa5 v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [node]
2021-05-13T17:56:03.773347+00:00 app[web.1]:  9: 0xcf69b8 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [node]
2021-05-13T17:56:03.773875+00:00 app[web.1]: 10: 0xcbd2e7 v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType) [node]
2021-05-13T17:56:03.774523+00:00 app[web.1]: 11: 0xff334b v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [node]
2021-05-13T17:56:03.775195+00:00 app[web.1]: 12: 0x1376519  [node]
2021-05-13T17:56:03.794312+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-05-13T17:56:03.794514+00:00 app[web.1]: npm ERR! errno 1
2021-05-13T17:56:03.795396+00:00 app[web.1]: npm ERR! [email protected] start: `cross-env NODE_ENV=production ts-node server/index.ts`
2021-05-13T17:56:03.795495+00:00 app[web.1]: npm ERR! Exit status 1
2021-05-13T17:56:03.795604+00:00 app[web.1]: npm ERR! 
2021-05-13T17:56:03.795679+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.
2021-05-13T17:56:03.795745+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-05-13T17:56:03.801902+00:00 app[web.1]: 
2021-05-13T17:56:03.801963+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-05-13T17:56:03.802063+00:00 app[web.1]: npm ERR!     /usr/src/app/.npm/_logs/2021-05-13T17_56_03_796Z-debug.log
2021-05-13T17:56:03.848946+00:00 heroku[web.1]: Process exited with status 1
2021-05-13T17:56:03.901211+00:00 heroku[web.1]: State changed from starting to crashed
2021-05-13T17:56:06.024221+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=schedulework.herokuapp.com request_id=26d198d3-b39f-467a-ae27-b4511f9ef369 fwd="185.20.132.71" dyno= connect= service= status=503 bytes= protocol=https
2021-05-13T17:56:06.281834+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=schedulework.herokuapp.com request_id=3bd7bb2a-721e-4bd3-bb06-f16499eff0c8 fwd="185.20.132.71" dyno= connect= service= status=503 bytes= protocol=https

my package.json

{
  "name": "sch",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development nodemon -r dotenv/config server/index.ts --watch server",
    "start": "cross-env NODE_ENV=production ts-node server/index.ts",
    "build": "nuxt build",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue,.ts --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "npm run lint:js && npm run lint:style",
    "test": "jest"
  },
  "dependencies": {
    "@koa/router": "^8.0.8",
    "@nuxt/typescript-runtime": "^2.1.0",
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/dotenv": "^1.4.0",
    "@nuxtjs/pwa": "^3.3.5",
    "console-log-json": "^2.4.0",
    "core-js": "^3.9.1",
    "cross-env": "^5.2.0",
    "jsonwebtoken": "^8.5.1",
    "koa": "^2.6.2",
    "koa-bodyparser": "^4.3.0",
    "koa-json": "^2.0.2",
    "koa-logger": "^3.2.1",
    "koa-passport": "^4.1.3",
    "koa-router": "^8.0.8",
    "koa-session": "^6.0.0",
    "koa2-ratelimit": "^0.9.0",
    "nuxt": "^2.15.3",
    "passport-jwt": "^4.0.0",
    "passport-local": "^1.0.0",
    "socket.io": "^4.1.0",
    "socketio-jwt": "^4.6.2",
    "ts-node": "^8.10.1",
    "vuex-persistedstate": "^4.0.0-beta.2",
    "zipkin": "^0.22.0",
    "zipkin-context-cls": "^0.22.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@nuxtjs/vuetify": "^1.11.3",
    "@types/koa": "^2.11.3",
    "@types/koa-bodyparser": "^4.3.0",
    "@types/koa-json": "^2.0.18",
    "@types/koa-logger": "^3.1.1",
    "@types/koa-passport": "^4.0.2",
    "@types/koa-router": "^7.4.1",
    "@types/koa-session": "^5.10.2",
    "@vue/test-utils": "^1.1.3",
    "@types/zipkin-context-cls": "^0.11.2",
    "mongoose": "^5.9.14",
    "cors": "^2.8.5",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "copy-webpack-plugin": "^6.1.0",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.7.0",
    "jest": "^26.6.3",
    "koa-helmet": "^6.1.0",
    "node-sass": "^4.14.1",
    "nodemon": "^1.18.9",
    "prettier": "^2.2.1",
    "stylelint": "^13.12.0",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^21.0.0",
    "ts-jest": "^26.5.4",
    "vue-jest": "^3.0.4"
  }
}

nuxt.config.js

module.exports = {
  telemetry: false,
  ssr: false,
  server: {
    protocol: process.env.PROTOCOL,
    host: process.env.HOST,
    port: process.env.PORT
  },
  head: {
    titleTemplate: '%s - schedule',
    title: 'schedule',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },

  styleResources: {
    scss: ['~/assets/scss/_variables.scss']
  },

  css: [
    '~/assets/scss/main.scss'
  ],

  plugins: [],

  components: true,

  buildModules: [
    '@nuxt/typescript-build',
    '@nuxtjs/stylelint-module',
    '@nuxtjs/vuetify'
  ],

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/dotenv'
  ],

  axios: {},

  pwa: {
    manifest: {
      lang: 'en'
    }
  },

  vuetify: {
    customVariables: ['~/assets/scss/_variables.scss'],
    theme: {
      dark: true,
      themes: {}
    }
  },

  build: {}
}

dockerfile

FROM node:12-alpine

RUN mkdir -p /usr/src/nuxt-app
WORKDIR /usr/src/nuxt-app

#RUN apk update && apk upgrade
# RUN apk add git

# copy the app, note .dockerignore
COPY . /usr/src/nuxt-app/
RUN npm install

# build necessary, even if no static files are needed,
# since it builds the server as well
RUN npm run build

# expose 5000 on container
EXPOSE 3000

# set app serving to permissive / assigned
ENV NUXT_HOST=0.0.0.0
# set app port
ENV NUXT_PORT=3000

CMD [ "npm", "start" ]

and finally my action in git

name: Deploy

on:
  push:
    branches:
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/[email protected]
      - uses: akhileshns/[email protected] # This is the action
        with:
          heroku_api_key: ${{secrets.HEROKU_API_KEY}}
          heroku_app_name: "sch" #Must be unique in Heroku
          heroku_email: "[email protected]"
          usedocker: true