3

I've followed this AWS image resizing blog post to resize images in my S3 bucket on the fly and return them when requested using the bucket’s static website hosting endpoint. It works fine for me when I type the URL into a web browser address bar.

I can see 2 redirects happening when I do this (if the resized image hasn't been generated yet): First, the S3 endpoint will 404 redirect to API gateway URL The lambda function is called to generate the resized image, and API gateway redirects the browser back to the endpoint URL again. Now that the resized image is there, it gets displayed.

What I'm aiming to do is display the dynamically resized images in web pages, so I've simply tried to place the endpoint URL for a resized image in img tags eg. <img src="http://YOUR_BUCKET_WEBSITE_HOSTNAME_HERE/300×300/blue_marble.jpg">

When I do this, nothing shows up in my web pages. In the browser console, I can see an error message - it's trying to GET the API gateway URL, and the error is ERR_TOO_MANY_REDIRECTS

Is there a way for me to display the resized images in web pages?

If not, what would I need to do to modify this approach to resize images to predefined sizes upon upload to S3 instead?

Thanks!

jon_s_lim
  • 503
  • 1
  • 4
  • 5
  • 2
    This should work for that application, as-is, but there are a couple of things that could go wrong and trigger this result. Can you capture all the request and response headers for each request that is sent both to S3 and API Gateway for a single item using the browser's developer tools network tab and add them here? – Michael - sqlbot Sep 10 '17 at 18:25
  • 2
    Also, if you feel like experimenting, take a look at my recent answer to [Tell CloudFront to Only Cache 200 Response Codes](https://stackoverflow.com/a/46124549/1695906). You didn't mention CloudFront, but the solution I provided there -- using Lambda@Edge to inject `Cache-Control` response headers into the redirect responses, with CloudFront in front of S3 -- may prove necessary to prevent the browser from holding on to the 307 responses longer than expected. I am very curious to learn what the underling issue is, here. – Michael - sqlbot Sep 10 '17 at 18:30
  • Michael, thanks so much for your response! I tried again today - lo and behold, it works perfectly today, and I didn't change anything. I tried from both my home and from work, with no problems. So you were correct; it does work as-is. I literally spent hours trying to figure out why it wasn't working over the weekend. I guess the Wizard of Amazon finally decided to give me a break! Just for my own knowledge, I'll check out your CloudFront post. Looks useful. Cheers! – jon_s_lim Sep 12 '17 at 03:08

1 Answers1

5

Make sure that when you configure the URL in your environment variables that you do not have a / at the end of your url which will cause looping in your flow.

i.e http://BUCKET_NAME.s3-website.us-east-2.amazonaws.com (this is good) i.e http://BUCKET_NAME.s3-website.us-east-2.amazonaws.com/ (this is bad remove slash)

J K
  • 51
  • 1