4 Steps to Setup Amazon CloudFront CDN in Magento 2

Content Delivery Network (CDN) supports merchants in optimizing page load speed to enhance customers’ experiences. Amazon CloudFront is a fast content delivery network (CDN) provided by Amazon to securely deliver data, videos, applications, and API to customers around the world with low latency, high transfer speeds. By installing Amazon CloudFront CDN in Magento 2, you assist customers in accessing the closest server instead of VPS or Hosting your website. This tutorial will guide you how to set up Amazon CloudFront CDN in 4 steps.

Why use a CloudFront CDN for your AWS-hosted Magento website?

Let’s start by agreeing on why you might want to use a CDN. You most likely already know that CDN stands for “Content Delivery Network.” A Content Delivery Network sends files from your website to different places on the internet so that they can get to the user faster.

When we talk about assets in this case, the first thing that think of are your site’s images. But assets also include things like your site’s CSS and JavaScript. This is especially important when talking about Magento because the app uses a lot of different CSS and JavaScript files by default and will use even more once it is modified. Anything that can be done to get these files to your users faster is a plus.

When you set your site to “default,” everything will come from the web server where it’s stored. This has a few problems:

• Geographic Distance: Users distant from the web server experience latency while fetching assets.
• Unoptimized Delivery: Default web servers may not efficiently deliver images and other assets.
• Domain Bottleneck: Downloading multiple assets from a single domain creates browser wait times.
• Server Load Sensitivity: Image uptime relies on timely response from the potentially stressed web server.

However, CloudFront CDN offers a scientific approach to overcoming inherent performance limitations of Magento websites on AWS, resulting in significant speed, scalability, and reach advantages. So keep reading to find out the quickest and most effective way to set up this Amazon CloudFront CDN in Magento 2.

4 Steps to integrate Amazon CloudFront with Magento 2

• Step 1: Create An AWS Account To Start Setting Up Amazon CloudFront CDN In Magento 2
• Step 2: Create A Distribution
• Step 3: Set Up Access-control-allow-origin For The Static Files And Media
• Step 4: Create A New URL For Static And Media

Step 1: Create An AWS Account To Start Setting Up Amazon CloudFront CDN In Magento 2

After successfully signing up for an account at https://aws.amazon.com/, please activate your account and enter your credit number in the payment section. Then, expand the Service menu and choose CloudFront. if you don’t see Cloudfront, go search for it in the search bar.

After that, click on the Create Distribution button.

Step 2: Create A Distribution

Choose one delivery method (Web or RTMP) that is most suitable for your situation. Then, click to the Get Started button. Here, I select the Web as the delivery method.

1. In the Origin Settings tab, take the following actions:
   • Origin Domain name: Enter your domain website
   • Origin Path: Enter the path of static. At your Magento website, two relevant Distributions for Static and Media folders need to be created. For example: /pub/static
   • Origin Protocol Policy: Select the origin protocol policy based on your web setting. If your Magento website is using SSL, please select HTTPS only. However, if you want both HTTP and HTTPS to be compatible with Distribution, please choose Match Viewer instead.

1. In the Default Cache Behavior Settings tab, take the following sections:

• Viewer Protocol Policy: Select the policy you want the viewers to use to access your content. From our view, you should use the Viewer Protocol Policy relevant to Origin Protocol Policy.

• Allowed HTTP Methods: Select suitable methods. From our view, the last option GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE is the most compatible with your Magento website.

1. In the Distribution Settings tab, take the following actions:

In Alternate Domain Names (CNAMEs) field: Enter the subdomain which you want to use to replace the domain name. If you choose this option, you need to access the configuration of the domain then insert the subdomain pointing to (.cloudfront.net).

To add an alternate domain name to a CloudFront distribution, you need to attach a trusted certificate that validates your authorization to use the domain name.

Finally, click on the Create Distribution button

Now, you need to wait for around 15 to 40 minutes for CloudFront service to complete the deployment. Then, you will see the following display:

Click to the relevant ID link to check the details of the distribution created.

You can access the links to review whether the settings are successful or not. For instance:

• Origin path: https://mageplaza.net/pub/static/version158642331/frontend/Magento/luma/en_US/mage/calendar.css
• The origin path https://mageplaza.net/pub/static/ will be replaced with the domain name created at the CloudFront http://d5472poob0l2.cloudfront.net.
• Please access to check: http://d5472poob0l2.cloudfront.net/version1543319270/frontend/Magento/luma/en_US/mage/calendar.css

Image

• If there is no difference between the file content and the origin file, you have set up Amazon CloudFront CDN successfully.
• In case you want to change the domain http://d5472poob0l2.cloudfront.net into the subdomain of your Magento 2 website, please navigate to the configuration of the domain and create a CNAME of the subdomain pointing to the above domain:

Then check the assessment to https://static.mageplaza.net/version158642331/frontend/Magento/luma/en_US/mage/calendar.css

Step 3: Set Up Access-control-allow-origin For The Static Files And Media

pub/static

The path to change the configuration of pub/static is pub/static/.htaccess

The origin file

<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Please change to

<IfModule mod_headers.c>
<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|html|json)$>
   Header set Cache-Control "max-age=604800, public"
   Header set Access-Control-Allow-Origin "*"
   Header set Access-Control-Allow-Methods "GET, OPTIONS"
   Header set Access-Control-Max-Age "604800"
   Header set Access-Control-Allow-Headers "Host, Content-Type, Origin, Accept"
</FilesMatch>
   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Please note that the html and json extensions will be changed by the extension of the file. Hence, you need to review the configuration Catalog Store, which may relate to security issues, to ensure that the html extension works.

pub/media

Please use the path pub/media/.htaccess to change the header of media files.

The original file is as follows:

<IfModule mod_headers.c>
   <FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
       Header append Cache-Control public
   </FilesMatch>
   <FilesMatch .*\.(zip|gz|gzip|bz2|csv|xml)$>
       Header append Cache-Control no-store
   </FilesMatch>
</IfModule>

Please change the content of <IfModule mod_headers.c> into:

<FilesMatch .*\.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$>
   Header append Cache-Control max-age=604800
   Header set Access-Control-Allow-Origin "*"
</FilesMatch>

After modifying the configurations of pub/static and pub/media, your Magento 2 website is ready for the new distribution of static files and media from Amazon CloudFront.

Step 4: Create A New URL For Static And Media

Please navigate to Configuration > Web > Base URLs and Base URLs (Secure). Enter the domain created into the Base URL for Static View Files and Base URL for User Media Files.

After following the above instructions, you have almost finished the process of setting up AWS CloudFront CDN for Magento 2. Remember to save all configuration files and clear the cache Go to the Homepage to check the result. Thanks to Amazon CloudFront, all statistical files and media are replaced with the new domain. After setting up Amazon CloudFront in Magento 2, the loading page is improved immediately.

Conclusions

These are 4 steps to integrate the Amazon CloudFront CDN with Magento 2. If you have questions on any steps, don’t hesitate to contact us. Improving the speed and the performance of your website means enhancing the customer experience as a result, accelerating sales significantly. With the support of Amazon CloudFront, this task might be solved soundly and quickly. We also have another guideline in case you use the Cloudflare CDN.

Explore Magento 2 extensions now!