Serverless-next.js: 503 when using image optimization

[arelaxend]

Hi there,

Is your feature request related to a problem? Please describe.
Still, we check @sls-next/[email protected] 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/[email protected]
• https://github.com/serverless-nextjs/serverless-next.js/pull/829
• https://github.com/serverless-nextjs/serverless-next.js/issues/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: https://github.com/serverless-nextjs/serverless-next.js/issues/840, hoping it works this time.

[dphang]

It should be fixed now in@sls-next/[email protected] after also include https://github.com/serverless-nextjs/serverless-next.js/commit/7256ab9bbd090dc1503dfebf5c93fb0b3cb452bd. 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!

[snowjang24]

@dphang

My dependencies is

• Next - 10.0.3
• serverless-next - 1.19.0-alpha.16

svg files and png files in the same directory, like public/example.png
in this case still svg works, png doesn't works

I tried to optimize the relative URL.

---

I saw your comment and upgrade to alpha.19 and now it works well for all png and svg ....😭

Thanks for your kind comment

[arelaxend]

It should be fixed now in@sls-next/[email protected] 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.

@dphang 👍 🥇

[jonahallibone]

Unsure if this is a specific to this lib or to Next.js in general, but it seems sometimes the conversions fail and then the server returns a 503 for the image every time after that point.

[dphang]

@jonahallibone not sure what's going on there, please post more details such as CloudWatch logs.

[kylekirkby]

Thanks, @dphang! Working now. Any suggestions on how we can stop images from being resized on every deployment of our apps? Looks like the /* rule is being used for clearing the CF cache. AFAIK this means that the images will be re-optimized on a subsequent deployment?

[dphang]

@kylekirkby yes, the entire cache is invalidated by default, which does include the images path. Please take a look at CloudFront paths section: https://github.com/serverless-nextjs/serverless-next.js#custom-cloudfront-configuration if you would like to specify exact paths. Note that if you do this and exclude all images, if you update an image of the same name, you'll have to ensure you invalidate the cache yourself for that specific file (either manually or using the AWS SDK), otherwise users may see the old image.