serverless-next.js: 503 when using image optimization

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
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.

Capture d’écran 2020-12-08 à 14 05 09

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 1
Comments: 17

Most upvoted comments

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.

@dphang 👍 🥇

arelaxend on Dec 9, 2020

It should be fixed now in@sls-next/serverless-component@1.19.0-alpha.19 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.

dphang on Dec 8, 2020

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 on Dec 8, 2020

@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.

dphang on Dec 11, 2020

@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!

dphang on Dec 9, 2020