Tuesday, October 19, 2010

Creating Multiple Virtual Sites on a WAMP Server Installation

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.  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 "testwebsite.dev".  Add a line to the hosts file so it looks like this:

127.0.0.1        localhost
127.0.0.1        testwebsite.dev

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://testwebsite.dev in your browser.  You should see your WAMP site.
If using Windows 7, you may need to open notepad as "Run as administrator" by rightclicking on notepad. If not you may not be able to save the file once edited because of restrictions.
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 dev, like "google.dev".

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\testwebsite".  Navigate to "C:\wamp", and click "File -> New -> Folder".  Rename your new folder to "testwebsite". Create a test file called "index.html" in "C:\wamp\testwebsite":
<html>
     <head>
          <title>Test Website</title>
     </head>
     <body>
          Hello from Test Website!
     </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. Next look for lines like this:

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

This is the config file for appache virtual host websites. Now uncomment "#Include conf/extra/httpd-vhosts.conf" like "Include conf/extra/httpd-vhosts.conf" This lets appache find the hosted root folder for the said virtual website.

Step 4: Open and edit httpd-vhosts.conf file

Open the file "httpd-vhosts.conf" file located in folder "C:\wamp\bin\apache\Apache2.2.11\conf\extra". At the end of the file copy and past (modify if required) the following peace of code:

<VirtualHost *:80>
     ServerAdmin webmaster@testwebsite.dev
     DocumentRoot "C:/wamp/www/testwebsite"
     ServerName testwebsite.dev
     ErrorLog "logs/testwebsite.dev-error.log"
     CustomLog "logs/testwebsite.dev-access.log" common
</VirtualHost>

Step 5: Restart Apache and Test

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

No comments:

Post a Comment