Configure AWS Cloudfront CDN for Magento 2

This tutorial will cover all of the steps required to get Amazon AWS CloudFront CDN up and running with your Magento 2 website. We will also cover CDN Cache Busting to ensure you can quickly get the latest version of your content to your customers, without having to manually flush CDN cache or wait for the assets to expire.

Note this tutorial applies to both Magento 1.x and Magento 2.x in both Community CE and Enterprise EE versions.

Sales Pitch

First, an obligatory sales pitch. Absolute Commerce offer as a service and can set up your CDN with Magento2 for you. If you don't feel like doing this yourself or are concerned you maybe in over your head, please get in touch for a quotation.

What you will need

The first thing you will need is an Amazon AWS account. If you don't have one, click this link to register for free with Amazon Web Services.

If you opt for a Custom Domain in the section below you will also need access to your DNS management, eg. AWS Route 53, 123-reg.co.uk, godaddy.com, etc.

CDN Domain Options

There are two choices for serving your assets via CloudFront:

  • CloudFront Domain: all assets will be served by Magento as xxx.cloudfront.net
  • Custom Domain: assets can instead be served by Magento as media.yourdomain.com and static.yourdomain.com

There are some limitations on the latter and it requires a little more configuration, but generally speaking it is the recommended option.

If you opt for the CloudFront domain, please proceed to the 'AWS CloudFront' section.

AWS ACM SSL Certificate

To serve HTTPS assets via your Custom Domain you will need an AWS Certificate. Navigate to Services > Certificate Manager.

Important: you must change your location to US East (N. Virginia), which can be done by selecting the location dropdown in the top right of the screen. Only certificates registered in this location can be used with CloudFront.

Click the button 'Request a Certificate' and enter your three domains: the primary, static and media (the primary domain is not actually required, but makes the UI easier to understand later when selecting your certificate), eg.

  • absolutecommerce.co.uk
  • static.absolutecommerce.co.uk
  • media.absolutecommerce.co.uk

When you click the 'Review and request' button and then the subsequent 'Confirm and request' button an email will be attempted to a number of emails, eg. postmaster@yourdomain.co.uk.

You must open each of the emails received and click the link included to confirm that you are the owner of the domain name.

Once the above is complete, navigate once again to Services > Certificate Manager and you should now have a certificate with Status 'Issued'. This certificate is now ready for use with CloudFront.

AWS CloudFront

Once logged in to your AWS account, navigate to Services > CloudFront. Click the button that says 'Create Distribution' and then on the next page, click the 'Get Started' button under the 'Web' section.

There are a number of ways to configure your CDN and you are free to explore these once up and running. For the sake of this tutorial we will stick mostly to the defaults, so if an option is not mentioned below you can leave it as-is:

  • Origin Domain Name: this is the domain of your Magento website, eg. absolutecommerce.co.uk
  • Origin Protocol Policy: Match Viewer
  • Default Root Object: enter the path to your company logo, eg. /static/frontend/Absolute/website/en_GB/images/absolute-commerce.png

If you want to use your own sub-domains for the CDN then there are a few more values to complete:

  • Alternate Domain Names (CNAMEs): we need a value for static and media content, eg. static.absolutecommerce.co.uk, media.absolutecommerce.co.uk
  • SSL Certificate: select the certificate you created in the previous step

When you are finished, click on the 'Create Distribution' button at the bottom.

AWS will now take some time to fully provision your CDN Distribution, it can take a couple of hours.

If you return to the 'CloudFront Distributions' screen you will see the Status of your Distribution, which will be 'In Progress'. When this becomes 'Deployed' it is ready for use.

Note: if you attempt to access CDN data via an HTTPS link on a custom domain before the Status is 'Deployed', you will likely see an Untrusted SSL Certificate warning. Please wait until your Distribution is 'Deployed' and try again.

Custom domain DNS

This section can be skipped if you opted for the CloudFront Domain in the CDN Domain Options section.

Take a look at your new Distribution and you should see you now have a CDN URL that will look something like xxx.cloudfront.net. Take a note of this value.

Open up the DNS management tool and add two new CNAME records for media.yourdomain.com and static.yourdomain.com to point at your xxx.cloudfront.net value.

This may take a short while to propagate depending on your DNS provider.

The waiting game...

If you selected CloudFront Domain for your CDN Domain Option then you can skip this step.

There may be a short time where you are waiting for your CDN Distribution and/or DNS propagation, so don't change anything in Magento just yet as the website may appear OK to you but not to others in different locations.

The best way to check whether everything is ready or not is to try accessing your https://media.yourdomain.com until you see your logo and no security warnings. We'd recommend waiting at least an hour before proceeding.

Access-Control-Allow-Origin

Since your assets, such as fonts or JavaScript files, are going to be served from a third party domain, you need to 'allow' 'access' to that asset from your website 'origin'. This is quite simple and involves adding a rule to your nginx or apache configuration:

Access-Control-Allow-Origin: '*'

This will allow the CDN to access your assets and avoid any errors in your console, missing fonts, styles, etc.

Please see our CORS in Magento 2 article for further information about configuring Access-Control-Allow-Origin.

Magento System Configuration

The next step is to update your Magento system configuration to point at the new CDN URLs.

Note: it is a good idea to test this using only media URLs first and check for any unexpected results on the frontend. Changing the static URL will effect JavaScript and CSS, making it more difficult to revert any changes.

Magento 1.x

Login to Magento and navigate to System > Configuration > Web.

  • Unsecure > Base Skin URL: http://xxx.cloudfront.net/skin/
  • Unsecure > Base Media URL: http://xxx.cloudfront.net/media/
  • Unsecure > Base JavaScript URL: http://xxx.cloudfront.net/js/
  • Secure > Base Skin URL: https://xxx.cloudfront.net/skin/
  • Secure > Base Media URL: https://xxx.cloudfront.net/media/
  • Secure > Base JavaScript URL: https://xxx.cloudfront.net/js/

Custom Domain:

  • Unsecure > Base Skin URL: http://static.yourdomain.com/skin/
  • Unsecure > Base Media URL: http://media.yourdomain.com/media/
  • Unsecure > Base JavaScript URL: http://static.yourdomain.com/js/
  • Secure > Base Skin URL: https://static.yourdomain.com/skin/
  • Secure > Base Media URL: https://media.yourdomain.com/media/
  • Secure > Base JavaScript URL: https://static.yourdomain.com/js/

Magento 2.x:

Login to Magento and navigate to Stores > Settings > Configuration > Web, and update the following fields:

CloudFront Domain:

  • Base Urls > Base URL for Static View Files: http://xxx.cloudfront.net/static/
  • Base Urls > Base URL for User Media Files: http://xxx.cloudfront.net/media/
  • Base Urls (Secure) > Base URL for Static View Files: https://xxx.cloudfront.net/static/
  • Base Urls (Secure) > Base URL for User Media Files: https://xxx.cloudfront.net/media/

Custom Domain:

  • Base Urls > Base URL for Static View Files: http://static.yourdomain.com/static/
  • Base Urls > Base URL for User Media Files: http://media.yourdomain.com/media/
  • Base Urls (Secure) > Base URL for Static View Files: https://static.yourdomain.com/static/
  • Base Urls (Secure) > Base URL for User Media Files: https://media.yourdomain.com/media/

CDN Cache Busting

Now that you have your Magento instance up and running with CloudFront CDN, or any CDN for that matter, you have a little less control over what version of your images, css and javascript files your customers are seeing. You can implement cache lifetimes and even log in to the CDN and trigger a cache flush. However there is a better way to take complete control and allow for instant clearing of your CDN cache, with the Absolute CDN CacheBust extension.

This extension allows you to use dynamic URLs for your CDN assets, and at the click of a button, or via a command line script, instantly bust your CDN cache ensuring your customers are seeing the latest version of your assets, straight away.

Click here to find out more about the Absolute CDN CacheBust extension.

We're here to help!

As always if you need some assistance or would like us to do this for you, please please get in touch.