Setting up virtual hosts for local web development


Now that we have our LAMP stack installed, I will show you how to set up virtual hosts on Ubuntu so you can run and develop as many websites as you want.

When we set up our LAMP stack, we saw that the default website was located at /var/www/html. I like to set up my development sites under /var/www;
so an example would be var/www/
Following are the steps we need to take to set up this site.

Set up the configuration file

Open a terminal window and navigate to the directory where the site configurations are stored.
cd /etc/apache2/sites-available

Open a new configuration file for your new site. Note the .conf extension.
sudo nano

Enter (or cut and paste) the following standard block of code and edit for your site.

<VirtualHost *:80>
    DocumentRoot /var/www/
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

Press ctrl-x, enter Y and then press Enter to save and exit the file.

A few things to note:

  • The ServerAdmin line is commented out as it's not required. If active, it's what's sent to the client by Apache with any error messages.
  • The ServerName is our site's domain name.
  • The ServerAlias is standard with the www prefix.
  • The DocumentRoot is the location we chose for our site.
  • ErrorLog is the most important log directive as it provides the location where Apache logs any errors and the name of the file. This can be left as is.
  • CustomLog is used to log requests to the server. This can be left as is.

Enable the new site

Now that the configuration file has been saved, we can enable the site by entering:
sudo a2ensite

You will then be prompted to reload Apache and will need to enter:
sudo service apache2 reload

If you visit /etc/apache2/sites-enabled, you will see that a symlink has been created linking to the configuration file.

Edit the hosts file

Because we're not using a domain that will resolve through the DNS, we need to make an entry into our hosts file so the address can be resolved locally.

Open the hosts file by entering:
sudo nano /etc/hosts

You should see an entry as follows: localhost

Add a new line underneath as follows:

Press ctrl-x, enter Y and then press Enter to save and exit the file.

Creating the site directories and files

I like to have my sites' directories and files in my Home directory and then link to them from /var/www.

Navigate to your Home directory:
cd ~

Make your site's key directories:
mkdir -p

Navigate to /var/www:
cd /var/www

Create a symlink to the directories you just created:
sudo ln -s ~/

You can test your new site by creating a test index.html file inside your site's public_html directory.

Navigate to your site's public_html directory.
cd ~/

Open up a new index.html file.
nano index.html

Enter (or cut and paste) in the following html:

  <body bgcolor=white>
    <h2>This is a simple test page to show your new site is working.</h2>

Press ctrl-x, enter Y and then press Enter to save and exit the file.

Open your browser and enter the following into the address bar:
The test page message should appear.

Congratulations, you have set up your new site/virtual host and can repeat the process any time you need a new site in the future. Next we will be installing the Drupal content management system on our new site and make some configuration changes important for Drupal development.

Richard McCulloch's picture
Richard is a Director and the Senior Consultant of Single Version Pty Ltd. He is a strong supporter of free and open source software and especially how it can be used to empower businesses large and small. Richard holds degrees in science, BSc(Hons.), and business, MBA, and is a keen web developer and information technologist. He is a member of the Drupal Association and uses Drupal as the CMS of choice due to its power and flexibility and how it keeps pace with the evolving web due to the amazing community of people behind it.