I have a project where I need to do a bit of load balancing to keep a website online for a very small window of time when it would receive an extremely high level of traffic.  I saw a dramatic increase in performance after simply installing NGINX, but I also wanted to be able to use mirrors and change the split of traffic during that peak time if we experienced any issues. NGINX does have a module for setting up upstream proxies to handle load balancing, but for this project redirects were simpler and more flexible.

This does only apply to virtual private servers or dedicated hosting – you won’t be able to run this kind of setup in a shared hosting environment.  Start by installing NGINX, below I have instructions on how to add NGINX if your site is on CPanel.

1. cd /usr/local/src
2. wget http://nginxcp.com/latest/nginxadmin.tar
3. tar -xf nginxadmin.tar
4. cd publicnginx
5. ./nginxinstaller install

You will also need to delete the automatically generated vhost file for the domain/subdomain you want to change.  And you’ll need to re-delete it if your ever regenerate the vhosts.  You can do this by:

1. cd /etc/nginx/vhosts/
2. rm sub.domain.com

NGINX comes pre-installed with the split clients module.  This module is specifically designed for A/B testing, but it will also allow you to split up your traffic between different sites and allow you to adjust how much traffic each site receives.  If you’re using NGINX CP as I described above then you can either edit you NGIX config in WHM, or you can find the file at “/etc/nginx/nginx.conf” to edit from the shell.  In my example below I am also using the $http_referer variable to set-up a separate redirect specifically for direct traffic.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

http {
 
split_clients "${remote_addr}" $mirror {
	33%	"http://google.com";
	33%	"http://yahoo.com";
	*	"http://bing.com";
}
 
server {
	listen 0.0.0.0:80;
	listen [::]:80;
	server_name sub.domain.com www.sub.domain.com;
 
	location / {
		add_header X-Cache "Redirect load balancing";
 
		if ($http_referer = "") {
			set $mirror "http://duckduckgo.com";
		}
 
		return 302 $mirror;
	}
}
 
}

REFERENCES

http://www.nginxcp.com/installation-instruction/
http://nginx.org/en/docs/http/ngx_http_split_clients_module.html
https://www.digitalocean.com/community/tutorials/how-to-target-your-users-with-nginx-analytics-and-a-b-testing
http://serverfault.com/questions/597671/load-balancing-in-nginx-with-redirect-rather-than-proxy

This is pretty much just ripped from this article.  But it took me forever to find a solution, so I’m writing this down!

It is possible to secure a sub-domain without a separate IP or SSL certificate but only if it is a wildcard certificate!  Just Host offers these, but what it doesn’t offer is decent support on the matter 😛

When you make a subdomain, say “sub.example.com”  going to http://sub.example.com – will be just fine.  But, going to https://sub.example.com will load up the contents of your default directory (a.k.a. public_html)  So, in order to get that to work you have to force it to point to the right directory using .htacces, like so:

1
2
3
4
5

RewriteEngine On
RewriteCond %{SERVER_PORT} ^443$
RewriteCond %{HTTP_HOST} ^sub.example.com$ [NC]
RewriteCond %{REQUEST_URI} !^/sub-folder/
RewriteRule ^(.*) /sub-folder/$1

Call me a dinosaur, but I’m still chugging away with Dreamweaver.  I can’t pull myself away from the lovely site management and built in FTP features 🙂

But Dreamweaver lacks support for Ruby, and it’s friends HAML and SASS 🙁  I’ve never gotten HAML and SASS to work 100% with highlighting, but there’s a nice little extension for getting ruby highlighting called “Rubyweaver.”

How can download Rubyweaver from github, https://github.com/cannikin/rubyweaver.  At this time it doesn’t have installation instructions, but I just sent a pull request containing them, so they will probably be there now 🙂  It’s pretty simple, just make certain not to skip the “Run as administrator” step, or the installation won’t take.

Now you can open up ruby files and they’ll have some lovely color coding 🙂  Next, is to make dreamweaver open SASS and HAML files.  There are some tricky steps to get syntax highlighting for SASS, but everything I’ve tried just makes everything pink.  That only really works if you write SASS the same way as you would write CSS.  (I indent my SASS – no curly braces for me!)

In Dreamweaver

• Go to file>preferences
• Select File Types/Editors
• In “Open in code view” add ” .haml .sass”

In notepad

• Go to C:\Users\~Your Username~\AppData\Roaming\Adobe\Dreamweaver CS6\en_US\Configuration
• open Extensions.txt
• on the first line add in ,RB,HAML,SASS
• change
  HTM,HTML,HTA,HTC,XHTML:HTML Documents
  to
  HTM,HTML,HTA,HTC,XHTML,HAML:HTML Documents

• and then change
  CSS: Style Sheets
  to
  CSS,SASS:Style Sheets

• You can also add any other extensions you need to wherever you want.

Now they’ll open up in code view and you’ll be able to search whole folders as well. 🙂

From my experience Photoshop’s “Save for web and devices” will give you the biggest bang for your buck.  It’ll give you the lowest file sizes with the least amount of artifacts.

However, one problem I had is that it’s difficult to resize a lot of images in bulk.  Especially if you want to compress images in sub directories.  After a lot of searching I came across this useful little snippet.  One thing – it’s only meant for .JPGs.  So any other format and you won’t be finding this so useful…but it might not be too hard to tweak.

To use this first download the script on your computer and open Photoshop.  Go to file>scripts>browse, select the script, then select the folder containing you .JPG images.

You can edit the file in notepad, dreamweaver, whatever.  To change to quality edit this line:
SaveForWeb(saveFile,90); // set quality to suit
Where 90 refers to the quality setting.

I also did some editing to this so it would also resize images before compressing them.  First find the line:
app.preferences.typeUnits = TypeUnits.PIXELS;
After it add:
doc.resizeImage(200, 133);
where 200,133 is the image size.  I think I did have some issues with stretching so check the aspect ratio beforehand.

Download the script here