D
D
Dilik Pulatov2019-12-09 10:07:12
Nginx
Dilik Pulatov, 2019-12-09 10:07:12

Nuxt js(SSR) - javascript heap out of memory? how to check where the load on the server comes from?

Hello!
Not long ago I launched my (SSR) project and faced such problems as lack of memory.
I googled and I see many had this ... but still I have not found a solution yet.
So the site is running on Nuxt Js in SSR mode. and Backend (API) in Yii2 and database in MySQL


Nuxt js - v2.10.2
Node Js - v12.13.1
NPM - v6.12.1
@nuxtjs/axios - v5.8.0(Axios - v0.19.0)
@nuxtjs/proxy - v1.3.3
Ubuntu 18.04 - Nginx, php7.2-fpm MySQL

// nuxt.config.js
const path = require('path')
const webpack = require("webpack")

module.exports = {
  mode: 'universal',
  version: 1.09,
  head: {
    title: 'My title',
  },
  css: [
    'vuetify/dist/vuetify.min.css',
    'noty/lib/noty.css',
    'noty/lib/themes/metroui.css',
    'vue-croppa/dist/vue-croppa.css',
    '@/assets/css/app.styl'
  ],
  server: {
    port: 4444
  },
  router: {
    linkActiveClass: 'active',
    linkExactActiveClass: 'exact-active'
  },
  render:{
    resourceHints: false
  },
  buildModules: [
    '@nuxtjs/eslint-module',
    ['@nuxtjs/router', {
      path: './router'
    }],
    ['@nuxtjs/google-analytics', {
      id: 'UA-154127242-1'
    }]
  ],
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy',
    'cookie-universal-nuxt',
    '@nuxtjs/pwa',
    'nuxt-ssr-cache'
  ],
  axios: {
    baseURL: 'http://SERVER_IP_ADDRESS_FOR_API/webapi',
    browserBaseURL: '/api',
    proxy: true,
    proxyHeaders: false
  },
  proxy: {
    '/api': {
      target: 'http://SERVER_IP_ADDRESS_FOR_API/webapi',
      secure: false,
      pathRewrite: { '^/api': '' }
    },
    '/uploads': {
      target: 'http://SERVER_IP_ADDRESS_FOR_API',
      secure: false
    },
    '/applive': {
      target: 'https://SERVER_IP_ADDRESS_FOR_MOBILE_API/api-live',
      secure: false,
      pathRewrite: { '^/applive': '' }
    }
  },
  cache: {
    useHostPrefix: false,
    pages: [
      '/'
    ],
    store: {
      type: 'memory',
      max: 100,
      ttl: 3600
    }
  },
  plugins: [
    { src: '~/plugins/vue-i18n'},
    { src: '~/plugins/mixins'},
    { src: '~/plugins/mixins-client', ssr: false },
    { src: '~/plugins/vuetify'},
    { src: '~/plugins/components'},
    { src: '~/plugins/components-client', ssr: false },
    { src: '~/plugins/axios'}
  ],
  loading: {
    color: '#5ec900',
    failedColor: '#ff0000',
    height: '3px'
  },
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery"
      })
    ],
    extend (config, { isDev, isClient }) {
      if (isDev && isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.module.rules.push({
        test: /\.i18n$/,
        loader: `@kazupon/vue-i18n-loader?${JSON.stringify({
          includePaths: [path.resolve(__dirname), 'node_modules']
        })}`
      });
    }
  }
}

// package.json
{
  "name": "My title",
  "version": "1.0.0",
  "description": "Nuxt.js project",
  "author": "dilikpulatov <[email protected]>",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "live": "pm2 start npm --name 'prod-app' -- run start",
    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "precommit": "npm run lint"
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.4.1",
    "@nuxtjs/proxy": "^1.3.3",
    "@nuxtjs/pwa": "^3.0.0-0",
    "cookie-universal-nuxt": "^2.0.14",
    "nuxt": "^2.10.1",
    "nuxt-ssr-cache": "^1.5.0",
    "vue-i18n": "^8.9.0"
  },
  "devDependencies": {
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/google-analytics": "^2.2.2",
    "@nuxtjs/router": "^1.5.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "jquery": "^3.3.1",
    "noty": "^3.2.0-beta",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-content-loader": "^0.2.1",
    "vue-croppa": "^1.3.8",
    "vue-owl-carousel": "^2.0.3",
    "vuetify": "^1.5.6"
  }
}

Answer the question

In order to leave comments, you need to log in

4 answer(s)
Дилик Пулатов, 2020-09-15
@dilikpulatov

вообщем проблему решил вот так
суть исправление: Возвращаю все файлы js css jpeg и т.д через nginx, а не node js(смотрите ниже есть ссылка nginx config)
обновил Nuxt до версия 2,14

// nuxt.config.js
ssr: true,
target: 'server'

nginx config
потом команда
nuxt generate

и все))

Дима Паутов, 2019-12-09
@bootd

Аналогичный стек и у меня, но подобные проблемы возникают лишь при выкатке фронта. Создание билда сжирает огромное кол-во ресурсов, просто тупо потому что js собирает js. Мы просто увеличили мощности, иного выхода так и не нашли. До этого решение было простым, делать билд пока не собирётся, иногда с 5го раза собирался

E
Elbek Khayitov, 2019-12-12
@elvonkh

А зачем вам baseURL, если вы используете proxy: true?

Георгий Бухаров, 2019-12-14
@thousandsoulz

У меня однажды на проекте была такая проблема, регулярно падал сайт. Затем нашел где-то в хуке created setTimeout() или setInterval(). В created нельзя вызывать их, потому что этот хук вызывается и на клиенте и на сервере, а таймеры запускаются с каждым новым запросом и накапливаются на сервере, вскоре он падает от перегрузки.
А вообще еще слишком много зависимостей, билду очень тяжело.
P.S. jquery зачем?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question