Wednesday, January 11, 2012

Creating Multiple Virtual Sites on a WAMP Server


 When developing multiple sites, it is helpful to have a copy of each site running on your local computer.  With Apache it is fairly easy to configure multiple sites under one install.  This article outlines the basic steps for configuring Apache's "Named Virtual Hosts" feature under WAMP Server on Windows XP.

Step 1: Tell your machine to answer to different names.

By default, Windows will answer to the name "localhost" for browser requests originating on the same machine (yours). If you have WAMP Server running, you can browse to http://localhost and see your WAMP site.  We can make Windows answer to multiple names by editing a file called "hosts" located in your /windows/system32 folder.  Browse to:
"C:\windows\system32\drivers\etc"
Once there, you should see a file titled "hosts".  Open that file with a text editor like notepad or Komodo Edit.  You may have to change the open dialog to "all files" in order to see it.  You should see a line that looks like this:
127.0.0.1        localhost
That tells Windows that the name "localhost" points to the machine who's IP address is 127.0.0.1, which is a standard address for "this machine".  We can multiple entries for 127.0.0.1, and your browser will then associate all of them with your local computer. In our case, let's create one called "client1.localhost".  Add a line to the hosts file so it looks like this:
127.0.0.1        localhost
127.0.0.1        client1.localhost
You can add as many entries as you like and your browser should display your WAMP Server site for all of them.  Save your hosts file and try visiting http://client1.localhost" in your browser.  You should see your WAMP site.
Note: Do not create hosts entries for external sites.  This can cause hours of frustration and needless troubleshooting.  For example, if you added this line:
# Don't do this.
127.0.0.1        google.com
You would no longer be able to access google.com, because it is now associated with your local computer.  The request never reaches the Internet. The same applies to client domains.  For this reason, stick to something identifiable as local, like "google.localhost".

Step 2: Create a Client Site Folder

We need multiple site root folders to house multiple sites. Currently WAMP Server only has one site root, which typically lives at "C:\wamp\www".  Let's create another one at "C:\wamp\client2".  Navigate to "C:\wamp", and click "File -> New -> Folder".  Rename your new folder to "client2".
Create a test file called "index.html" in "C:\wamp\client2":
<html>
<head>
<title>Hello?</title> 
</head> 
<body>
Hello from Client 2! 
</body>
</html> 

Step 3: Tell Apache to Serve Multiple Sites by Name

WAMP configures Apache to serve a single site that usually lives in "C:\wamp\www".  Apache can handle multiple sites if we tell it where to look.  To open your WAMP Server Apache configuration, left-click the WAMP Server icon and select "Apache -> httpd.conf".  The file should open in notepad.
Look for a line like this:
Listen 80
This tells Apache to listen for browser requests on port 80.
Change it to this:
Listen *:80 
This tells Apache to listen to port 80 of any address.
At the end of httpd.conf, add this:
# Tells Apache to identify which site by name
NameVirtualHost *:80
# Tells Apache to serve the default WAMP Server page to "localhost"
<VirtualHost *:80>
ServerName localhost
DocumentRoot "C:/wamp/www"
</VirtualHost> 
# Tells Apache to serve Client 1's pages to "client1.localhost"
# Duplicate and modify this block to add another client
<VirtualHost *:80>
# The name to respond to
ServerName client1.localhost
# Folder where the files live
DocumentRoot "C:/wamp/client1"
# A few helpful settings...
<Directory "C:/wamp/client1">
allow from all
order allow,deny
# Enables .htaccess files for this site
AllowOverride All
</Directory>
# Apache will look for these two files, in this order, if no file is specified in the URL
DirectoryIndex index.html index.php
</VirtualHost> 

Step 4: Restart Apache and Test

Left-Click your WAMP Server tray icon and select "Restart All Services". Browse to http://client1.localhost and you should see your new site.

No comments:

Post a Comment

Subscribe to RSS Feed Follow me on Twitter!