Enable Amazon Cloudfront CDN in Magento

If you want to speedup the loading time of your Magento store, then configuring a CDN for loading static assets is always a preferred option. So the static resources like images, JavaScript and CSS files will be loaded from a third party CDN rather than from your server. This will increase the page load time of your Magento store. I we talk about the good options for CDN then I believe Amazon Cloudfront is the beast of all.
In this article I will tell you how to enable amazon cloudfront CDN in magento.

1. Go to https://aws.amazon.com/cloudfront/ and create your free account there.
2. Go to AWS console https://us-west-2.console.aws.amazon.com/console/home and select CloudFront:

Amazon CloudFront in Magento

 

3. Now you need to create a “Distribution” for your store:
Amazon CloudFront in Magento

 

4. For the delivery method, select “web”:
Amazon CloudFront in Magento

 

5. Now fill in the necessary details of your online store:
Amazon CloudFront in Magento

“Origin Domain Name”, which is the domain name of your store is the only required option. You can leave other fields as it is for starting.

6. Click on “Create Distribution”. It will take you to the Distribution listing page and will show all distributions you have created so far.
Amazon CloudFront in Magento

 

7. Initially the status of new distribution will be “In Progress”. Within few minutes, the status of new distribution will be changed to “Deployed”, it means distribution is ready for use on production.
Amazon CloudFront in Magento

 

8. Now click on Distribution ID and copy the “Domain Name”. It is the default domain name that Amazon has created for you. If you want your own subdomain instead of cloudfront domain, you can fill the Cname records of your domain.
Amazon CloudFront in Magento

Now our Amazon CloudFront CDN is ready to use. Now go to your Magento admin panel. Then go to System -> Configuration -> Web. Now we have an important point to note here. We should not use the CDN for all website including admin part od the store. If we do so, we may face some JavaScript Cross Origin issues while loading the wysiwyg editor in admin panel. To avoid this, we will configure CDN only for the frontend website.
1. Change the “Current configuration Scope” to “Main Website”.
2. Now in “General -> Web” tab change the base urls for skin, media and JavaScript as shown in below image. Note that this is the URL that we copied from CloudFront panel in step 8 above.
Amazon CloudFront in Magento
3. Change the base URLs as:
Skin: https://xxxxx.cloudfront.net/skin/
Media: https://xxxxx.cloudfront.net/media/
JavaScript: https://xxxxx.cloudfront.net/js/
4. Save the configuration and you are ready to go!

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

2 thoughts on “Enable Amazon Cloudfront CDN in Magento

  1. Great tutorial Ranjan. Do you think Cloudfront is a better CDN than Cloudflare? I am currently using Cloudflare on my PHP site because it can be easily enable from the Cloudways platform I am using. But I was wondering if there is a better CDN provider that can further reduce the load time of my website and caches more pages?

Comments are closed.