Magento 2 CDN on AWS for regional stores

We moved a furniture store’s Magento 2 media to Amazon S3 and put a CloudFront CDN in front of it. A Lambda@Edge function resizes each image on the first request and serves AVIF or WebP to browsers that accept them. Every regional website now reads customer photos from one shared library. The Magento servers no longer resize images.

The client

The client sells furniture online through several regional Magento 2 websites. Each region has its own language, and the catalogue overlaps across regions.

We built a gallery module for them where customers share photos of products in their own homes. A sofa in a real living room helps the next shopper decide. The photos are worth the most when every regional website can show them.

The problem

The store kept its media on the Magento server’s disk. That setup had three costs.

• Each regional website needed its own copy of the shared photos.
• Magento resized images on the same server that runs the cart and the checkout.
• Every image travelled to the shopper from that one server.

Content specialists had to repeat the same photo import for each region.

What we built

One media library in S3

The media moved to S3 buckets in the region where the store’s servers run. Magento connects to several buckets, so the shared customer photos live in one place. Each regional website shows them with titles and descriptions in its own language. A content specialist imports a photo page once, and every region gets it.

S3 versioning keeps the earlier copy of a file when someone overwrites or deletes it.

CloudFront with Lambda@Edge

CloudFront serves the images from the edge location closest to each shopper. Origin Shield sits in the region closest to the bucket and cuts repeat requests to S3.

A Lambda@Edge function written in JavaScript resizes each image with the Sharp library. It reads the browser’s Accept header and picks AVIF, WebP or the original format. The chosen format is part of the cache key, so CloudFront keeps one copy per format. The function accepts only the image sizes the theme uses. Nobody can fill the bucket with random sizes.

Infrastructure as code

We described the setup in AWS CloudFormation. Each store gets the same buckets, permissions, distribution and functions on demand.

Our guide to Magento 2 images on S3 and CloudFront has the full configuration with the Magento commands and admin settings.

Problems we solved during the move

A sync that could not finish in a maintenance window

bin/magento remote-storage:sync uploads one file at a time. It cannot resume if it stops part of the way through. We copy the media with aws s3 sync and parallel requests instead. After the copy, Magento uploads only the files that change.

The admin captcha

Magento writes captcha images to the local disk on purpose. After the move the browser asked CloudFront for a captcha that existed only on the server. A CloudFront behaviour now routes the captcha/ path to the server’s origin, and admins log in as before.

The result

• One photo library for every region. Content specialists import a photo page once instead of once per website.
• Smaller images. Browsers that accept AVIF or WebP get them, at the size the page shows.
• Less work for Magento. The servers run the store, and CloudFront with Lambda@Edge handles the images.
• Media history. S3 versioning keeps an earlier copy of each changed file.

Plan your own Magento 2 CDN

A performance audit shows how much of your page weight comes from images. To move your media to a CDN, tell us about your store.