Skip to main content

Static Assets Subdomain

Important

Please note, it is no longer required to carry these manual steps to configure a static or media domain to serve assets for MDOQ Managed Magento Hosting. MDOQ will automatically detect and configure additional asset domains.
You can still customize this process as described below, but it is not required.

 

 

Introduction

In this guide we are to walk through the process of setting up a separate sub domain for static assets. This can be very useful when using third party CDNs. In this example we are going to pretend we have the site www.example.com and we want to configure the domain static.example.com. We will configure it so that we are responding with the correct CORS headers so that we don't get any CORS options. For you to be able to complete this activity you must already have configured your DNS so that your new subdomain points to the same location as your current site. This guide will take you through the steps required to achieve this on MDOQ though if you're not hosted with MDOQ the Nginx and Magento configuration will still be the same.

Configuration

  1. To begin with you need create a development instance to work on.
  2. Once the instance is ready open the code editor and expand the director mdoq/nginx

  3. In the generated directory create the file cors_shared.conf

    map $http_origin $cors_allow_origin {
 default https://www.example.com;
 https://www.example.com https://www.example.com;
 https://www-example-com-99999.50.mdoq.io https://www-example-com-99999.50.mdoq.io;
}

    This file creates a variable called $cors_allow_origin which contains the value we have mapped to it. The map works by looking at the origin of the request, if it finds a match in the list on the left hand side, it assigns $cors_allow_origin the value of the right hand side. If a match is not found it assigns the default value in this case https://www.example.com (line 2) On lines 4 and 5 we declare the same configuration for our instance so we can test it. We haven't configured a static url for the instance in Magento yet, but we can work it out by replacing www with static. This way when we change the configuration in Magento, it will "just work"

  4. In the templates directory create the file default_https.conf With the content 
    add_header 'Vary' 'Origin' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Origin' '$cors_allow_origin' always;
add_header 'Access-Control-Allow-Methods' 'GET, OPTIONS' always;
add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken,Keep-Alive,X-Requested-With,If-Modified-Since';

  5. Open the file default_site.conf and look for the following:

    location /static/ {
 {{#is_production}}
 expires max;
 {{/is_production}}

 # Remove signature of the static files that is used to overcome the browser cache
 location ~ ^/static/version {
     rewrite ^/static/(version[^/]+/)?(.*)$ /static/$2 last;
 }

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

     if ($request_method = "OPTIONS") {
         add_header Content-Type text/plain;
         return 200;
     }

     add_header Cache-Control "public";
     add_header X-Frame-Options "SAMEORIGIN";
     expires +1y;

     if (!-f $request_filename) {
         rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
     }
 }

 location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {
     add_header Cache-Control "no-store";
     add_header X-Frame-Options "SAMEORIGIN";
     expires    off;

     if (!-f $request_filename) {
         rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
      }
 }
 if (!-f $request_filename) {
     rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
 }
 add_header X-Frame-Options "SAMEORIGIN";
}

    You can then replace this whole block with:

    location /static/ {
 {{#is_production}}
 expires max;
 {{/is_production}}

 # Remove signature of the static files that is used to overcome the browser cache
 location ~ ^/static/version {
     rewrite ^/static/(version[^/]+/)?(.*)$ /static/$2 last;
 }

 if ($request_method = "OPTIONS") {
     add_header Content-Type text/plain;
     return 200;
 }

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

     if ($request_method = "OPTIONS") {
         add_header Content-Type text/plain;
         return 200;
     }

     add_header Cache-Control "public";
     add_header X-Frame-Options "SAMEORIGIN";
     expires +1y;

     if (!-f $request_filename) {
         rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
     }
 }

 location ~* \.(zip|gz|gzip|bz2|csv|xml)$ {
     add_header Cache-Control "no-store";
     add_header X-Frame-Options "SAMEORIGIN";
     expires    off;

     if (!-f $request_filename) {
         rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
     }
 }
 if (!-f $request_filename) {
     rewrite ^/static/?(.*)$ /static.php?resource=$1 last;
 }
 add_header X-Frame-Options "SAMEORIGIN";
}
  6. You then need to syncrhonize Site Nginx
  7. Once complete we can log in our instance and setup up the static domain within Magento.
    • Log into the admin.
    • Navigate to "Stores" > "Configuration" > "General" > "Web".
    • We can then use the Base Url to work out what Base URL for Static View File should be in this case I have https://www-example-com-99999.50.mdoq.io/ so my static url will be https://static-example-com-9999.50.mdoq.io/static/.
    • We also need to do the same for Secure Base URL => Secure Base URL for Static View Files
    • Click "Save Config"
    • Flush Configuration cache.
  8. You then need to test your instance, bot front and backend making sure all is working as expected.
  9. Make sure the file .gitignore contains the recommended additions
  10. Add the following to the bottom of the .gitignore file 
    !/mdoq/nginx/generated/cors_shared.conf
  11. Once you are happy all is well you will then need to commit to source control the following files:
    • mdoq/nginx/generated/cors_shared.conf
    • mdoq/nginx/templates/default_https.conf
    • mdoq/nginx/templates/default_site.conf
  12. With these files committed then need to deploy this to production
  13. Once the work is live you will need to syncrhonize Site Nginx on the production site. This will cause downtime whilst the configuration is applied
  14. Configure the static domain within the production Magento admin. (As you did in step 6)

With that done you should now be serving assets from the new static. subdomain.

Additional Notes

More subdomains

The generated/cors_shared.conf file can be expanded to include as many domains as you want. For example.

map $http_origin $cors_allow_origin {
  default https://www.example.com;
  https://www.example1.com https://www.example1.com;
  https://www.example2.com https://www.example2.com;
  https://www.example3.com https://www.example2.com;
}

Using a third party CDN

Once completing this guide you are then able to setup a thrid party CDN such as StackPath If you have the option of passing a "Host Header" on to the origin, make sure it is for "static." (or whatever your asset domain is). Passing a "Host Header" of "www." will not work. (As you won't hit the default config, you would hit the config for the www site).

Related articles

Powered by Zendesk