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

October 28, 2010 by: upa_kid


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
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

Header set Cache-Control “max-age=604800, must-revalidate”

# Disable ETag as we are on cluster Apache server

Header unset ETag
FileETag None

# Do not cache

Header Set Cache-Control “max-age=0, no-store”

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 Text Replace 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:

* HowTo: Configure WordPress To Use A Content Delivery Network (CDN).
* Best practices for speeding up your web site.
* Content delivery network from Wikipedia, the free encyclopedia.
* The official vbulletin manual provides a comprehensive guide to installing, configuring and customizing your vBulletin forums.

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Blogplay
Have you found this script useful? Please support author by PayPal donation.

Comments

12 Responses to “HowTo: Configure Vbulletin To Use A Content Delivery Network (CDN)”
  1. Only just choice an insurer that intend substantial budget steadiness, perfectly known and even very highly trustworthy by folks. You’ll be able to definitely discover that one onto your local community

  2. Solely decide on an insurer which provides superior budgetary balance, well understood along with absolutely trusted through process of folk. Yourrrre able to certainly see that an individual to the hometown area

  3. Simply find an insurance company that provides huge budget balance, basically known together with remarkably trustworthy by consumers. It is easy to for sure realize that a single on your private neighborhood

  4. Solely pick out an insurer that provides superior monetary firmness, certainly understood not to mention greatly trustworthy as a result of everyone. You can actually really learn that an individual within your specific geographic area

  5. Only opt for an insurance company which provides superior budget stability, well established and even very highly respected as a result of people today. You’ll be able to undoubtedly find that just one within your regional area

  6. Simply pick out an insurance company which in turn offers huge cash security, certainly known and greatly relied on through many people. You could definitely discover that a particular on your private specific geographic area

  7. Just simply find some insurance company which provides superior personal stability, well recognised not to mention highly relied on by way of men and women. It is possible to absolutely realize that one against your specific geographic area

  8. Simply just go with some insurance company that has increased money steadiness, correctly best-known as well as extremely relied on by many people. You may absolutely realize that one personal specific geographic area

  9. Basically decide on an insurance company that promises high money security, well well-known together with extremely respected as a result of men and women. You may undoubtedly find that one particular in specific geographic area

  10. erronserist says:

    Hey, I am new here.

    I’m sorry if this is not the right place for this question, but I was hoping some one here on xyzvn.com would be able to assist me access amazon from school as it it is restricted.

    Any help would be appreciated

    Thanks ;-

  11. Thanks for this! I’ll check this site everyday and looking for some posts like this.

  12. Huge Melons says:

    Howdy really nice blog man, amazing, everything is excellent style topics, i’ll bookmark and subscribe for the feeds!Hello there i located your own website thru google while searching to get good read, and your posts look extremely appealing to me!

Leave a Reply