Configuring Cloudfront CDN for Nginx Server in Magento 2: A Step-by-Step Guide

Hello Magento Folks👋, 

In this tutorial, I will help you to learn Magento 2 Configuring Cloudfront CDN for Nginx Server. This article is further configuration (If you are using Nginx server) of our main blog Improve Magento 2 performance with AWS CloudFront.

Steps to Magento 2 Configuring Cloudfront CDN for Nginx Server:

Before configuring this step make sure you follow our last article for setting up my domain set records and CloudFront distributions Improve Magento 2 performance with AWS CloudFront Just you will have to edit your Nginx configuration file before implementing that solution. 

For applying this in our case we just need to permit cross-origin resources for media and static folders in our public folder. 

For that firstly we will create a snippet that will permit CORS by adding the right headers:

Step 1: Run the following command on CLI

sudo nano /etc/nginx/magento2-cors.conf add following code in that file

 # content below:

add_header 'Access-Control-Allow-Origin' '*' 'always';

if ($request_method = 'OPTIONS') {

         add_header 'Access-Control-Allow-Origin' '*' 'always';

    add_header 'Access-Control-Allow-Headers' 'x-requested-with' 'always';

    add_header 'Access-Control-Max-Age' 86400 'always';

    add_header 'Content-Length' 0 'always';

    return 204;

       }

Now, navigate to the Magento folder and edit the file nginx.conf.sample. Now, scroll to the bottom till you locate the given below section. The changes added are mentioned in bold that is referencing the snippet in your above static and media locations:

Step 2: Navigate to your Magento folder and then edit the nginx.conf.sample and edit the following section 

Static:

location /static/ {

 # Uncomment the following line in production mode

 # expires max;

# Remove signature of the static files that is used to overcome the browser cache

 location ~ ^/static/version {

     rewrite ^/static/(version\d*/)?(.*)$ /static/$2 last;

 }

location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2|json)$ {

     add_header Cache-Control “public”;

     add_header X-Frame-Options “SAMEORIGIN”;

     include /etc/nginx/magento2-cors.conf;

     expires +1y;

     if (!-f $request_filename) {

         rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;

     }

}

location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {

    add_header Cache-Control “no-store”;

    add_header X-Frame-Options “SAMEORIGIN”;

    include /etc/nginx/magento2-cors.conf;

    expires off;

    if (!-f $request_filename) {

        rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;

    }

 }

 if (!-f $request_filename) {

     rewrite ^/static/(version\d*/)?(.*)$ /static.php?resource=$2 last;

 }

 add_header X-Frame-Options “SAMEORIGIN”;

 include /etc/nginx/magento2-cors.conf;

}

Media:

location /media/ {

 try_files $uri $uri/ /get.php$is_args$args;

location ~ ^/media/theme_customization/.*\.xml {

 deny all;

 }

location ~* \.(ico|jpg|jpeg|png|gif|svg|js|css|swf|eot|ttf|otf|woff|woff2)$ {

 add_header Cache-Control “public”;

 add_header X-Frame-Options “SAMEORIGIN”;

 include /etc/nginx/magento2-cors.conf;

 expires +1y;

 try_files $uri $uri/ /get.php$is_args$args;

 }

 location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {

 add_header Cache-Control “no-store”;

 add_header X-Frame-Options “SAMEORIGIN”;

 include /etc/nginx/magento2-cors.conf;

 expires off;

 try_files $uri $uri/ /get.php$is_args$args;

 }

 add_header X-Frame-Options “SAMEORIGIN”;

 include /etc/nginx/magento2-cors.conf;

}

Step 3: Now, for testing, you will need to restart Nginx and flush your cache and reset your varnish:

cd /opt/magento/public_html

bin/magento cache:flush

nginx -t

sudo service varnish restart

sudo service nginx restart

Now, navigate to Cloudfront > Distributions, and for both distributions, navigate to invalidation and add /* then invalidate. This will help you to verify that your CDN served static assets are refreshed with the CORS header.

That’s It.

Conclusion:

Hopefully, with the help of the above illustration, you are able to Configure Cloudfront CDN for Nginx Server. In case of any doubts you can reach out at the comment box below I will be happy to help. 

Hit 5 ⭐ stars and share with your Magento business friends. 

Stay connected and Keep Developing.

Happy Reading🙂.

Subscribe to Notifications