Skip to main content

Integrating Magento with Amazon’s CDN Cloudfront

Mar 14 '14

Part 1: Set up

Speeding up websites can be a daunting task, and one of the easy wins is setting up your Magento store to use Amazon's Cloudfront Content Delivery Network to serve images, css and Javascript.

Cloudfront caches content on servers across the entire world, and serves content to your customers based on their location, in order to reduce network transit time, resulting in an overall faster page load. It's low cost, takes a little bit of load off your server, allows for content to be served over SSL, and works very well.

In order to set up Cloudfront correctly, you'll need an AWS account. Once you've set up your account, go to your AWS Management Console and select Cloudfront, and then click 'Create distribution.' This will start the process of creating a custom CDN for your Magento site.

You'll want to create a 'Web' distribution in order to 'Speed up distribution of static and dynamic content.' The essential fields to creating the distribution are:

  • Origin Domain Name - this is your site - the one Cloudfront will pull content from if it's not already cached in the CDN The Origin ID is an Amazon internal ID, it won't be used except to identify the distribution, but should be unique.
amazon cloudfront settings
  • 'Alternate Domain Names (CNAME)' is the url where you want your site to pull content from: cdn.your-magento-site.com, or similar:

distribution settings

Click 'Create distribution' and Cloudfront will start creating your CDN. The next step is to configure your DNS - go to the distribution you just created (it's ok for it to still be 'In Progress') and find the Cloudfront specific domain name - usually something like abc1235asqf.cloudfront.net. You'll need to take that domain name and with your DNS provider, configure a CNAME to point from http://cdn.your-magento-site to the Cloudfront domain name.

Once you have Cloudfront properly configured and the CNAME has propagated, you can test it by loading an image from your site into a browser (http://www.your-magento-site.com/media/catalog/blue-plate.jpg) but using the url from Cloudfront (http://cdn.your-magento-site.com/media/catalog/blue-plate.jpg). You should see the image load correctly in the browser, with an additional Response header of 'Via:1.1 abc123asqf.cloudfront.net (CloudFront).'

If the test works, the next step is to update your Magento system configuration in order to use Cloudfront. Navigate to System > Configuration > General > Web, and you'll see an area called Unsecure, with these settings:

magento cloudfront settings

You're going to change the Base Skin Url, Base Media Url and Base JavaScript URL settings to point to your new Cloudfront CDN CNAME:

magento cloudfront settings 2 unsecure

Once you've saved this configuration, any requests to your-magento-site.com for images, css or javascript are routed to the newly configured CDN urls. If a request object doesn't exist on Cloudfront, Cloudfront will go to it's origin server (you're regular site) fetch the object and cache it across all of the Cloudfront servers.

Ok, I've done all that, and it looks great and is working well, but why can't I upload images through the admin any more?

So here's the gotcha - some elements of the image uploader and the wysiwyg content editor image uploaders are served from within your 'skin' directory - which is now served from Cloudfront, and will start throwing cross domain errors. One solution is to simply keep the admin section's assets out of Cloudfront.

The Unsecure URL settings configured above are global - they affect all the stores and the admin area. In order to disable Cloudfront on the admin, but keep it for the website, you need to revert the changes above, change the scope of your configuration to Main Website (top left), uncheck the ‘Use Default’ settings, and then add in the Cloudfront urls there.

Once you save those settings, your store will be using Cloudfront, your admin will use the base url, and your image uploaders and wysiwyg editors will function normally.

Congratulations on configuring your Magento store to use Cloudfront - tune in next time for Part 2: Cache busting, and Part 3: SSL