Part 1: Set up
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.
- 'Alternate Domain Names (CNAME)' is the url where you want your site to pull content from: cdn.your-magento-site.com, or similar:
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:
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