[For 1.8] Using a CDN with MyBB 1.8.0

[Euan T]

MyBB 1.8.0 brings built in CDN compatibility to MyBB for the first time. This feature allows the loading of static files such as javaScript, CSS and images from a CDN of your choice. In this tutorial I will guide you through the basic setup steps.


Note that as of 1.8.0, only the basic “pull” type CDNs are supported. This may change in the future.

Setting up your domains/subdomains

The first step to using a CDN is to set up a subdomain to use. In my case, this subdomain is “s.mybbstuff.com”. All the files for this subdomain live in the following path: “/home/euan/webapps/s_mybbstuff_com/“.

Once you have created this subdomain, you should copy your current static files to it. Below is a list of the folders/files you will need to copy across in a default install:

• cache/themes/*
  
• images/*
  
• uploads/*
  
• jscripts/*
  

Configuring your CDN

You should now be able to access your stylesheets from the subdomain you specified earlier, so it’s now time to configure your actual CDN. You should pick a provider that you prefer, but for the purposes of this guide I am using cdn.net. Once you have signed up for an account t with your provider, we need to set up a zone or a package. This is how I have configured mine:



The resource type should be of “pull” type and the origin should be the subdomain we configured earlier (s.mybbstuff.com in my case). You can use any CDN hostname that you desire - most CDN providers will actually give you a subdomain of theirs if you do not wish to configure CNAME DNS records and such. I chose to use cdn.mybbstuff.com just because it looks good.

Setting up MyBB to use the CDN

Now that you have everything configured for the CDN, it’s time to set it up in MyBB. From the Admin Control panel, select Configuration > Settings > Server and Optimization Options. The CDN settings are near the bottom of the page:

• Use a CDN?: Yes
  
• URL to use for static files: This is the CDN hostname that you configured in step two. In my case, it is http://cdn.mybbstuff.com
  
• Path to store static files: This is the path to the subdomain that we set up earlier for static files to be stored. All uploads and stylesheets will be saved here from now on. In my case, the path is “/home/euan/webapps/s_mybbstuff_com”
  

Once configured, save your settings then reload the forum home page. All of your images, stylesheets and JavaScripts should now be loading from a CDN.

[andrewjs18]

just started using the CDN feature added in 1.8 on my BBO.

thanks for the tutorial, Euan.

[fizz]

Cool feature, great tutorial. Thanks

[Euan T]

just started using the CDN feature added in 1.8 on my BBO.

thanks for the tutorial, Euan.

Nice one  1.8.4 should be improving it a little too by allowing developers to easily write plugins to support systems such as Amazon S3 for storage of static files.

[Jean Pierre]

It is necessary to choose a provider cdn as cdn.net or another?

I created the subdomain cdn.fromend.com and I've uploaded all the relevant files to the folders you indicated, it's working great, but I have 2 errors by inspecting the element of my website.

I'm not using a provider cdn like cdn.net or another.

http://i.imgur.com/uMN5w3X.png

Help me please!

[Euan T]

Hi,

It looks like you have code in place to limit CORS (Cross Origin Resource Sharing). This code may be in your .htaccess file or your web server configuration. More information about CORS can be found here: http://www.html5rocks.com/en/tutorials/cors/

You'll need to make sure that the cdn.fromend.com domain is allowed in the policy to prevent it from being blocked. Using a third party (such as cdn.net) would not have any effect on this.

Hope that helps!

[Jean Pierre]

thanks, I fixed, this only happens because the fonts are not loaded in the forum.
The solution was to upload a .htaccess file to the directory where the font files are in the cdn, with the following code:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

However, I still doubt, is necessary or not the use of cdn.net?


What is the difference if I use it or not?

[Euan T]

It's not necessary, but cdn.net will probably provide better speeds. Their system works by loading files from servers closer to your users, which makes them download faster. You don't need to do this if your forum is already loading quickly though.

[andrewjs18]

thanks, I fixed, this only happens because the fonts are not loaded in the forum.
The solution was to upload a .htaccess file to the directory where the font files are in the cdn, with the following code:

<FilesMatch "\.(ttf|otf|eot|woff)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

However, I still doubt, is necessary or not the use of cdn.net?


What is the difference if I use it or not?

you could also try using cloudflare or incapsula as well as they both have free tiers of service.

when I was using the CDN feature that was added in 1.8, I was using maxcdn and everything worked fine.

[_Jerry_]

cdn.net is showing http error 500, is this active for you people around?