Contact us: +91 9010449276 | Email Us: info@hackrons.com
how to integrate aws cloudfront cdn with magento 2.3?

how to integrate aws cloudfront cdn with magento 2.3?

This tutorial will help you to integrate your CloudFront CDN with Magento 2.

AWS Content Delivery Network (CDN):

Amazon CloudFront is a Content Delivery Network (CDN) provided by the Amazon Web Services. CDN (content delivery network) provides a globally distributed network of proxy server which cache content, Such as static files, images, videos which are internally access to the web thus increases the access speed for downloading content. On integrating Magento 2 with CDN (CloudFront), you can see the better performance and customers can access the closest server instead of Hosting or VPS of your Magento Online store.

In this tutorial, I will show you how to integrate CloudFront CDN AWS with Magento 2 in few steps, as below:

  • First login into your AWS Console account or if you don’t have any account then create an account to set up the CloudFront CDN with Magento 2
  • Click on CloudFront in services
  • Create a distribution
  • Setup access control allow origin for the static files and media
  • Create a new URL for static and media or you can use the default URL which is generated by default

Here you go by creating an account on AWS console to setup AWS CDN (CloudFront) for Magento 2:

Once successfully you created an account at https://aws.amazon.com/ please activate your account and update with your billing information with verification in the payment section.

Then go to the services menu and click on the CloudFront.

services menu and click on cloudfront

It will redirect to the Cloundfront Distribution page. Then here you have to create a distribution by click on the Create Distribution button.

Cloundfront Distribution page

Next, Create a distribution:

Select a delivery method for your content.

Web:

This method is for speeding up the distribution of static, media files, CSS, js, HTML and graphic files. And this is usually access through HTTP or HTTPS.

RTMP:

Create an RTMP distribution to speed up distribution of your streaming media files using Adobe Flash Media Server’s RTMP protocol. An RTMP distribution allows an end-user to begin playing a media file before the file has finished downloading from a CloudFront edge location.

Create a distribution

Then click on get started to button it will redirect to create distribution page here you can set up the distribution

Next, go to the Origin settings tab:
– Origin Domain Name – Insert your domain name of the website
– Origin Path – enter the path of static. Remember to create two relevant Distributions for Static and Media folders at your Magento website. For example: /pub/static

– Origin ID – It will automatically create when you entered the origin domain name
– Origin Protocol Policy – It depends on your web settings. If your Magento 2 website is using SSL, please choose HTTPS only. However, you want Distribution to be compatible with both HTTP and HTTPS, then select Match Viewer instead.

Next go to Origin settings tab

In the Default Cache Behavior Settings tab:

Viewer Protocol Policy – Choose the policy you want viewers to use to access your content. We recommend using the Viewer Protocol Policy relevant to Origin Protocol Policy.
Allowed HTTP Methods – Choose suitable methods. We recommend selecting the last option GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE to compatible with your Magento 2 website the most.
Default Cache Behavior Settings tab

 

In the Distribution Settings tab:

Alternate Domain Names (CNAMEs) – Enter the subdomain you want to replace the domain name (* .cloudfront.net). If you select this option you need to access the configuration of the domain then add the subdomain pointing to (* .cloudfront.net)

Here I am using default CloudFront URL

Distribution Settings tab

Then the Final one to click on the create distribution.

It typically takes around 30 to 45 minutes for CloudFront to complete the deployment. After that, you can see the status and state be like the following.

CloudFront to complete the deployment

CloudFront to complete the deployment

The successful creation of distribution in setting up Amazon CDN (CloudFront) for Magento 2

Click on the relevant ID link to check the detail of the distribution created.

You can access to review whether the settings are proper. For example:

Origin Path:

  • http://solexcatsmo.com/pub/static/version1543319270/frontend/Magento/luma/en_US/mage/calendar.css
    The domain name created at the CloudFront http://d4823dpoob0l1.cloudfront.net will replace the origin path
  • http://solexcatsmo.com/pub/static
    Please access to check:
  • http://d4823dpoob0l1.cloudfront.net/version1543319270/frontend/Magento/luma/en_US/mage/calendar.cssIf the file content is the same as the origin file, then you have set up Amazon CloudFront successfully.

ID link to check the detail of the distribution created

In case you want to replace the domain http://d1wv8ru12bvjkv.cloudfront.net with the subdomain of your Magento 2 website, please access the configuration of the domain and create a CNAME of the subdomain pointing to the above domain

But I added default CloudFront CDN URL: http://d1wv8ru12bvjkv.cloudfront.net
You should add this URL in Magento website static URLs for both HTTP & HTTPS

Configure the Base URL
– On the Admin Panel, Stores > Settings > Configuration.
– On the left panel, under General, select Web.
– Open the Base URL section,
Fill the Base URL for the store, however, the URL needs to end with a forward slash to extend the link with the additional URL later. For example,

Configure the Base URL

Then check the access to http://d1wv8ru12bvjkv.cloudfront.net/version1543319270/frontend/Magento/luma/en_US/mage/logo.png

Next Step Set up Access-Control-Allow-Origin for the static files and media

Go to the root directory of Magento then open the pub/static
The path to modify the configuration of pub/static is pub/static/.htaccess

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 replace with

<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 follow:

<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.

Please refresh the cache and try to access the website.

Last & final step: Create a New URL for Static and Media

Probably it works for both by using the default or you can create another distribution with media and follow the same steps for media CDN URL.

Set Base URL for Static View Files and Base URL for User Media Files to the domain created.

Configure the Base URL

  • On the Admin Panel, Stores > Settings > Configuration.
  • On the left panel, under General, select Web.
  • Open the Base URL section,
  • Fill the Base URL for the store, however, the URL needs to end with a forward slash to extend the link with the additional URL later. For example,

Here I am using the default URL for both of them in both static and media fields.

Follow above, you have almost finished setting up AWS CloudFront CDN for Magento 2. Just one more step to be done.

Save all configurations files and clear the cache.

Access the homepage to check the result. All static files and media are replaced with the new domain through Amazon CloudFront.

You view this part in the source.

After setting up Amazon CloudFront for Magento 2, you can immediately see the improvement in the loading page.

After setting up Amazon CloudFront for Magento 2, you can immediately see the improvement in loading page.

speeding up website performance means creating the customer experience and as a result, Increasing sales significantly. Before this article, this task might be hard. But by integrating Amazon CDN (CloudFront) in your Magento 2, it is solved quickly and soundly.

If you have any doubts or need clarifications you just comment below. Don’t forget to subscribe to our blog for the latest updates and information on technology.

Our new post on Magento refers to this link: How to install magento2.x extension or module

Leave a Reply

Close Menu