How do you correctly use nuxt/image with CloudFront CDNs?

[armenr]

Hi folks!

I'm kinda confused/stuck regarding how I'm supposed to use this module with a cloudfront CDN endpoint.

I have already tried:

• Searching the web
• Searching the source code
• Searching the docs
• Searching issues

I haven't found anything conclusive about how to get this working with CloudFront.

The CDN serves /public/ and non-public paths. Non-public paths are done with signed URLs (and I have a working lambda for that).

I have two questions:

1. How do I configure the module so that it can auto-optimize images for me that are pulled from our CDN's public path?
2. Is there even a way to configure the module so that it can also optimize images that are pulled from our CDN's protected paths (for example /private/*)

I'd appreciate any help or direction. Thank you! :)

[oemer-aran]

Did you manage to find a solution?

[armenr]

Nope. Not a single answer, no help, no assistance, no feedback, no clues/ideas/suggestions.

I'm still just sitting here wondering about it.

[james-astra]

Same here! In previous projects I have just automatically uploaded all images to the S3 bucket under the commit hash during ci/cd and then had helper functions in the front-end to generate the correct urls for either local dev or staging/prod cloudfront.
I was hoping Nuxt would have some easy integration for this but it seems not :(

[armenr]

@danielroe - Sorry to tag you directly, but would you (or anyone else) maybe be able to point us in the right direction?

If it means contributing a new plugin/provider for this, I'll happily do it...I'm really just trying to learn :) and solve a useful problem.

[danielroe]

You should be able to add your CDN ___domain to the domains array in the image options