503 when using image optimization

[arelaxend]

Hi there,

Is your feature request related to a problem? Please describe.
Still, we check @sls-next/serverless-component@1.19.0-alpha.16 and for now we get 503 on images when we provide an url for an image for a specific listed domain. We get the same result for images located under /public

We setup next.config.js with the following:

images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    domains: ["stream.domain.com"],
    path: '/_next/image',
    loader: 'default',
  }

For:

<Image
            src={`https://stream.domain.com/public/image.jpg`}
            width={300}
            height={300}
            alt="my image"
            layout={`responsive`}
            priority={true}
            loading="eager"
 />

On s3 we see yet no file under _next/images

Describe the solution you'd like
That is create the optimized images in s3 under _next/images

Additional

• node version: v14.7.0
• @sls-next/serverless-component@1.19.0-alpha.16
• feat(lambda-at-edge): support image optimization #829
• NextJS 10.0.0 <Image /> component causes 404 #725

We also found this in cloudwatch logs.

A.

[dphang]

If you check the image lambda output, just checking, are the node_modules and sharp correctly copied there? I had prebuilt modules for Lambda so it should just copy those. Also make sure the function is running Node 12.x as that is what is mentioned in the Sharp installation page. (If this fixes, will update the docs to mention it)

[jonahallibone]

@dphang +1 for this issue as well. Config is basic as follows:

module.exports = {
  images: {
    domains: ["prefix.cloudfront.net"],
  },
};

[dphang]

Yea, this is strange, for some reason the libvips binaries are now not being copied over to the Lambda when I deploy (node_modules/sharp/vendor/). Trying to investigate why that's the case.

[dphang]

I think when running it locally, it copies the vendor libs correctly, but when doing an npm publish, it seems to exclude certain files. I think if we update the files property to explicitly whitelist everything in sharp_node_modules it, it should work.

[dphang]

I think it is because the package.json in sharp module doesn't include it (for good reason, since there are many binaries and it adds to the package). However, since we do need it and we only have Lambda Node.js 12.x platform, I think it is fine to modify it to include it (~20MB, or ~7 MB compressed). Added PR here: #840, hoping it works this time.

[dphang]

It should be fixed now in@sls-next/serverless-component@1.19.0-alpha.19 after also include 7256ab9. Will try to optimize/bundle this better in the future, but it should be workable for now. Let me know if there are other issues.

[jonahallibone]

@dphang I am deploying with the new alpha as we speak, will report back

[snowjang24]

@dphang I have same issue, but only works on svg files, my png file has 503 error and cant load all

<Image src="/main1-2.png" width={582} height={287} loading="lazy" />
<Image src="/logo.svg" width={24} height={24} loading="lazy" />

[dphang]

@snowjang24 thanks for reporting. I'll leave this open for a few days so I can easily track any bugs. Could you please provide more details like Next.js version, Serverless-next.js version? As mentioned above I did push a couple of fixes with 1.19.0-alpha.19 so the optimizer should work fine now. For SVG files, it doesn't go through the Sharp optimization at all since it doesn't need to (it's a vector type) (see: https://github.com/serverless-nextjs/serverless-next.js/blob/master/packages/libs/lambda-at-edge/src/images/imageOptimizer.ts#L264-L267)

If you are optimizing /example.png then it should be stored in S3 in public/example.png.

What kind of URL are you optimizing? Is it absolute URL or relative URL (in public folder?) What do CloudWatch logs say about the 503 errors? 503 is very generic so it will be more helpful to have more details. Thanks!