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.
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.
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.
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. firstname.lastname@example.org.
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.
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.
This will allow the CDN to access your assets and avoid any errors in your console, missing fonts, styles, etc.
Magento System Configuration
The next step is to update your Magento system configuration to point at the new CDN URLs.
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/
Secure > Base Skin URL: https://xxx.cloudfront.net/skin/
Secure > Base Media URL: https://xxx.cloudfront.net/media/
Unsecure > Base Skin URL: http://static.yourdomain.com/skin/
Unsecure > Base Media URL: http://media.yourdomain.com/media/
Secure > Base Skin URL: https://static.yourdomain.com/skin/
Secure > Base Media URL: https://media.yourdomain.com/media/
Login to Magento and navigate to Stores > Settings > Configuration > Web, and update the following fields:
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/
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
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.