Hey there, at Amedia Creative we wanted to give back to our community. With this tutorial, we are going to take a look at the best way to configure a local web server to serve fake domain/subdomains (or virtual hosts) accessible via our browser of choice. Using virtual hosts is a really useful solution to isolate configurations for each virtual host–and it’s easier to migrate code.

Okay, time to get started!

For this How To, we are using Windows XP as our OS and AppServ v2.5.10 (we assume that you have AppServ already installed in your computer).

The first thing we need to do, is to enable the vhost_alias_module in our Apache configuration file. To do this, we need to open the httpd.conf file located in C:\AppServ\Apache2.2\conf (if we follow the standard installation procedure).

Around line 203, we uncomment this line by changing this:

#LoadModule vhost_alias_module module/mod_vhost_alias.so

to this:

LoadModule vhost_alias_module module/mod_vhost_alias.so

In the same file, around line 506, we also uncomment this line by changing this:

#Include conf/extra/httpd-vhosts.conf

to this:

Include conf/extra/httpd-vhosts.conf

Now we can save our changes and close the file.

With these changes, our local Apache Web server is configured to serve virtual hosts, however, we still don’t have any vhost configured, so we are doing that next.

We need to edit the vhosts file (httpd-vhosts.conf) in order to define our virtual hosts. So we open the file (located in C:\AppServ\Apache2.2\conf\extra) to setup the first virtual host which is localhost (so we can still have access to phpMyAdmin and subdirectories in our web root folder). We change the first virtualhost container for our localhost from this:

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host.x
    DocumentRoot "C:/Apache2.2/docs/dummy-host.x"
    ServerName dummy-host.x
    ServerAlias www.dummy-host.x
    ErrorLog "logs/dummy-host.x-error.log"
    CustomLog "logs/dummy-host.x-access.log" common
</VirtualHost>

to this:

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

Now our localhost vhost is setup, to test it, we need to restart the Apache server, to do this go to Start > Control Panel > Administrative Tools > Services (or even faster, you can hit Windows Key + R and type services.msc), click on the Apache2.2 service and click on the Restart button.

If we type “localhost” in our browser and we see the AppServ welcome page, then our localhost vhost is working.

Next, we will setup a custom vhost for our “Sparta” webapp project. To do this, let’s create a new folder called “sparta” in C:\AppServ\www and an index.html file with some text in it (I wrote a “This is Sparta!” text).

Now, we need to change the second vhost container from this:

<VirtualHost *:80>
    ServerAdmin webmaster@dummy-host2.x
    DocumentRoot "C:/Apache2.2/docs/dummy-host2.x"
    ServerName dummy-host2.x
    ErrorLog "logs/dummy-host2.x-error.log"
    CustomLog "logs/dummy-host2.x-access.log" common
</VirtualHost>

to this:

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

With this, our www.sparta.com virtual host is setup, now we need to edit our hosts file to force our OS to resolve our virtual host to our local server, so we add a new line to end of the file like this:

127.0.0.1    www.sparta.com

Now we just need to restart our Apache server (like we did before), open our browser and go to our newly created virtual host. If you see the text you entered in the index.html file, then you have a brand new virtual host up and running in your server.

Happy coding!

On Saturday, January 23, 2010 · 2 Comments »