HelpPerformance

Implementing CDN on Magento

By 25th June 2019August 13th, 2021No Comments

Once you have configured your DNS, the next step is to configure the application itself to use the CDN.

Add the vhost

For your respective stack and store, add a new vhost in the format "cdn.example.com" (replace example.com accordingly).

Configuring CORS headers

Cross origin headers are essential when serving static content from a different domain to that of your main website; without them the browser will actively block the requests for security.

We recommending configuring the headers on the CDN domain like so,

CDN domain

At the top of cdn.example.com/general/cdn.example.com.conf, include the existing CDN configuration to enable it. If you want to customise the headers, copy the file to a new location and include that new respective file.

# CORS
include /microcloud/domains/example/domains/cdn.example.com/general/cdn.include.conf;

Followed by an Nginx reload.

Then, the final step is to just symlink the document root from the CDN domain to the final domain,

cd /microcloud/domains/example/domains/cdn.example.com
rmdir http
ln -sr /microcloud/domains/example/domains/example.com/http .

Configure the store settings

You should then update the URLs in Magento as follows,

Magento 1

Type Asset URL
Unsecure Media https://cdn.example.com/media/
Unsecure Skin https://cdn.example.com/skin/
Unsecure JS https://cdn.example.com/js/
- - -
Secure Media https://cdn.example.com/media/
Secure Skin https://cdn.example.com/skin/

We do not recommend using a CDN on the secure JS assets as this can cause issues with the checkout and the admin WYSIWYG editor.

Magento 2

Type Asset URL
Unsecure Media https://cdn.example.com/media/
Unsecure Static https://cdn.example.com/static/
- - -
Secure Media https://cdn.example.com/media/

Using a CDN on secure static assets may trigger CORS errors, so we would not recommend it by default. This is because some assets such as fonts (.woff and .woff2 extensions) are loaded from the CSS rather than the HTML, which affects the HTTP referrer value for them.

To work around this, edit your /domains/cdn.example.com/___general/cdn.example.com.conf nginx configuration file as follows:

# CORS
#include /microcloud/data/domains/example/domains/cdn.example.com/___general/cdn.include.conf;

set $cors "https://www.example.com";

if ($request_uri ~* "\.(woff|woff2)") {
  set $cors "*";
}

more_set_headers "Access-Control-Allow-Origin: $cors";
more_set_headers "Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept";

if ($request_method = OPTIONS) {
  return 204;
}

Set the value of the $cors variable to your domain name.

Please note that the CDN may not function correctly with a multistore configuration following this change, since we're setting the value of this $cors variable to a specific domain value.