I am using imagekit.io CDN in front of Cloud Storage rendering with the next/image component. I had next/image working prior seeing online that it was not compatible with the GAE standard environment. This concerns me... even though it is working, I'm wondering if there is some kind of inefficiency because next cannot cache images outside of /tmp. next/image is kind of a magic black box to me.
next.config.js
const nextConfig = {
experimental: {
externalDir: true
},
reactStrictMode: true,
images: {
domains: ["ik.imagekit.io"]
},
distDir: "build"
};
module.exports = nextConfig;
Moving to flex is not an option right now. I need to know if I should move off next/image.
CodePudding user response:
TL; DR Google App Engine Standard is not a great option for Next
As you've pointed out from the tutorial:
Nextjs Features like Image Component with Optimization, Incremental Static Regeneration requires nextjs cache folder to be read/written on runtime. But our Standard Environment has read and write access only to the /tmp directory.
Is not suitable to use next/image component on App Engine Standard due to the limitation that you could not write on runtime. This conclusion is based on the official documentation from both, Google App Engine Standard and NextJS
NextJS (next/image)
Images are optimized dynamically upon request and stored in the
<distDir>/cache/images
directory. The optimized image file will be served for subsequent requests until the expiration is reached.
Google App Engine Standard:
All files in this directory are stored in the instance's RAM, therefore writing to
/tmp
takes up system memory. In addition, files in the/tmp
directory are only available to the app instance that created the files. When the instance is deleted, the temporary files are deleted.
This seems to be a common struggle between developers using some NextJS components that requires to write to the /cache
folder running on App Engine Standard, as shown on this GitHub discussion:
Currently, the image optimiser caches images locally, in the servers filesystem, typically under
.next/cache/images
. While this is fine on some platform, it's not uncommon for managed deployment target to restrict write access to the filesystem (e.g. Google App Engine only provides write access to an in-memory/tmp
folder) ... Currently, the only option we have to use next image optimization within Google App Engine is to use a custom server, override the handler for_next/images
with an handler that does exactly the same as the image optimizer
And on this GitHub issue:
Did you have a solution for this one? Considering moving our marketing site to AWS temporarily over this. Can't use next/image on GCP GAE.
If you really need to deploy to GCP GAE, you can set your application to a flex environment.
See also: