Virtual Hosting

Virtual hosting is a method for hosting multiple domain names on a computer using a single IP address. This allows one machine to share its resources, such as memory and processor cycles, to use its resources more efficiently.

Introduction

This article will walk the reader through a few simple steps on how to setup a virtual web server in 10 minutes.  The steps outlined here describe how to install Apache Web Server with the MySQL Database, PHP, & Perl.  This is a tutorial on how to setup a virtual web server on the Apple Macbook Pro, but the same steps apply for a Microsoft Windows computer with a few simple modifications.

The Apple Macbook Pro OS X already comes bundled with a web server.  This Mac OS X web server can be enabled by following the steps outlined in this article, “How to set up a Web Server in Mac OS X Leopard“.

This tutorial will show how to install and configure a virtual web server for web development that can be removed at will.  Web developers experimenting with cutting edge technologies and custom configurations usually need multiple environments.

Please use caution when installing new software on computer systems.  A Best Practice includes creating system backups before changes.

1. How to Install Open Source Software

The good people at Apache Friends have made this step extremely easy.  People can download an Apache distribution containing MySQL, PHP and Perl in the XAMPP package.  Download and install XAMPP by following the steps defined at http://www.apachefriends.org/en/xampp.html

2. Edit the Local Host File

sudo nano /private/etc/hosts

The entries in this file start with something like this:

# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost

add the new server name to the bottom of the list here

127.0.0.1 virtualserver1.dev

Press control-o to save the file, then enter, and control-x to exit the editor.
Flush the DNS Cache to activate changes

dscacheutil -flushcache

3. Update the Virtual Host File

sudo nano /Applications/xampp/etc/extra/httpd-vhosts.conf

This file will look very similar to the text below. Delete everything in this file and add the virtual host information.

    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/Applications/XAMPP/xamppfiles/docs/dummy-host.example.com"
    ServerName dummy-host.example.com
    ServerAlias www.dummy-host.example.com
    ErrorLog "logs/dummy-host.example.com-error_log"
    CustomLog "logs/dummy-host.example.com-access_log" common

New Virtual Host File

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 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 127.0.0.1
 
    ServerAdmin webmaster@virtualserver1.dev
    DocumentRoot "/projects/virtualserver1/docs/public_html"
    ServerName virtualserver1.dev
    ServerAlias www.virtualserver1.dev
 
    Options Indexes FollowSymLinks Includes ExecCGI
    AllowOverride All
    Order allow,deny
    Allow from all
 
    ErrorLog "logs/virtualserver1-error_log"
    #Don't really need a log file for a local web server
    #CustomLog "logs/webtechman.dev-access_log" common

4. Update the HTTPD Config File

sudo nano /Applications/XAMPP/xamppfiles/etc/httpd.conf

Remove the comment from #Include /Applications/xampp/etc/extra/httpd-vhosts.conf
Original line

#Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Updated line

Include /Applications/xampp/etc/extra/httpd-vhosts.conf

Create a test file for the “Document Root” folder identified in the new virtual host and save it as “index.php”.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <title></title>
 <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
 </style>
</head>
<body>
<h1>Hello</h1>
<h2><?php echo "World"; ?></h2>
</body>
</html>

5. Viewing The Virtual Environment

Navigate to “/Applications/XAMPP” and run XAMPP Control

Start the database and web server from the XAMPP Control

Open a web browser and navigate to http://localhost and see the default XAMPP page.

Open a web browser and navigate to http://localhost/phpmyadmin/ and see the MYSQL database manager.

Open a web browser and navigate to http://virtualserver1.dev/index.php and see the test page from the new virtual web server.

Adding Additional Virtual Web Servers

Additional virtual web servers can be created by repeating steps 2 & 3.  The new virtual web servers will need unique names, for example: “virtualserver2″, “virtualserver3″, “virtualserver4″, or “mydevserver”.

Fixing MySQL error 13 on Mac OS X 10.6.x: This error usually occurs when the curly quotes are used in the configuration files, which happens when copying and pasting code from the web.  This error can be fixed by changing these “HTML quotes” to normal “quotes”.

Summary

Setting up virtual web servers in the development environment is a very simple task.  Local instances of web server software allows web developers to experiment with features of web applications like WordPress blog software.  The new features can be tested locally before implemented in a production environment.  Each of these virtual environments can be configured to meet custom needs.  Learn more about Apache Web Server Name-based Virtual Hosting here.

Note: The “Document Root” is outside of the web server software installation, which allows replacing the current web server software with something like “Zend Server” without disrupting current web site files.