How to Configure Magento 2 With AWS CloudFront

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.

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.

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:

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

.htaccess file in /pub/media

Step 4: Now change the above image code with this 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/static
Base URL for media View Files: http://xxxx.clloudfront.net/media

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

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

For further any help or query, please contact us


Category(s) Uncategorized
. . .

Comment

Add Your Comment

Be the first to comment.

css.php