VercelにNuxt(SSR)をデプロイしたい

Question

前提・実現したいこと

SSRのNuxtをVercel(Now.sh)にデプロイしていますが、エラーが出てビルドが失敗します。

Vercelのビルド設定

• Githubのブランチにcommitしたらビルドする設定
• BUILD COMMAND: yarn run dev (nuxt-ts buildとなる)
• OUTPUT DIRECTORY: dist
• DEVELOPMENT COMMAND: nuxt

発生している問題・エラーメッセージ

VercelのBuild Logsからエラー部分だけ抜粋

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

ERROR  RpcIpcMessagePortClosedError: Process 1519 exited [SIGABRT].
ERROR  Issues checking service aborted - probably out of memory. Check the memoryLimit option in the ForkTsCheckerWebpackPlugin configuration.

✔ Client: Compiled with some errors in 1.13m

Module not found: Error: Can't resolve 'ts-loader' in '/vercel/59fe5036'

✖ Nuxt Fatal Error 
Error: Nuxt build error 

Error: Command failed with exit code 1: npx nuxt build --standalone --no-lock --config-file "nuxt.config.js"
15:10:03.009  	    at makeError (/vercel/38aa1a6d27b6283d/.build-utils/.builder/node_modules/execa/lib/error.js:59:11)
15:10:03.009  	    at handlePromise (/vercel/38aa1a6d27b6283d/.build-utils/.builder/node_modules/execa/index.js:114:26)
15:10:03.009  	    at processTicksAndRejections (internal/process/task_queues.js:97:5)
15:10:03.009  	    at async Object.build (/vercel/38aa1a6d27b6283d/.build-utils/.builder/node_modules/@nuxtjs/vercel-builder/lib/build.js:124:5)
15:10:03.009  	    at async buildStep (/var/task/sandbox-worker.js:21075:20)
15:10:03.009  	    at async mainSub (/var/task/sandbox-worker.js:20796:9)
15:10:03.009  	    at async main (/var/task/sandbox-worker.js:20658:5) {

該当のソースコード

ビルドに関係すると思われる以下のソースコードを載せます。

package.json

{
  "name": "AppName",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build ",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "yarn lint:js"
  },
  "dependencies": {
    "@nuxt/content": "^1.5.0",
    "@nuxt/typescript-runtime": "^1.0.0",
    "@nuxtjs/axios": "^5.12.0",
    "@nuxtjs/proxy": "^2.0.1",
    "@nuxtjs/pwa": "^3.0.0-beta.20",
    "@nuxtjs/dotenv": "^1.4.1",
    "@nuxtjs/vuetify": "^1.11.2",
    "@nuxt/typescript-build": "^2.0.2",
    "firebase": "^7.18.0",
    "firebaseui": "^4.6.1",
    "konva": "^7.0.6",
    "nuxt": "^2.14.0",
    "vue-konva": "^2.1.4",
    "vuex-persistedstate": "^3.1.0",
    "nuxt-property-decorator": "^2.7.2"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.0",
    "@nuxtjs/eslint-config": "^3.1.0",
    "@nuxtjs/eslint-config-typescript": "^3.0.0",
    "@nuxtjs/eslint-module": "^2.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-nuxt": "^1.0.0",
    "eslint-plugin-prettier": "^3.1.4",
    "faker": "^4.1.0",
    "firebase-admin": "^9.1.0",
    "firebase-tools": "^8.7.0",
    "prettier": "^2.0.5"
  }
}

vercel.json

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles":["package.json","static/**"]
      }
    }
  ]
}

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
  /*
   ** Nuxt rendering mode
   ** See https://nuxtjs.org/api/configuration-mode
   */
  mode: 'universal',
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    titleTemplate: '',
    title: '',

    ],
    link: [
      {
        rel: 'icon',
        sizes: '16x16',
        type: 'image/png',
        href: '/favicon-16.png',
      },
      {
        rel: 'icon',
        sizes: '32x32',
        type: 'image/png',
        href: '/favicon-32.png',
      },
      {
        rel: 'icon',
        sizes: '48x48',
        type: 'image/png',
        href: '/favicon-48.png',
      },
      {
        rel: 'icon',
        sizes: '62x62',
        type: 'image/png',
        href: '/favicon-62.png',
      },
      // apple touch icon
      {
        rel: 'apple-touch-icon',
        sizes: '180x180',
        href: '/apple-touch-icon.png',
      },
    ],
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */

  plugins: [
    { src: '~/plugins/vue-konva', ssr: false },
    { src: '~/plugins/firebase' },
    { src: '~/plugins/persistedstate', ssr: false },
  ],

  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: true,
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build', '@nuxtjs/vuetify'],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // '@nuxtjs/pwa',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
    '@nuxtjs/style-resources',
    '@nuxtjs/dotenv',
  ],

  styleResources: {
    scss: ['./assets/vars/*.scss'],
  },

  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},

  /*
   ** Content module configuration
   ** See https://content.nuxtjs.org/configuration
   */
  content: {},
  /*
   ** vuetify module configuration
   ** https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    theme: {
      dark: false,
      white: true,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3,
        }
      },
    },
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    extend(config, { isDev, isClient, isServer }) {
      if (isServer) {
        config.externals = {
          '@firebase/app': 'commonjs @firebase/app',
          '@firebase/firestore': 'commonjs @firebase/firestore',
        }
      }
    },
  },
}

試したこと

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

上記のエラーよりメモリが足りていないと考え、VercelのBuild Commandを以下のように変更しました。

nuxt-ts build --max-old-space-size=4096

[参考] FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3

結果、同じエラーメッセージが発生し、ビルドが失敗しました。

また、以下の記事より
[Qiita] Vercel(Now.sh)にNuxt.js(SSR)をデプロイすると、Firebase関連でSSR時にNuxt.js Internal Server Errorになるのを修正する
firebase関連でエラーが出るようなので、記事の通りにnuxt.config.jsを修正しました。

// nuxt.config.js
 build: {
    extend(config, { isDev, isClient, isServer }) {
      if (isServer) {
        config.externals = {
          '@firebase/app': 'commonjs @firebase/app',
          '@firebase/firestore': 'commonjs @firebase/firestore',
        }
      }
    },
  }

結果、同じエラーメッセージが発生し、ビルドが失敗しました。

現在考えている原因

• firebaseの通信のため、コンポーネント内でasyncDataを使っている → 通信の処理を./api/以下で実装して、vercel.jsonに登録すべきか？

• 以下の記事より、/staticの位置が問題?

[Stack Overflow] now dev resulting in intermittent by frequent `FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

補足情報

• nodeのバージョン: v14.8.0

Answer 1

自己解決しました。
build commandが違っていたようです。