Friday, 29 March 2013

How to Set Up Virtual Host Using WAMP server


To certain point in your web development career, you're going to hit a wall where static .html pages just don't cut it anymore. You'll have finished a 20-page site only for the client to decide they simply must have a Twitter button in the header. What's a poor developer to do? Find/Replace your way to the madhouse, that's what. You could use a content management system, but some sites (and budgets) are just too small for that. You need something more than static HTML, but less than a CMS - you need PHP.
By configuring virtual hosts on your WAMP server, you're able to run as many separate sites as you want, from any location you want.
In order to run PHP on your local Windows computer, you need to install a server stack - either WAMP or XAMPP. Either will do, but for the purposes of this tutorial we're going to stick with WAMP.
Mac users: Most of what you need to run basic server-side scripts is already installed on your Mac. To set up virtual hosts, I recommend Virtual Host X. For a more advanced server setup, try MAMP. There are a plethora of tutorials available online for setting up virtual hosts using MAMP.
Now, you could just do a basic install of WAMP and be on your way, but being restricted to just one directory in an obscure location on your computer is awfully limiting, especially if you're working on multiple projects at a time. That's where virtual hosts come in. By configuring virtual hosts on your WAMP server, you're able to run as many separate sites as you want, from any location you want. Setting up virtual hosts can be just short of infuriating, however, and it took me half a dozen tries using half a dozen tutorials to get it working myself. That's why I've taken my experience and created what I hope will become the One True Tutorial™.
This tutorial should work for machines running either Vista or Windows 7.
Important: If you have Skype installed, open the Skype options and uncheck the box that says "use port 80".

10 Steps to Virtual Host Bliss with WAMP

Step 1

Download and install WAMP, then start the program. Pick a location on your computer where you want to set up your virtual hosts, like "C:/Users/Kristen/Documents/Projects". We're just going to work with one folder for now, but when we're finished you can set up virtual hosts in as many directories as you want. Inside your "Projects" folder, create another folder where we'll keep your first site. We'll call it "My Site" (C:/Users/Kristen/Documents/Projects/My Site).
As a sanity test, create a basic index.html file with some text ("Hello World!") and place it in the "My Site" folder. When we're finished, you'll know you've done it right when you can view your page in a browser using your virtual host's URL.

Step 2

Go to "C:/Windows/System32/drivers/etc" and open the "hosts" file in Notepad.
Vista Users: Right-click on Notepad and select "run as administrator". Then select File>Open and at the bottom right of the dialog box, select "All Files" from the dropdown instead of "Text Documents (*.txt)":
 


Then navigate to "C:/Windows/System32/drivers/etc" and open the "hosts" file.
The file should look like this:

Windows 7:

?
# Copyright (c) 1993-2009 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

# localhost name resolution is handled within DNS itself.
#   127.0.0.1       localhost
#   ::1             localhost



Vista:

?
# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

127.0.0.1       localhost
::1             localhost
127.0.0.1       localhost



# Copyright (c) 1993-2006 Microsoft Corp.
#
# This is a sample HOSTS file used by Microsoft TCP/IP for Windows.
#
# This file contains the mappings of IP addresses to host names. Each
# entry should be kept on an individual line. The IP address should
# be placed in the first column followed by the corresponding host name.
# The IP address and the host name should be separated by at least one
# space.
#
# Additionally, comments (such as these) may be inserted on individual
# lines or following the machine name denoted by a '#' symbol.
#
# For example:
#
#      102.54.94.97     rhino.acme.com          # source server
#       38.25.63.10     x.acme.com              # x client host

127.0.0.1       localhost
::1             localhost
127.0.0.1       localhost

Step 3

At the bottom of the hosts file, below all the other text, add a new line with the following:
?
127.0.0.1   mysite.local    #My Test Site
"mysite.local" is the domain name that will be used for your local site. You can name this whatever you want, like "nyan.cat" or "james.tiberius.kirk". "#My Test Site" is simply a comment to help identify the site, which will be helpful once you start stacking up a lot of virtual hosts. Again, you can put whatever you want here, just don't forget the hashtag (#) beforehand, which is what makes it a comment.
Save the file.

Step 4

Open "C:/wamp/bin/apache/Apache2.2.21/conf/" (your Apache version number may be different)
Just to mess with your head, there are 2 files - one called "httpd.conf", and one called "httpd.conf.build":
 


Open "httpd.conf".

Step 5

At line 467, under "# Virtual hosts", uncomment (remove the hashtag [#]) before the line "Include conf/extra/httpd-vhosts.conf":
 


This tells Apache to include the file "httpd-vhosts.conf" (the file where we set our virtual hosts) when configuring its settings.

Step 6

Go to "C:/wamp/bin/apache/Apache2.2.21/conf/extra" and open the file "httpd.vhosts.conf". It should look like this:
?
#
# Virtual Hosts
#
# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.
#
# Use name-based virtual hosting.
#
NameVirtualHost *:80
#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#



Step 7

We need to give Apache permission to look in our "Projects" folder for websites. At the bottom of the page, below all the other text, add the following:
?
<Directory C:/Users/Kristen/Documents/Projects>
Order Deny,Allow  
Allow from all
</Directory>

Step 8

After the directory code you just added, add:
?
<VirtualHost *:80>  
DocumentRoot "C:\Users\Kristen\Documents\Projects\My Site" #It doesn't matter if you use forward or backslashes
ServerName mysite.local #This should be the same domain that you entered in your "hosts" file
</VirtualHost>
The DocumentRoot should be the path to the folder where your site lives, and the ServerName should match the domain you entered in your hosts file in Step 3.
Important: The DocumentRoot must be inside the directory that you gave Apache permission to access in Step 7.
Save the file.

Step 9

Click on the green WAMP icon in your toolbar and select "Restart all Services", then wait for the icon to turn back to green.



Step 10

Open your browser and navigate to "mysite.local", or whatever your domain name is. You should see the test page you created in Step 1.

Step 11*

Fix yourself a drink, you did it!
*So sue me.
From now on, when you want to add a new site to the server, just do these two things:
  1. Add a domain to the hosts file.
  2. Add the domain and the site's root directory to the httpd-vhosts.conf file.
Remember, Apache will only allow you to view sites in the folder you specified at the top of the "httpd-vhosts.conf" file in Step 7. If you move your development folder or want to add another one, you'll need to edit that code or add another instance.
I keep a shortcut of "hosts" and "httpd-vhosts.conf" in a folder on my desktop so I can access them easily when I want to create a new site. Unfortunately if you're running Vista, you'll have to access your hosts file through Notepad running as an administrator.

Summary

Congratulations! You now have a shiny server installed with virtual hosts configured and you're ready for some server-side scripting! Check back for Part 2 in my series Better Living Through PHP to learn how to use simple PHP scripts to speed up your web development workflow.
UPDATE 8/10/12: If you're going to be working on sites with custom .htaccess files, you'll need to set AllowOverride in Step 7:
?
<Directory C:/Users/Kristen/Documents/Projects>
AllowOverride All
Order Deny,Allow  
Allow from all
</Directory>


No comments:

Post a Comment