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

by on June 11, 2010 · 25 comments· LAST UPDATED February 20, 2011

in , ,

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.

Our Sample Forum Setup

  1. Forum URL : http://nixcraft.in/ - This is hosted on your own server using Apache, Lighttpd, or Nginx.
  2. 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.
  3. 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.
  4. 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

Step # 1: Purchase CDN Service

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.

Step # 2: Update Your DNS Server

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.in
cdn                 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.

Step # 3: Configure Origin Pull Web Server

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

  1. Origin pull DocumentRoot: /home/httpd/cdn-origin.nixcraft.in - All your .css, .js and uploaded files are hosted here.
  2. Server Forum DocumentRoot: /home/httpd/nixcraft.in - All your vbulletin files are hosted here.
  3. MaxAge: Set cache-lifetime headers for static files for cdn network.
  4. 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.

Sample Apache Configuration

<VirtualHost cdn-origin.nixcraft.in >
	ServerAdmin webmaster@nixcraft.in
	DocumentRoot /home/httpd/cdn-origin.nixcraft.in
	ServerName files.nixcraft.in
	ServerAlias file.nixcraft.in
	ErrorLog /var/logs/httpd/cdn-error_log
	CustomLog /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" header
	<Directory "/userimages">
		Header set Cache-Control "max-age=604800, must-revalidate"
	</Directory>
 
	# Disable ETag as we are on cluster Apache server
	<Directory "/pdfs">
		Header unset ETag
		FileETag None
	</Directory>
 
	# Do not cache
	<Directory "/patches">
		Header Set Cache-Control "max-age=0, no-store"
	</Directory>
</VirtualHost>

Sample Lighttpd Configuration

# Configure ETags
etag.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.

Step # 4: Create Required Directories

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

Step # 5: Configure Vbulletin To Use a CDN Server

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

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="clientscript
  • Set Replace with Text to href="http://cdn.nixcraft.in/clientscript

Sample outputs:

Fig.02: Vbulletin Adding Replacement Variable For CDN

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 TextReplace with Text
src="clear.gif" src="http://cdn.nixcraft.in/clear.gif"
src="customavatars/ src="http://cdn.nixcraft.in/customavatars/
src="customprofilepics/ src="http://cdn.nixcraft.in/customprofilepics/
src="images/ src="http://cdn.nixcraft.in/images/
url("clientscript url("http://cdn.nixcraft.in/clientscript
src="clientscript/ src="http://cdn.nixcraft.in/clientscript/
href="clientscript/ href="http://cdn.nixcraft.in/clientscript/
url(./images/ url(http://cdn.nixcraft.in/images/
url(images/ url(http://cdn.nixcraft.in/images/
var imgdir_misc = "images/misc"; var IMGDIR_MISC = "http://cdn.nixcraft.in/images/misc";

Avatars & Pictures - Storage Type

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 ./customavatars
  • Profile pictures are currently being served from the filesystem at ./customprofilepics
  • Signature pictures are currently being served from the filesystem at ./signaturepics

How Do I Test Images And Other Media Files Are Cached Or Not By CDN?

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

Conclusion

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

Fig.03 Speed Improvements With CDN


See 6 tools to test web site speed for more information.

Recommend readings:

TwitterFacebookGoogle+PDF versionFound an error/typo on this page? Help us!

{ 25 comments… read them below or add one }

1 Joe June 11, 2010 at 8:53 pm

Thanks Vivek!

Finally, my wish came true :)

Reply

2 trman March 22, 2011 at 6:57 pm

Many thanks for this! I used it yesterday to set up my Vbulletin and it worked great.

I had one question, and that is the purpose of the Sim Links? I was thinking they were in case the CDN goes down that the images/javascript etc would still load from the cdn.yourdomain.com subdomain, is this correct? I really don’t see any other purpose for them.

Thanks again!

Reply

3 Philippe Petrinko June 13, 2010 at 9:47 am

Many thanks Vivek,

I found your article interesting, and well-done.
Your work do cover a very broad spectrum of IT!
Keep up the good work, man. :-)

– Philippe

Reply

4 nixCraft June 13, 2010 at 10:19 am

@Joe / @Philippe,, You are welcome! :)

Reply

5 Vamsi June 14, 2010 at 6:22 am

Thank you very much for the lighty config ..

Reply

6 nixCraft June 15, 2010 at 6:53 am

No problem! I hope you use it on your forum.

Reply

7 Car Forum June 16, 2010 at 10:54 pm

Worked like a charm with Amazon CloudFront.

Reply

8 Win June 17, 2010 at 7:16 am

Great article!

Is there much benefit of using a CDN if most of your visitors are from the same country that your server resides in?

I imagine though that the CDN will provide improved page load speeds due to parallel downloading and improved management of cached content?

Reply

9 nixCraft June 17, 2010 at 7:21 am

It ALL depends upon your cdn providers network. Some large CDN providers have multiple edge servers in same country. For example, large provider such as Akamai does provide multiple edge servers so you end up speeding up website. However, some provider only got 1 edge server. So you need to do your own research before purchasing such CDN.

HTH

Reply

10 Win June 17, 2010 at 11:15 am

Cheers Vivek, thanks for that.

Reply

11 LH June 29, 2010 at 11:12 pm

Hi,

What if I’d like to accelerate entire website app written in php or perl. Can I use CDN for caching pages generated on fly using php?

Thanks!

Reply

12 nixCraft June 30, 2010 at 9:12 pm

There are different types of CDN. The CDN discussed in this article is for caching static files. You need to use “Dynamic Content Acceleration” with SSL (optional for securing data transfer). Checkout the list posted at wordpress CDN article, and most large CDN provider also provides Dynamic Content Acceleration.

HTH

Reply

13 Alex July 13, 2010 at 11:12 am

Hello, I tried to use your settings but it doesn’t works well. I use vBulletin 4.0.3, Can you tell if the tutorial is compatible also with my version?

Thank you

Reply

14 nixCraft July 14, 2010 at 5:39 am

I’ve not tested this with VB 4.x. So I cannot comment out. This is only tested on v3.x.

Reply

15 yayabaobao July 14, 2010 at 5:30 am

Great article!

Reply

16 John July 14, 2010 at 6:26 am

Thanks for posting this guide.

I’m not sure, but I may have found a small mistake. In your first replacement variable example, shouldn’t the following:

href=”clientscript

instead be:

src=”clientscript

?

Reply

17 nixCraft July 14, 2010 at 11:17 am

Actually both src=clientscript and href=clientscript exitst. So no it wasn’t a typo on my part.

HTH

Reply

18 HarlAcicich October 22, 2010 at 1:15 am

hell yea.thanx for sharing this post with me.i just found it buy google couse i was searching for
more info about this.Ang WOOHOO! i found your post that was so usefull for me :)
feel free to drop me email i will send small donation! love for all you here.

Reply

19 mantomarantina November 3, 2010 at 10:18 pm

hello,

it’s my first topic here
i hope to be happy with you

thank you

Reply

20 Kevin December 7, 2010 at 12:07 am

Vivek, great article. We put together a similar write-up but I appreciate how detailed yours is. Our CDN (with 10 PoPs) integrates well with vbulletin, and you can read more about it, here: http://www.maxcdn.com/features/integrations/vbulletin-cdn/

Feel free to contact me directly if anyone has any questions.

Reply

21 trman March 28, 2011 at 5:55 pm

(oops I replied to another post by mistake instead of leaving a new comment, sorry)

Many thanks for this! I used it to set up my Vbulletin and it worked great.

I had one question, and that is the purpose of the Sim Links? I was thinking they were in case the CDN goes down that the images/javascript etc would still load from the cdn.yourdomain.com subdomain, is this correct? I really don’t see any other purpose for them.

Thanks again!

Reply

22 satla April 28, 2012 at 1:14 pm

I am stuck on this step:
# 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/ .

I tried to create soft link but it doesn’t work
it doesn’t create a link, just a custom file.

Can you help?

Reply

23 nixCraft April 29, 2012 at 4:23 pm

Do see any specific error on the screen?

Reply

24 Bnay December 1, 2012 at 8:30 pm

Hi Vivek,

It worked… however partially. I have some other folders such as xyz under images folder. But they are not getting redirected to CDN.

for eg: contents of images/xyz are not getting redirected.

however, contents of images/providers are getting redirected..

any idea ???

Reply

25 Nick July 31, 2013 at 12:14 am

Hello,

The directions above worked for me but I’m having trouble adding more paths to the CDN. For example I would like to include /attachments and /arcade. I tried following the other examples as a guide but looking at the page src and hovering over pieces of my thread pages they don’t appear to be loaded via the CDN like /clientscript and /images. Is it possible to CDN more parts of my vBulletin?

Thank you, -Nick

Reply

Leave a Comment

Tagged as: , , , , , , , , , , , , ,

Previous post:

Next post: