- Joseph McDermott, 25th February 2018
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.
There are two choices for serving your assets via CloudFront:
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.
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. email@example.com.
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:
If you want to use your own sub-domains for the CDN then there are a few more values to complete:
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.
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.
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.
Please see our CORS in Magento 2 article for further information about configuring Access-Control-Allow-Origin.
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.
Login to Magento and navigate to Stores > Settings > Configuration > Web, and update the following fields:
As always if you need some assistance or would like us to do this for you, please please get in touch.