How to Configure Magento 2 With AWS CloudFront

Piyush Mittal

30 October 2020

What is AWS CloudFront?

AWS CloudFront is a Content delivery network (CDN) web service provided by AWS to speeds up your dynamic and static web content like, .html, .css, .js, and image files, to your Magento 2 Store users. CloudFront usage edge locations to delivers your content to your users with lower latency (time delay), with this content is delivered with the best possible performance and if your content already cached in the edge location, CloudFront replies the user request for content immediately.

It is Fast, Simple, Cost Effective Service Provided by AWS
It is compatible with other AWS service such as AWS Lambda
It supports HTTP/2 version

Steps for Magento 2 Configuration with AWS CloudFront

Step 1: Open Aws Console

Step 2: Go to Services located at Top Strip

Step 3: Search For CloudFront or go to Networking Section in the service list you have found CloudFront

Step 4: Click on CloudFront

Step 5: Click on Create Distribution

Step 6: In Web Distribution Section click on Get Started

Note: If you want to deliver both static and media content through CloudFront you have to create the separate distribution for both static and media assets. However, please note that while creating media distribution your origin path should be – /pub/media

Step 7: Fill all the required details shown in the below pictures.

In origin ID path you can also put your custom URL such as, static.yourdomain.com

In Origin Protocol Policy: Choose the policy according your web settings, if your Magento Site using SSL then choose “HTTPS only” if you want Both HTTP and HTTPS then choose “Match Viewer” as shown in the above image.

Choose Default Cache Behavior, In viewer Protocol Policy Choose HTTP and HTTPS for better Results

In allowed HTTP Method, Choose GET,HEAD,OPTIONS,PUT,POST,PATCH,DELETE this method is relevant for Magento Store.

Add the behavior settings for both distributions i.e. media and static with the following settings

Choose Default CloudFront Certificate for your HTTP or HTTPS

Now make all the settings default in the cloudFront and make sure Distribution State is enable.

Your Distribution successfully Created as shown in the above Image

Configure Access-Control-Allow-Origin

For configure ACAO we have to make changes in static and media directory found in the pub director of Magento 2 directory.

The pub/static configuration settings

Step 1: Open Your /magento/root/directory

Step 2: Now Run this command

#nano /pub/static/.htaccess

Step 3: Search the below image instructions in your “.htaccess” file

*.htaccess file in /pub/static directory*

Step 4: Now change the above image code with this code:

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>

Header append Cache-Control no-store

</FilesMatch>

</IfModule>

</code>

Step 5: Save and Exit

The pub/media configuration settings

Step 1: Open Your /magento/root/directory

Step 2: Now Run this command –

#nano /pub/media/.htaccess

Step 3: Search the below image instructions in your “.htaccess” file

Step 4: Now change the above image code with this code:

Header append Cache-Control max-age=604800

Header set Access-Control-Allow-Origin "*"

</FilesMatch></code>

Step 5: Save and Exit

Configure Magento 2 For CloudFront

Go to: Store>Configurations>Web>Base URLs (both secure and unsecure section)

In this section you have to put your CloudFront domain
Base URL for static View Files: http://xxxx.cloudfront.net
Base URL for media View Files: http://xxxx.clloudfront.net

For Custom URLs
Base URL for static View Files: http://xxxx.yourdomainname.com
Base URL for Static View Files: http://xxxx.yourdomainname.com

Note: After all this configuration you need to clear your installation cache from server to apply all the changes we have done in this blog to see the results on your front end of your site
Now you are Good To Go