Problem with serving picture with "?width=" option from Cloudfront. "The specified key does not exist."


#1

Hi,

I’ve done local deployment some days ago. I’ve uploaded some pictures via file manager and everything looked fine until yesterday when I deployed cloud environment with webiny deploy-api --env=dev and webiny deploy-apps --env=dev using the same MongoDB database as local environment (value "MONGODB_NAME" in api/.env.json is not changed). One picture is unable to load. On my side it looks like on the screenshot below.

Inspecting the page source I found that the picture’s url is available:
https://dn35vxban4e5z.cloudfront.net/files/7k44d85st-cooked-noodles-1001773.jpg

but the picture’s srcset URL with “?width=2500” option on the end is not:
https://dn35vxban4e5z.cloudfront.net/files/7k44d85st-cooked-noodles-1001773.jpg?width=2500

When I’m running this link I’m getting an error “The specified key does not exist.”

My webpage is accessible publicly. Scroll to the middle to see the broken picture: https://d2tyk63tl96wg.cloudfront.net/

I was trying to investigate what is wrong with the different resolutions of the picture. I found the cloudfront is connected to API Gateway, which is connected to Lambda. Lambda’s code is pretty long and generated by CoffeeScript which makes me feel I will spend many weeks understanding it. Also, CloudWatch logs related to the Lambda show no errors.

As I don’t really know how the Lambda works (and assume the problem can be here or in the database) can you tell me if this problem is fixable? Maybe using the same database for local and cloud deployment is a bad idea?


#2

Hi @Peter_Palka, this issue is an “old friend”. We thought we resolved it :frowning: We’ll review it and get back to you when we have a fix.

Thanks for reporting!


#3

Hi @Peter_Palka, I’m not sure why this is happening, nor we experienced something like this before :frowning:

Can you tell me please, can you check your S3 bucket and see if the files really exist?
Just open the S3 bucket via the AWS console (the name of the bucket can be found in the api/.env.json file - S3_BUCKET variable), and search, for example, “7k44d85st-cooked-noodles-1001773.jpg”, do you have it?

This looks to me like the name of the S3 bucket is wrong for some reason, or all fo the images were deleted.

Let me know when you get a chance.

Thanks a lot!


#4

Hi @Adrian_Smijulj,

My S3 bucket is completely empty. I had an impression it was always empty. I couldn’t understand this behaviour and I was thinking that pictures are stored somewhere else. Now I’ve just uploaded another picture to the Page Builder on the cloud and I can see this picture on my S3.

I’ve also deployed the webpage locally and I’ve uploaded a picture via Page Builder. It also appeared in my S3 bucket.

Looks like there was some serious misbehaviour of files in this bucket. I’m doing lots of experiments right now so maybe they were wiped out during some operation or I’ve done a mistake. If it will happen again I will enable object-level logging on my S3 to see what actions had been taken to make them disappear.

Thanks for helping me to investigate the issue!

Regards,
Peter

Update: I think I ran webiny remove-api and the next day I deployed it again. The bucket was obviously empty but the pictures were loaded from the browser’s cache (even if I was trying to empty it many times)… sorry for the troubles. I’m still learning how the Webiny works.


#5

No problem @Peter_Palka. If you’ll have more questions, please don’t hesitate to ask! :slight_smile:

Thank you!

P.S. If you run into issues, you can also ping us on gitter (https://gitter.im/Webiny/webiny-js).