Virtual Hosts for Development with Apache on Ubuntu

I do a lot of development on Ubuntu, as I often have multiple projects on the go which are nothing to do with each other, it’s often easier to create separate virtual hosts on my local development machine. This means that when they are ready for the “real world”, they are already set up as isolated sites at the root of their domain (rather than in a subdirectory of an existing site).

In order to do this, you need to create a new virtual host in your Apache config. Create a new file in the directory /etc/apache2/sites-available and open it in your favourite editor. It doesn’t matter what the file is called, but it’s best to keep it descriptive. We’ll call this project “mysite”, so the file can be called “mysite”. In the file we need to configure the Apache virtual host.

<VirtualHost 127.0.0.1>
ServerName mysite.localhost
DocumentRoot /var/www/mysite/public/
</VirtualHost>

In the VirtualHost tag, you put the IP, seeing as I only want this for local loopback (for development) I have just put 127.0.0.1. The ServerName is the URL that you use to connect to the site and the DocumentRoot is where the public documents are stored. This is a very basic set up, so there are many more options you can add.

To make the site enabled, you create a symbolic link to the file from the sites-enabled directory.

cd /etc/apache2/sites-enabled
ln -s ../sites-available/mysite mysite

You now need to add the subdomain (mysite.localhost) to the list of hosts, so open /etc/hosts in your favourite editor and append the line:

127.0.0.1 mysite.localhost

And then restart Apache:

sudo /etc/init.d/apache2 restart

Now you should be able to visit http://mysite.localhost on the local machine (assuming the directory does actually exist).

This should also be similar on MacOS and other linux Distros, but the file locations (particularly for Apache) will vary.

  • Yet again Rick another great short and to the point tip. I’ll certainly be using this setup myself as it makes a lot of sense to have different projects set up this way.

    Thanks!

  • Another way to quickly enable/disable websites available in the sites-available/ directory;
    sudo a2ensite websiteFileNameThatYouMade
    sudo a2dissite websiteFileNameThatYouMade

    All the a2ensite/a2dissite does is make or destroy the link quickly for you. When enabling new mods on a Ubuntu Apache server (like mod_rewrite) it’s similarly done by “sudo a2enmod rewrite”.

    Reloading Apache’s configuration (rather than restarting it) is also good when peeps move up into a production environment

    sudo service apache2 reload
    or
    sudo /etc/init.d/apache2 reload

  • Rick Ogden

    Good points there. Thanks!

  • Kris

    Thank you very much Rick! This is what I was looking for!

    Regards,
    Kris

  • Thank you for the guide.

    If I just put “127.0.0.1” for the IP of “mysite.localhost” and the IP for the “localhost” is the same, “localhost” will get overridden. By visiting “localhost” you see “mysite.localhost”.

    If I increase the last number in the IP, it works. This are the lines in my /etc/hosts file:


    127.0.0.1 localhost
    127.0.0.2 mysite.localhost

    Same IP must be found in the /etc/apache2/sites-available/mysite file.