Check out a free preview of the full AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course:
The "Swapping Out Image Requests Exercise" Lesson is part of the full, AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course featured in this preview video. Here's what you'd learn in this lesson:

Steve uses Lambda@Edge to manipulate HTTP requests on the fly.

Get Unlimited Access Now

Transcript from the "Swapping Out Image Requests Exercise" Lesson

[00:00:00]
>> Steve Kinney: So now we've effectively solved that by being able to program our CDN. Now, there is this picture of Prince,
>> Steve Kinney: It's a fine picture of Prince, it is prince-1.jpg. Now one of the things you saw very early on is, in that folder, there is a prince-2.jpg, and it is a different picture of Prince.

[00:00:27] At one point, I was gonna be funny and do an actual, like Prince Harry or something like that. But I realized that is sacrilege against Prince, so I'm not gonna do that. So there are just two different pictures of Prince, as you do. So what I want you to do is go back.

[00:00:45] And you can actually, again, we can only have one viewer request function, so we're gonna have to add some logic here. Your job is, again, to go to latest,
>> Steve Kinney: So here we're testing for if it matches that. We can actually say, hey, if they're looking for, you don't even need to regex.

[00:01:07] If request.uri = /prince-1.jpg, change it to /prince-2.jpg. Right, so now all requests for that picture we had Prince previously will be replaced with a different version of Prince on the way in. All right, so our job was to replace one picture of Prince with another picture of Prince.

[00:01:32] We could go about it like this, so we can say if(request.uri,
>> Steve Kinney: '/prince-1.jpg'), we will modify it.
>> Steve Kinney: prince-2.jpg, this is on its way in. So every single request that comes into CloudFront is going to be modified before it hits CloudFront. So CloudFront will always think it was asking for prince-2.

[00:02:09] Right, so it would be cached, we won't have to go back to S3 either way. So hit Save, one of the things that I noticed is, take off the previous one, and version two.
>> Steve Kinney: So for latest, let me go ahead and publish new version.
>> Steve Kinney: Different Prince,

[00:02:43]
>> Steve Kinney: We'll go ahead and we'll say viewer request,
>> Steve Kinney: And we'll hit Save. All right, that might have to distribute, but we've been having good luck with that so far.
>> Steve Kinney: Yeah, it looks like we took the other one off, it doesn't look like the new one's on just yet.

[00:03:14]
>> Steve Kinney: Let's go take a look, make sure I got everything in there, we got version three.
>> Steve Kinney: One thing we'll do real quick,
>> Steve Kinney: Clear out the cache.
>> Steve Kinney: So here we've swapped out our previous version of Prince for a smaller picture of Prince. This is still, even if I go all the way to,

[00:03:56]
>> Steve Kinney: prince-1.jpg, you can see it's still that new picture, the same as if I go to prince-2. Cuz CloudFront is modifying the request on the way in. So, we're still getting the same one out of S3, and now these are cached. Right, so if you think about it, there was some interesting stuff we did before.

[00:04:15] We can see that CloudFront can let certain headers through, you can theoretically show a smaller image if you know the device is smaller, that's, again, slightly tricky to get right. But we can modify requests before they even hit CloudFront. So we fixed client side routing, we can swap out different images, viewer request is also really interesting.

[00:04:31] You can set cookies at this point as well, and figure out if they should get test a or test b. Right, and send them to different resources based on that as well. If they don't have a cookie, maybe you have whatever percentage for the ab test, they do have that one, then you know how to like modify their viewer request based on what they get.

[00:04:48] So then now you don't have to worry about procession. That cookie will always get either the a test or the b test, or something along those lines.