Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Next js container crashes and gets restarted when it renders <Image /> #22644

Closed
HsnVahedi opened this issue Mar 1, 2021 · 8 comments
Closed
Labels
bug Issue was opened via the bug report template.

Comments

@HsnVahedi
Copy link

HsnVahedi commented Mar 1, 2021

What version of Next.js are you using?

10.0.7

What version of Node.js are you using?

12.16.0

What browser are you using?

firefox, ...

What operating system are you using?

Ubuntu

How are you deploying your application?

next start

Describe the Bug

when a page renders "next/image", nextjs container gets restarted without any errors. "kubectl logs" and "kubectl describe" shows nothing. The kubernetes pod's status goes from "RUNNING" to "COMPLETED" and nextjs container gets restarted.

Expected Behavior

I expect "next/image" to optimize the image and work properly, or at least show me errors about my problem. But it

To Reproduce

  1. Provision a kubernetes persistent volume to your cluster.
  2. Create a directory named "media" on it on copy some images into "media".
  3. Deploy a microservice(k8s deployment + k8s service) which serves the images to other microservices (pods) in the cluster. And name the k8s service "backend". (So that in other kubernetes pods, images could be requested like "http://backend/media/image-1.jpg")
  4. Deploy a nextjs microservice which uses "next/image": src="http://backend/media/image-1.jpg"
  5. In your browser go to a page that renders "next/image".
  6. Now the pod which runs the nextjs container goes from "RUNNING" to "COMPLETED" without any errors or logs. And the nextjs container gets restarted.

I want to use nextjs image optimization in my nextjs microservice which is deployed on a kubernetes cluster. But the nextjs container gets crashed and restarted whenever it has to render a "next/image" component. Here is the detailed steps to reproduce the scenario:

Steps to reproduce:

  1. Provision a kubernetes persistent volume to your cluster.
  2. Create a directory named media on it on copy some images into media.
  3. Deploy a microservice(k8s deployment + k8s service) which serves the images to other microservices (pods) in the cluster. And name it backend. (So that in other pods, images could be requested by urls like "http://backend/media/image-1.jpg")
  4. Add backend to image domains in next.config.js:
images: {
      domains: ["backend"],
}
  1. Deploy a nextjs microservice which uses next/image:
<Image
    src={`http://backend${image.url}`}
    alt={image.alt}
    width={image.width}
    height={image.height}
    />
  1. In your browser go to a page that renders next/image.
  2. Now the pod which runs the nextjs container goes from RUNNING to COMPLETED without any errors or logs. And the nextjs container gets restarted.

My question is:

How to use nextjs image optimization when images are served from another kubernetes microservice?

@HsnVahedi HsnVahedi added the bug Issue was opened via the bug report template. label Mar 1, 2021
@HsnVahedi HsnVahedi changed the title Next js container crashes gets restarted when it renders <Image /> Next js container crashes and gets restarted when it renders <Image /> Mar 2, 2021
@timneutkens
Copy link
Member

Can you try using next@canary?

@HsnVahedi
Copy link
Author

HsnVahedi commented Mar 2, 2021

@timneutkens Sure! But why would you suggest that? Is it going to log anything that could be useful? Sorry I'm not really sure what canary updates are.

@timneutkens
Copy link
Member

Canary is our beta channel. It holds any changes made before a stable release is done. In this case we've replaced sharp with a better alternative which probably solves your issue.

@HsnVahedi
Copy link
Author

@timneutkens God bless you! It solved my problem. Can I ask you to answer this stackoverflow question so that others could use it? Let me know if it's better to close the stackoverflow question.

@timneutkens
Copy link
Member

Great, thanks for verifying 👍 We're planning to release a new stable version very soon.

@fe-rod
Copy link

fe-rod commented Jun 3, 2021

@timneutkens we upgraded to 10.2.0 because of a memory leak issue with the Image tag, do you know if this is related to the error in this thread? Is 10.2.0 expected to solve this?

@timneutkens
Copy link
Member

This issue can be closed as the initial post was solved and published on stable. @fe-rod make sure you upgrade to the latest version of Next.js as it has a bunch of memory improvements.

@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 28, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Development

No branches or pull requests

4 participants