質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.78%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 395

yoko394

score 6

前提・実現したいこと

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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る