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 of your website.
In this article, I will show you how to integrate Amazon CloudFront with Magento 2 through 4 steps, as below:
After successfully signing up 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. After that, click to the Create Distribution button.
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.
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.
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)
Finally, click to 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 detail of the distribution created.
You can access the links to review whether the settings are successful or not. For instance:
Then check the assess to https://static.mageplaza.net/version158642331/frontend/Magento/luma/en_US/mage/calendar.css
The path to change the configuration of pub/static is
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.
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 navigate to Configuration > Web > Base URLs and Base URLs (Secure). Enter the domain created into Base URL for Static View Files and Base URL for User Media Files.
Following the above instructions, now, you have almost finished the process of setting up AWS CloudFront CDN for Magento 2. Remember to save all configurations file and clear the cache Go to the Homepage to check the result. Thanks to Amazon CloudFront, all statistic files and media are replaced with the new domain. After setting up Amazon CloudFront in Magento 2, the loading page is improved immediately.
Above is the details instruction of integrating 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 experiences and as a result, accelerating sales significantly. With the support of Amazon CloudFront, this task might be solved soundly and quickly.
It comes to the end of the tutorial: 4 Steps To Setup Amazon CloudFront CDN In Magento 2.
Posted by Jacker in Magento 2 Tutorials . May 29, 2019