Grisome 构建在本地成功，但在 AWS Amplify 上失败

Question

I have a Gridsome site that I'm trying to deploy to AWS Amplify.

The site builds fine and with no errors locally with gridsome build , however on AWS Amplify, it fails.

I initially thought the error was related to a non-SSR component I was using that required <ClientOnly> tags, as this was throwing warnings in my local build. However, I've since removed that component and the issue persists.

I also thought the issue may be due to some outdated dependencies being required by packages related to webpack, but after several hours of trying to resolve these, I'm relatively confident this is not the case.

I don't quite understand the error log, but I think the issue may be related to the large number of images on my website, and AWS Amplify running out of memory ( ENOMEM ) while processing them. I haven't been able to find a way to increase the memory allocation for AWS Amplify, if this is even the cause.

The AWS Amplify log provides the following information:

2020-04-23T14:21:23.331Z [WARNING]: Gridsome v0.7.14
2020-04-23T14:21:23.867Z [WARNING]: Initializing plugins...
2020-04-23T14:21:24.053Z [WARNING]: Load sources - 0.1s
2020-04-23T14:21:24.166Z [WARNING]: Create GraphQL schema - 0.11s
2020-04-23T14:21:24.200Z [WARNING]: Create pages and templates - 0.03s
2020-04-23T14:21:24.224Z [WARNING]: Generate temporary code - 0.02s
2020-04-23T14:21:24.224Z [WARNING]: Bootstrap finish - 0.89s
2020-04-23T14:21:24.226Z [WARNING]: Compiling assets...
2020-04-23T14:28:43.461Z [WARNING]: Compile assets - 439.23s
2020-04-23T14:28:43.487Z [WARNING]: Execute GraphQL (14 queries) - 0.03s
2020-04-23T14:28:43.492Z [WARNING]: Write out page data (14 files) - 0s
2020-04-23T14:28:45.196Z [WARNING]: Render HTML (14 files) - 1.7s
2020-04-23T14:28:45.198Z [WARNING]: Process files (0 files) - 0s
2020-04-23T14:28:45.563Z [INFO]: [2K
2020-04-23T14:28:45.563Z [INFO]: [1GProcessing images (7675 images) - 0%
2020-04-23T14:28:47.487Z [INFO]: [2K
2020-04-23T14:28:47.489Z [INFO]: [1GProcessing images (7675 images) - 0%
2020-04-23T14:28:47.579Z [INFO]: [2K[1G
2020-04-23T14:28:47.579Z [INFO]: Processing images (7675 images) - 1%
2020-04-23T14:28:48.834Z [INFO]: [2K[1GProcessing images (7675 images) - 1%
...
2020-04-23T14:33:25.168Z [INFO]: [2K[1GProcessing images (7675 images) - 41%
2020-04-23T14:33:26.901Z [WARNING]: internal/child_process.js:366
                                    throw errnoException(err, 'spawn');
                                    ^
                                    Error: spawn ENOMEM
                                    at ChildProcess.spawn (internal/child_process.js:366:11)
                                    at spawn (child_process.js:551:9)
                                    at Object.fork (child_process.js:113:10)
                                    at ChildProcessWorker.initialize (/codebuild/output/src926123643/src/website/node_modules/jest-worker/build/workers/ChildProcessWorker.js:105:44)
                                    at ChildProcessWorker.onExit (/codebuild/output/src926123643/src/website/node_modules/jest-worker/build/workers/ChildProcessWorker.js:204:12)
                                    at ChildProcess.emit (events.js:198:13)
                                    at Process.ChildProcess._handle.onexit (internal/child_process.js:248:12)
2020-04-23T14:33:27.254Z [WARNING]: npm
2020-04-23T14:33:27.254Z [WARNING]: ERR! code ELIFECYCLE
                                    npm ERR! errno 1
2020-04-23T14:33:27.255Z [WARNING]: npm
2020-04-23T14:33:27.259Z [WARNING]: ERR! website@ build: `gridsome build`
                                    npm ERR! Exit status 1
                                    npm ERR!
                                    npm ERR! Failed at the website@ build script.
                                    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2020-04-23T14:33:27.270Z [WARNING]: 
2020-04-23T14:33:27.270Z [WARNING]: npm ERR! A complete log of this run can be found in:
                                    npm ERR!     /root/.npm/_logs/2020-04-23T14_33_27_259Z-debug.log
2020-04-23T14:33:27.270Z [HELP]: Outputting the npm debug log
                                 0 info it worked if it ends with ok
                                 1 verbose cli [ '/root/.nvm/versions/node/v10.16.0/bin/node',
                                 1 verbose cli   '/root/.nvm/versions/node/v10.16.0/bin/npm',
                                 1 verbose cli   'run',
                                 1 verbose cli   'build' ]
                                 2 info using npm@6.9.0
                                 3 info using node@v10.16.0
                                 4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
                                 5 info lifecycle website@~prebuild: website@
                                 6 info lifecycle website@~build: website@
                                 7 verbose lifecycle website@~build: unsafe-perm in lifecycle true
                                 8 verbose lifecycle website@~build: PATH: /root/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/codebuild/output/src926123643/src/website/node_modules/.bin:/usr/local/rvm/gems/ruby-2.4.6/bin:/usr/local/rvm/gems/ruby-2.4.6@global/bin:/usr/local/rvm/rubies/ruby-2.4.6/bin:/usr/local/rvm/bin:/root/.yarn/bin:/root/.config/yarn/global/node_modules/.bin:/root/.nvm/versions/node/v10.16.0/bin:/root/.local/bin:/usr/local/rvm/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin
                                 9 verbose lifecycle website@~build: CWD: /codebuild/output/src926123643/src/website
                                 10 silly lifecycle website@~build: Args: [ '-c', 'gridsome build' ]
                                 11 silly lifecycle website@~build: Returned: code: 1  signal: null
                                 12 info lifecycle website@~build: Failed to exec build script
                                 13 verbose stack Error: website@ build: `gridsome build`
                                 13 verbose stack Exit status 1
                                 13 verbose stack     at EventEmitter.<anonymous> (/root/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
                                 13 verbose stack     at EventEmitter.emit (events.js:198:13)
                                 13 verbose stack     at ChildProcess.<anonymous> (/root/.nvm/versions/node/v10.16.0/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
                                 13 verbose stack     at ChildProcess.emit (events.js:198:13)
                                 13 verbose stack     at maybeClose (internal/child_process.js:982:16)
                                 13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
                                 14 verbose pkgid website@
                                 15 verbose cwd /codebuild/output/src926123643/src/website
                                 16 verbose Linux 4.14.165-103.209.amzn1.x86_64
                                 17 verbose argv "/root/.nvm/versions/node/v10.16.0/bin/node" "/root/.nvm/versions/node/v10.16.0/bin/npm" "run" "build"
                                 18 verbose node v10.16.0
                                 19 verbose npm  v6.9.0
                                 20 error code ELIFECYCLE
                                 21 error errno 1
                                 22 error website@ build: `gridsome build`
                                 22 error Exit status 1
                                 23 error Failed at the website@ build script.
                                 23 error This is probably not a problem with npm. There is likely additional logging output above.
                                 24 verbose exit [ 1, true ]
2020-04-23T14:33:27.291Z [ERROR]: !!! Build failed
2020-04-23T14:33:27.292Z [ERROR]: !!! Non-Zero Exit Code detected
2020-04-23T14:33:27.292Z [INFO]: # Starting environment caching...
2020-04-23T14:33:27.296Z [INFO]: # Environment caching completed
Terminating logging...

My package.json contains the following:

{
  "name": "website",
  "private": true,
  "scripts": {
    "build": "gridsome build",
    "develop": "gridsome develop",
    "explore": "gridsome explore"
  },
  "dependencies": {
    "@gridsome/source-filesystem": "^0.6.2",
    "@gridsome/transformer-remark": "^0.5.0",
    "gridsome": "^0.7.14",
    "gridsome-plugin-gtm": "^0.1.1",
    "marked": "^0.8.0",
    "vue-burger-menu": "^2.0.4",
    "vue-easy-lightbox": "^0.11.0",
    "vue-slick-carousel": "^1.0.5"
  },
  "devDependencies": {
    "node-sass": "^4.13.1",
    "normalize.css": "^8.0.1",
    "sass-loader": "^8.0.2",
    "style-resources-loader": "^1.3.3"
  },
  "browserslist": [
    "defaults"
  ]
}

I'd be grateful for any help in trying to resolve this issue.

Thank you in advance.

UPDATE #1

I am now quite sure this is due to the large number of images being processed on my site via <g-image> .

I decided to try to build using AWS CodeBuild to see if I got any more information. It failed too, but did give me some more helpful errors.

When I removed all but a handful of images, the build works. Once I get above ~300 images being displayed at different dimensions, things start to fail. The error messages:

Process files (0 files) - 0s
...
[2K·[1GProcessing images (4671 images) - 58%Error: Failed to process image src/assets/media/jobs/1.jpg. spawn ENOMEM

    at pMap.concurrency (/codebuild/output/src132267748/src/github.com/xxxxx/website/node_modules/gridsome/lib/workers/image-processor.js:113:13)

(sharp:31795): GLib-CRITICAL **: 04:50:22.507: g_hash_table_lookup: assertion 'hash_table != NULL' failed

(sharp:31795): GLib-CRITICAL **: 04:50:22.516: g_hash_table_lookup: assertion 'hash_table != NULL' failed

(sharp:31795): GLib-CRITICAL **: 04:50:22.516: g_hash_table_insert_internal: assertion 'hash_table != NULL' failed

(sharp:31795): GLib-CRITICAL **: 04:50:22.516: g_hash_table_lookup: assertion 'hash_table != NULL' failed

So, yeah, I guess this is a Gridsome bug?

UPDATE #2

Adding node-options=--max_old_space_size=4096 in the .npmrc file causes the build to hang and eventually timeout.

UPDATE #3

Batch resized images so the max width/height was 2000px (effective max file size of ~2MB). Builds are now succeeding.

Hopefully someone can assist with a solution so we can build from the source files without pre-processing images.

Answer 1

This appears to be a bug where Gridsome runs out of memory processing a large number of large files.

This workaround preprocesses all of the image files in order to reduce the load of each image before Gridsome tries to process them.

Preprocess images with Sharp

// image-preprocessor.js
const fs = require("fs");
const path = require("path");
const sharp = require("sharp");

const dirPath = "./src/assets/";
const maxWidth = 2000;
const maxHeight = 2000;

const getAllFiles = function(dirPath, arrayOfFiles) {
  files = fs.readdirSync(dirPath);

  arrayOfFiles = arrayOfFiles || [];

  files.forEach(function(file) {
    if (fs.statSync(`${dirPath}/${file}`).isDirectory()) {
      arrayOfFiles = getAllFiles(`${dirPath}/${file}`, arrayOfFiles);
    } else {
      arrayOfFiles.push(path.join(__dirname, dirPath, "/", file));
    }
  });
  return arrayOfFiles;
};

const result = getAllFiles(dirPath);

result.forEach(async (file) => {
  await sharp(`${file}`)
    .resize(maxWidth, maxHeight, {
      fit: "inside",
    })
    .toBuffer(function(err, buffer) {
      fs.writeFile(`${file}`, buffer, function(err) {
        if (err) {
          console.log(err);
        }
      });
    });
});

Add the image preprocesser to the builspec

// buildspec.yml
  ...
  build:
    commands:
      - node image-preprocessor.js
      - npm run build
  ...

Note that because the preprocessing is done every time Gridsome is built via the buildpsec, the source images remain untouched in the repository (and ultimately await a proper fix to this issue).