This tutorial will cover the steps required to configure Amazon AWS CloudFront CDN with your Magento website. We will also cover CDN Cache Busting to ensure your customers are seeing the latest version of your content, without needing to manually purge CDN cache or wait for the assets to expire.
This tutorial is relevant for and applicable to:
- Magento 1 Community (CE) & Enterprise (EE)
- Magento 2 Open Source and Commerce
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 want to use a custom domain for your CDN assets then you will also need access to your DNS management, eg. AWS Route 53, 123-reg.co.uk, godaddy.com, etc.
CDN Custom Domain
There are two choices for serving your assets via CloudFront:
- CloudFront Domain: all assets will be served from xxx.cloudfront.net
- Custom Domain: assets can instead be served from something like 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 you can skip this next section and proceed straight to ‘Configure AWS CloudFront’.
AWS ACM SSL Certificate
To serve HTTPS assets via your Custom Domain you will need an AWS Certificate. Within your AWS account, 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.
Configure AWS CloudFront
Within 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. yourdomain.com
- Origin Protocol Policy: Match Viewer
- Default Root Object: enter the path to your company logo, eg. /static/frontend/Magento/luma/en_GB/images/logo.svg
If you want to use a Custom Domain 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.yourdomain.com, media.yourdomain.com
- 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. 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 https://media.yourdomain.com until you see your logo and no security warnings. I’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 the article CORS in Magento 2 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.
If you would like Admin Panel assets to also be served via CDN then you should configure these settings at Default Store scope. Alternatively if you would prefer the Admin Panel to not use CDN, which can be safer if you unsure, then make the change at Website scope.
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
You can implement cache lifetimes and even login to the CDN and trigger a cache purge, 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.
Article originally published on the Absolute Commerce website.