How to access websites with different IPs but the same URL on the same computer for web development purposes

Submitted by David on Tue, 2011-12-13 22:44

In developing a complex site you may find yourself needing a production, development and localhost website in order to separate changes appropriately.  If this is the case, you may also find yourself needing to use the exact same URL for each site.  In order to access your sites you probably have been changing the hosts file over and over again to switch which site you would access.  For example:

If I wanted to access mywebsite.com on my localhost I would put in my hosts file:
127.0.0.1  mywebsite.com
But if I wanted to access the development site I might use:
222.222.222.222 mywebsite.com
This becomes a problem if you for some reason need to compare the two websites or are just switching back and forth a lot.  In the past I have used separate computers (or a VM), but I found that solution clunky.
 
After doing a little bit of searching I found this question on Super User which is exactly what I wanted to know.  The question is answered in that post but I wanted to expand on my solution a little bit more.  The OS I used was Ubuntu 11.10 but the basic idea should work for any modern OS.
 
My solution is to run a proxy server on my local machine for each development site that I want to access in addition to what the default hosts file already gives me access to.  Then I would modify the proxy server software configuration so that they use an alternate hosts file that would access the site that I want them to.  Once the proxy is configured I would create a shortcut or run my browser so that it loads with the proxy settings for the development site I want the browser to access.  Because this might be a bit confusing (it was for me), I'll run through the steps I took to get this setup on Ubuntu.
 

Install the first proxy server (One additional development site)

  • Install the proxy server.  I used Squid.
sudo apt-get install squid3
  • Set a new hosts file in the squid.conf.  In the /etc/squid3/squid.conf file you will want to change the line  
#hosts_file /etc/hosts

to

hosts_file /etc/hosts-squid
  • Create the hosts file referenced in the squid.conf file.
sudo cp /etc/hosts /etc/hosts-squid
  • After you have creating the new hosts file you will need to modify it so that it references your second development site.  For example your normal hosts file might access the production site and your hosts-squid file might access your localhost or development site.
  • Setup your browser to use the proxy settings if you want to access the new development site.  For Chromium I added the following to my chromium command.
chromium-browser --proxy-server=localhost:3128

That command should start Chromium and give you access to the development sites that you accessed in your hosts-squid file.  Now you can effectively have one instance of Chromium open using your hosts file and one instance of Chromium open using the hosts-squid file for DNS resolution.  Of course, you could do the same with any other browser or program as well which supports proxies.

Running two or more proxy server instances

If all you wanted to do was access one additional development site at the same time then you are done!  But if you want to have two or more development sites accessible at the same time then you will need to run multiple instances of the proxy server.  Luckily this isn't as bad as it sounds.  For the case of Squid, instructions on how to do this can be found here.  The basic idea is that you will need to make additional copies of the /etc/squid3/squid.conf, /etc/init.d/squid3 and /etc/hosts-squid files so that a separate Squid process can run which will not conflict with the already running instances.  Some settings you will need to change in the squid.conf and squid3 start script is the process id (PID), the cache directory, the port number and you will probably want to change the log file names too.

Good luck and happy web developing!