Nuxt 3 + AWS Lambda@Edge + AWS S3 + IPX + Nuxt/Image Not Working (404)
I need some help understanding something. Based on my reading, I cannot use
nuxt/image with AWS S3 without some other CDN or service to render my images? In other words, IPX is not supported on AWS? There seems to be a lot of confusing documentation surrounding Nuxt and this is one of the big areas where the documentation seems to be lacking and is confusing. My website is SSR, deploying to AWS Lambda@Edge with AWS CloudFront. I upload the static assets from .output/public to an AWS S3 bucket. But, when I use nuxt/image, the _ipx directory is not generated and therefore the images fail. I have read through SO documents, support/help documents here, and various other documents both in Nuxt documentation as well as via Google. Most of what I am seeing applies to Nuxt 2 only. So, what gives? Why is this seemingly so difficult and where is the appropriate documentation? By the way, I am using nitro and the aws-lambda preset.3 Replies
Hi @Spanky. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the information provided in the knowledge sources, I can offer some insights into your situation with Nuxt 3, AWS Lambda@Edge, AWS S3, IPX, and Nuxt/Image. However, it's important to note that the knowledge sources don't contain specific information about using Nuxt/Image with AWS S3 or Lambda@Edge.
The main issue you're facing is that the
_ipx directory is not being generated, causing image failures. This is likely because IPX, the default image optimizer for Nuxt Image, is designed to work in a server environment where it can process images on-the-fly.
Here are some key points to consider:
1. Default Provider: The default provider for Nuxt Image is IPX (or IPXStatic for static builds). As mentioned in the Nuxt Image Configuration documentation, IPX is used when not specified otherwise.
2. Static Builds: For static builds (like when using nuxt generate), the default provider switches to IPXStatic. However, this doesn't seem to apply to your SSR setup.
3. AWS Lambda@Edge Limitations: Lambda@Edge has limitations on file system access and execution environment, which may prevent IPX from functioning correctly.
4. Alternative Providers: Nuxt Image supports multiple providers. You might need to consider using a different provider that's compatible with your AWS setup. For example, the AWS Amplify provider is mentioned in the documentation, but it's noted as experimental and "will be available soon".
5. Custom Provider: If no existing provider meets your needs, you might need to create a custom provider that works with your AWS setup.
Given your specific setup (SSR, AWS Lambda@Edge, CloudFront, S3), it seems that the default IPX provider isn't suitable. You're correct that the documentation doesn't provide clear guidance for this specific use case.
To resolve this, you might need to:
1. Use a different image optimization service that's compatible with your AWS setup.
2. Create a custom provider that works with your infrastructure.
3. Consider using AWS Amplify if it becomes fully supported in the future.
Unfortunately, the knowledge sources don't provide a direct solution for your specific setup. It might be worth raising this issue in the Nuxt community forums or GitHub issues to get more specific guidance or to request improved documentation for this use case.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@745870431755698298> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Considering how popular AWS services are for hosting websites especially serverless services such AWS Lambda, this seems pretty ridiculous. How can Nuxt be on version 3 if its still an infant and does not have basic implementations for the most popular services? There are tons of issues people have encountered with Nuxt, aside from the garbage documentation.