⚡ 𝐋𝐞𝐭'𝐬 𝐃𝐞𝐬𝐢𝐠𝐧 𝐘𝐨𝐮𝐫 𝐎𝐰𝐧 𝐂𝐥𝐨𝐮𝐝𝐢𝐧𝐚𝐫𝐲 (𝐈𝐦𝐚𝐠𝐞 𝐎𝐩𝐭𝐢𝐦𝐢𝐳𝐚𝐭𝐢𝐨𝐧 𝐎𝐧 𝐭𝐡𝐞 𝐆𝐎): 𝐀 𝐕𝐞𝐫𝐲 𝐒𝐢𝐦𝐩𝐥𝐞 𝐄𝐱𝐩𝐥𝐚𝐧𝐚𝐭𝐢𝐨𝐧 ⚡

Image Optimization using Amazon CloudFront and AWS Lambda.

𝐓𝐞𝐜𝐡 𝐒𝐭𝐚𝐜𝐤𝐬 🔥 :

1. AWS CloudFront

2. AWS S3

3. AWS Lambda

4. CloudFront Functions

𝐄𝐱𝐩𝐥𝐚𝐢𝐧𝐢𝐧𝐠 𝐀𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞:

1. The user sends a HTTP request for an image with specific transformations, such as encoding and size. For ex: https://lnkd.in/gbsRSvwv

2. The request is processed by a nearby CloudFront edge location providing the best performance. Before passing the request upstream, a CloudFront Function is executed on viewer request event to rewrite the request URL.

3. If the requested image is already cached in CloudFront then there will be a cache hit and the image is returned from CloudFront cache.

4. If the Image is not in CloudFront cache, then the request will be forwarded to an S3 bucket, which is created to store the transformed images. If the requested image is already transformed and stored in S3, then it is simply served and cached in CloudFront.

5. Otherwise, S3 will respond with a 403 error code, which is detected by CloudFront’s Origin Failover. CloudFront retries the same URL but this time using the secondary origin based on Lambda function URL. When invoked, the Lambda function downloads the original image from another S3 bucket, where original images are stored, transforms it using Sharp library, stores the transformed image in S3, then serve it through CloudFront where it will be cached for future requests.

𝐖𝐨𝐚𝐡, 𝐖𝐞 𝐣𝐮𝐬𝐭 𝐟𝐢𝐧𝐢𝐬𝐡𝐞𝐝 𝐭𝐡𝐞 𝐝𝐞𝐬𝐢𝐠𝐧𝐢𝐧𝐠 𝐭𝐡𝐞 𝐂𝐥𝐨𝐮𝐝𝐢𝐧𝐚𝐫𝐲! 𝐘𝐞𝐚𝐡, 𝐢𝐭 𝐰𝐚𝐬 𝐞𝐚𝐬𝐲 𝐝𝐨𝐞𝐬𝐧'𝐭 𝐢𝐭 😇.

𝐇𝐞𝐫𝐞'𝐬 𝐚 𝐟𝐮𝐥𝐥 𝐛𝐥𝐨𝐠 𝐢𝐧 𝐝𝐞𝐭𝐚𝐢𝐥: https://aws.amazon.com/blogs/networking-and-content-delivery/image-optimization-using-amazon-cloudfront-and-aws-lambda/