Drupal with Virtual Hosts

Everybody's development environment is unique to them: some use Vim while others may use Dreamweaver or Notepad, some develop on a Mac while others use a PC or Linux box. The tools you use, by and large, should speed up delivery and increase the quality of your finished product. Your technology toolbox should always be growing as you learn about and add new possibilities for making your life easier. So for the lazy out there, using Virtual Hosts on your web server should be a no-brainer. So what is a Virtual Host? The Apache Software Foundation says:

"The term Virtual Host refers to the practice of running more than one web site (such as company1.com and company2.com) on a single machine. Virtual hosts can be 'IP-based', meaning that you have a different IP address for every web site, or 'name-based', meaning that you have multiple names running on each IP address. The fact that they are running on the same physical server is not apparent to the end user."

Apache Virtual Host Documentation

But how does that benefit our development environment? Well, like me, you are probably using some sort of AMP stack (W*, M*, L*, X*P) to develop sites on your local machine and, while I envy the person who only works on one project at a time, you usually end up with multiple sites which need to use the same environment. This is easy enough to do but typing in the URLs for sites set up this way can be tedious and error prone. I guess you could create browser bookmarks but what if you want to take advantage of Drupal's MultiSite capabilities? Well, you need a new tool.

For our purposes, we will be creating name-based Virtual Hosts on an Apache web server. I will be using the WAMP stack, version 2.2, running Apache 2.2.21, MySQL 5.5.16, and PHP 5.3.8. I have the rewrite_module enabled on the Apache server and will be using a vanilla Drupal 7.12 standard install with pretty URLs enabled for this example. So to get set up you will need to:

1. Install your AMP stack.
2. Enable the Apache rewrite_module.
3. Setup your site's directory in your wamp/www directory (or htdocs or sites) like:
   • C:/wamp/www/your_site

Now that we're ready to get started there are four steps we need to follow:

I. Modify the hosts file.

The hosts file contains the mappings of IP addresses to host names. On Windows machines it is usually found at C:/Windows/System32/drivers/etc. Open that up in your favorite text editor. We're going to add an entry for our site following the specifications in the file: each entry is on it's own line with the IP address listed first followed by the host name with the IP address and host name separated by a least one space. As localhost is almost always 127.0.0.1 we will use that for our IP address and will add a line to the bottom of the file like:

127.0.0.1	andypangus.local

You can also create comments in this file by placing a hash (#) symbol on individual lines or following a host name. After you save the file it's on to step two...

II. Modify the httpd.conf file.

The httpd.conf file is the main configuration file for your Apache HTTP server. Depending on how you enabled the rewrite_module you may already be familiar with it. It can be found somewhere like C:\wamp\bin\apache\Apache2.2.21\conf. Open that file up in the aforementioned favorite text editor and start looking for the following two lines:

# Virtual hosts
# Include conf/extra/httpd-vhosts.conf

Find those lines and remove the hash from the second so that they look like:

# Virtual hosts
Include conf/extra/httpd-vhosts.conf

Save the file and on to step three...

III. Modify the httpd-vhosts.conf file.

I am only going to scratch the surface of what you can do with Virtual Hosts, for more documentation visit Apache. The httpd-vhosts.conf file contains the Virtual Hosts containers configurations. At the most basic level we need to add the following at the bottom of the file:

<VirtualHost *:80>
	ServerName andypangus.local
	DocumentRoot "C:/wamp/www/your_site"
</VirtualHost>

The above allows us to direct all traffic pointed at that server name to the site files in the document root. There are a slew of possibilities from this point. Here are two options:

1. Lock the site down

You can lock your development site down and prevent outsiders from accessing it on your server by adding the right configurations. Something like the following will prevent outside access to this virtual host:

<VirtualHost *:80>
	ServerName andypangus.local
	DocumentRoot "C:/wamp/www/your_site"
	<Directory "C:/wamp/www/your_site">
		Options Includes FollowSymLinks
		AllowOverride All
		Order deny,allow
		Deny from all
		Allow from 127.0.0.1
	</Directory>
</VirtualHost>

2. Allow outside access

Of course, you may want to be able to access the site from somewhere other than your development machine so you could use something like:

<VirtualHost *:80>
	ServerName andypangus.local
	DocumentRoot "C:/wamp/www/your_site"
	<Directory "C:/wamp/www/your_site">
		Options Includes FollowSymLinks
		AllowOverride All
		Order allow,deny
		Allow from all
	</Directory>
</VirtualHost>

After you have your brand new Virtual Host configured, save the file, and restart your AMP stack. Now let's test the new setup to make sure it works. Create an index.html file with some basic markup and drop it in C:/wamp/www/your_site. Something like:

<html>
<head><title>Virtual Host Test</title></head>
<body><p>Your shiny new Virtual Host is ready to go!</p></body>
</html>

Now point your browser at andypangus.local and load her up. You should see something like:

Once you have successfully landed at your Virtual Host, delete the index.html file you just created and add and configure the Drupal files in the same directory. Once you have finished running the install script you need to complete the last step.

IV. Modify the settings.php file.

Open up your new site's settings.php file and find the following line:

# $base_url = 'http://www.example.com';  // NO trailing slash!

I have found that without modifying the above line that relative paths in my site fail right, left, and center. So, turn the above into something like:

$base_url = 'http://andypangus.local';  // NO trailing slash!

Now save the file and clear your site's cache. Don't forget to enable the pretty, pretty URLs and you're ready to go.