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
Step 4: Now change the above image code with this code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<code><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> </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:
|
1 2 3 4 |
<code><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></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