HowTo: Configure Vbulletin To Use A Content Delivery Network (CDN)

The last time I wrote about CDN, I wrote about how to configure CDN for wordpress to speed up your wordpress blog to display content to users faster and more efficiently. However, a few regular readers like to know how to configure the Amazon CDN or other CDN network to use with Vbulletin forum software. In this quick tutorial, I will explains how to configure Vbulletin, Apache/Lighttpd webserver, Bind dns server to use a CDN to distribute your common files such as css, js, user uploaded files and lighten load on your web server.

Forum URL : http://nixcraft.in/ - This is hosted on your own server using Apache, Lighttpd, or Nginx.Origin Pull URL : http://cdn-origin.nixcraft.in/ - This is hosted on your own server. You need to configure your web server, vbulletin and dns server to use this. This is called as "Origin Pull Host" which is a CDN method by which content is pulled from your web server.CDN URL : http://cdn.nixcraft.in/ - This is a cdn url hosted by your CDN provider such as Amazon. This url always point to an edge server via proprietary DNS hacks. cdn.nixcraft.in must be set as CNAME records which will point to domain names of CDN server.CDN DNS CNAME : cdn.nixcraft.in.example.com - example.com is your CDN provider. This is must be set as CNAME for cdn.nixcraft.in

As I said earlier the cost varies between CDN providers. Check CDN service providers website for more information. Next, you need to use service providers "control panel" to configure an "Origin Pull Host" for each domain. In other words configure cdn.nixcraft.in in origin pull mode. The control panel will also provide your an option to setup CDN dns CNAME. You need to use same CNAME in step # 2. Once the configuration is active and the CNAME is resolving, calls to cdn.nixcraft.in will be cached from cdn-origin.nixcraft.in.

I'm assuming that you are using BIND dns server edit your zone file and add entry as follows (you can skip this step and use your ISP's dns hosting providers control panel to setup CNAME and origin host):

; CDN CNAME mapping for cdn.nixcraft.incdn 3660 IN CNAME cdn.nixcraft.in.example.com.; Your cdn-origin url (note nixcraft.in is also hosted on same server IP 123.1.2.3)cdn-origin 3600 IN A 123.1.2.3

Save and close the file. Reload named:
# rndc reload && tail -f /var/log/messages
To keep your configuration simple use the same web server for origin pull domain and main domain i.e. host both cdn-origin.nixcraft.in and nixcraft.in on same web server. This allows you to directly upload and map files to the CDN server.

You need to configure cdn-origin.nixcraft.in as follows:

Origin pull DocumentRoot: /home/httpd/cdn-origin.nixcraft.in - All your .css, .js and uploaded files are hosted here.Server Forum DocumentRoot: /home/httpd/nixcraft.in - All your vbulletin files are hosted here.MaxAge: Set cache-lifetime headers for static files for cdn network.Etags: An ETag (entity tag) is part of HTTP, the protocol for the World Wide Web. It is a response header that may be returned by an HTTP/1.1 compliant web server and is used to determine change in content at a given URL. When a new HTTP response contains the same ETag as an older HTTP response, the client can conclude that the content is the same without further downloading.ServerAdmin webmaster@nixcraft.inDocumentRoot /home/httpd/cdn-origin.nixcraft.inServerName files.nixcraft.inServerAlias file.nixcraft.inErrorLog /var/logs/httpd/cdn-error_logCustomLog /var/logs/httpd/cdn-access_log common # Files in this directory will be cached for 1 week only.# After 1 week, CDN server will check if the contents has been modified or not.# If not modified, Apache will send 304 "Not Modified" headerHeader set Cache-Control "max-age=604800, must-revalidate" # Disable ETag as we are on cluster Apache serverHeader unset ETagFileETag None # Do not cacheHeader Set Cache-Control "max-age=0, no-store"# Configure ETagsetag.use-inode = "enable"etag.use-mtime = "enable"etag.use-size = "enable"static-file.etags = "enable" ###### CDN FILES via WordPress Upload ##############$HTTP["host"] == "cdn-origin.nixcraft.in"{ server.document-root = "/home/httpd/cdn-origin.nixcraft.in" accesslog.filename = "/var/log/lighttpd/cdn.access.log"# Set max age $HTTP["url"] =~ "^/" { expire.url = ( "" => "access 60 days" ) }}

Adjust documentroot as per your setup.

You need to configure files for cdn-origin.nixcraft.in:
# mkdir -p /home/httpd/cdn-origin.nixcraft.in
# cd /home/httpd/cdn-origin.nixcraft.in
Next, soft link your .css, .js, images, clientscripts files against original forum documentroot (i.e. /home/httpd/nixcraft.in/) as follows:
# ln -s ../nixcraft.in/clear.gif .
# ln -s ../nixcraft.in/clientscript/ .
# ln -s ../nixcraft.in/customavatars/ .
# ln -s ../nixcraft.in/customprofilepics/ .
# ln -s ../nixcraft.in/images/ .
# ln -s ../nixcraft.in/signaturepics/ .
Again, feel free to adjust paths according to your setup. Test your new cdn urls:
http://cdn.nixcraft.in/clientscript/vbulletin_important.css

You need to edit your vbulletin style. Open admincp by visiting http://nixcraft.in/admincp/ > Select Styles & Templates > Replacement Variable Manager:

Fig.01: Vbulletin Editing Styles And Templates

Click on [Add New Replacement Variable] link and set it as follows:

Set Search for Text to href="clientscriptSet Replace with Text to href="http://cdn.nixcraft.in/clientscript

Sample outputs:

Fig.02: Vbulletin Adding Replacement Variable For CDN

You need to repeat this step for images, javascript and other shared media as follows: Search for Text Replace with Textsrc="http://cdn.nixcraft.in/clear.gif"src="http://cdn.nixcraft.in/customavatars/src="http://cdn.nixcraft.in/customprofilepics/src="http://cdn.nixcraft.in/images/url("http://cdn.nixcraft.in/clientscriptsrc="http://cdn.nixcraft.in/clientscript/href="http://cdn.nixcraft.in/clientscript/url(http://cdn.nixcraft.in/images/url(http://cdn.nixcraft.in/images/var imgdir_misc = "images/misc"; var IMGDIR_MISC = "http://cdn.nixcraft.in/images/misc";

Visit Avatars > Storage Type and set them as follows to match your above CDN rules by moving all of them to file systems:

Avatars are currently being served from the filesystem at ./customavatarsProfile pictures are currently being served from the filesystem at ./customprofilepicsSignature pictures are currently being served from the filesystem at ./signaturepics

Use curl to test HTTP headers (look for Etags, max-age and Expires headers):
$ curl -I 'http://cdn.nixcraft.in/clientscript/vbulletin_important.css?v=385'
$ curl -I http://cdn.nixcraft.in/customavatars/avatarx_y.gif

The forum home page loading (rendering) time went from 8.5 seconds to 2.2 seconds and average thread loading time went from 14.3 seconds to 5 seconds:

Fig.03 Speed Improvements With CDN

See 6 tools to test web site speed for more information. This blog post is 4 of 4 in the "Networks & Applications of Distributed Computing Tutorial" series. Keep reading the rest of the series: