NuxtのHerokuへのデプロイに20分くらいかかります、、

Question

前提

Nuxt3（3.0.0）
Firestore
microCMS
Heroku

でSSRのサイトを作っています。

初Nuxtです。JS初心者でもありReactも触ったことがありません。
Herokuも初です。

ビルドやHerokuへのデプロイに20分くらい時間がかかります。。

ブログのようなサイトなのですが、タグなどが多数あり、タグ一覧ページ等含め、現在170ページほどあります。

microCMSさんの記事だとNuxtで100記事のビルドに13秒くらいとのことです。

何が原因でこんなに時間がかかるのか分かりません。。

以下package.jsonです。

{
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "start": "nuxt start",
    "heroku-postbuild": "npm run build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "lint:js": "eslint --ext \".js,.vue\" --ignore-path .gitignore .",
    "lint:style": "stylelint \"**/*.{vue,css}\" --ignore-path .gitignore",
    "lint": "yarn lint:js && yarn lint:style"
  },
  "engines": {
    "node": "16.x"
  },
  "devDependencies": {
    "@nuxt/image-edge": "^1.0.0-27840416.dc1ed65",
    "@types/sanitize-html": "^2.8.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "@vueuse/core": "^9.4.0",
    "@vueuse/nuxt": "^9.4.0",
    "eslint": "^8.27.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-nuxt": "^4.0.0",
    "nuxt": "3.0.0",
    "nuxt-basic-authentication-module": "^0.2.1",
    "patch-vue-directive-ssr": "0.0.1",
    "prettier": "^2.7.1",
    "sass": "^1.54.8",
    "sass-loader": "^13.1.0",
    "stylelint": "^14.11.0",
    "stylelint-config-prettier": "^9.0.3",
    "stylelint-config-recess-order": "^3.0.0",
    "stylelint-config-standard-scss": "^6.0.0",
    "typescript": "^4.8.4",
    "webpack-bundle-analyzer": "^4.7.0"
  },
  "dependencies": {
    "@funken-studio/sitemap-nuxt-3": "^4.0.4",
    "@gtm-support/vue-gtm": "^2.0.0",
    "@nuxtjs/eslint-config-typescript": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/stylelint-module": "^4.1.0",
    "@vueform/multiselect": "^2.5.2",
    "@vueuse/components": "^9.4.0",
    "awesome-phonenumber": "^4.0.0",
    "browser-image-compression": "^2.0.0",
    "chart.js": "^3.9.1",
    "chartjs-plugin-datalabels": "^2.1.0",
    "date-fns": "^2.29.3",
    "firebase": "^9.14.0",
    "is-https": "^4.0.0",
    "microcms-js-sdk": "^2.3.2",
    "node-fetch": "^3.3.0",
    "node-fetch-native": "^1.0.1",
    "nuxt-jsonld": "^2.0.3",
    "sanitize-html": "^2.7.3",
    "v-pagination-3": "^0.1.7",
    "vee-validate": "^4.7.2",
    "vue-chart-3": "^3.1.8",
    "vue-countup-v3": "^1.1.0",
    "vue-cropperjs": "^5.0.0",
    "vue-infinite-loading": "github:nvitius/vue-infinite-loading#next",
    "vue3-carousel": "^0.2.8",
    "yup": "^0.32.11"
  }
}

以下、nuxt.config.tsです。

import { resolve } from 'path';

const firebaseModules = ["firebase/app", "firebase/auth", "firebase/firestore"];

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      MICROCMS_API_KEY: process.env.MICROCMS_API_KEY || "",
      MICROCMS_POST_API_KEY: process.env.MICROCMS_POST_API_KEY || "",
      MICROCMS_CONTACT_API_KEY: process.env.MICROCMS_CONTACT_API_KEY || "",
      MICROCMS_SERVICE_DOMAIN: process.env.MICROCMS_SERVICE_DOMAIN || "",

      FIREBASE_API_KEY: process.env.FIREBASE_API_KEY || "",
      FIREBASE_AUTH_DOMAIN: process.env.FIREBASE_AUTH_DOMAIN || "",
      FIREBASE_PROJECT_ID: process.env.FIREBASE_PROJECT_ID || "",
      FIREBASE_STORAGE_BUCKET: process.env.FIREBASE_STORAGE_BUCKET || "",
      FIREBASE_MESSAGING_SENDER_ID: process.env.FIREBASE_MESSAGING_SENDER_ID || "",
      FIREBASE_APP_ID: process.env.FIREBASE_APP_ID || "",

      RECAPTCHA_SITE_KEY: process.env.RECAPTCHA_SITE_KEY || "",
    },
  },
  modules: [
    '@vueuse/nuxt',
    'nuxt-jsonld',
    '@nuxt/image-edge'
  ],
  css: [
    '~/assets/scss/style.scss'
  ],
  hooks: {
    'pages:extend'(pages) {
      pages.push({
        name: 'themePage',
        path: '/theme/page/:p',
        file: resolve(__dirname, 'pages/theme/index.vue')
      });
      pages.push({
        name: 'categoryParent',
        path: '/category/:slug/page/:p',
        file: resolve(__dirname, 'pages/category/[slug]/index.vue')
      });

      pages.push({
        name: 'categoryChild',
        path: '/category/:slug/:id/page/:p',
        file: resolve(__dirname, 'pages/category/[slug]/[id].vue')
      });

      pages.push({
        name: 'tagPage',
        path: '/tag/:slug/page/:p',
        file: resolve(__dirname, 'pages/tag/[slug]/index.vue')
      });

    }
  },
  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@import "@/assets/scss/foundation/_mixin.scss";'
        },
      },
    },
    build: {
      rollupOptions: {
        output: {
          manualChunks(id) {
            const seprateModule = firebaseModules.find(module => id.includes(module));
            if (seprateModule) return seprateModule;
          }
        }
      }
    }
  },
  nitro: {
    compressPublicAssets: true,
    prerender: {
      crawlLinks: true
    }
  },
  build: {
    transpile: ['chart.js', 'date-fns'],
  },
});

analyzeで見たスクリプトのサイズは2MBほど、Gzipで700KBくらいです。

なぜこんなに時間がかかっているのか、、

eslintとかが原因なのか、chunkサイズの問題なのか、
調べ周りましたが分かりません。。

何かヒントをいただけますと幸いです。

よろしくお願いいたします。

Answer 1

20分のうちどのくらいがNuxt自体に割かれているかが分かればいいのですが、通常データ取得以外で膨大な時間がかかることはありえないため、

• 拡張したルートのデータ取得部分に大きなタイムアウトが発生している
• Herokuで無駄なデプロイ準備時間が発生している

のどちらかまたは両方だと思います。

なにか特別な事情があるのかもしれませんが、Nuxtの動作においてHerokuを使うメリットは特にないため、下記の手順でNetlifyにデプロイすることをおすすめします。

https://blog.microcms.io/nuxt-microcms-netlify-portfolio/