Virtualizing Your Web Development Environment With VirtualBox

If you’re a part-time developer or you don’t use your computer exclusively for web development, it makes sense for you not slowing things down with Apache and MySql every time you boot up.

Aside from grinning and bearing it, one option to solve this would be to start these services when you need them from the command line. It’s a fairly simple sudo service apache2 start in most Linux distributions, or the new sudo start apache2 way for Ubuntu.

An alternative, which has its own advantages, is to install your services in a virtual machine and load up the VM when you’re working.

Actually, it’s perfectly possible to use this set-up for more than just single-person local development, and many developers do this.

One great advantage a virtualized development environment has is that it can be made to model almost exactly your production server, by having the exact same packages installed, having to SSH into it and deal with permissions, utilizing it for version control etc. That makes deployment of new features much safer since you already know precisely how and that they will work.

Another advantage is it keeps your operating system install clean of unnecessary packages you don’t really want clogging up your system.

Whatever your reasons for wanting to, here’s how to virtualize your local web development environment.

For this tutorial, we’ll be using VirtualBox, and installing LAMP on Ubuntu Server. This is a common combination, and they’re all free and open source.1

Install VirtualBox

If you’re on Windows or Mac, you can find the latest VirtualBox installer here. If you’re running Linux, you can find binaries here. If you’re on a Debian-based distro just run sudo apt-get install virtualbox from a terminal.

Insert Ubuntu Server Live CD Into CD Drive

Insert Ubuntu Server Live CD Into CD Drive

Create Ubuntu Server VM

Once installed, load up VirtualBox and create a new Ubuntu Linux VM. I created a 32-bit Ubuntu Server with 2.5GB RAM since roughly reflects my production server. (Make sure you’ve enough RAM on your computer when deciding how much to give the VM!) With the new VM, open its settings, and on the Storage tab, “insert” the Ubuntu Server .ISO image into the VM’s CD drive. I’m installing Ubuntu 12.04.

Installing OpenSSH and LAMP

Be sure to check OpenSSH and LAMP when you reach this screen.

Install Ubuntu Server

Once that’s done, and you’ve tweaked any other settings you’d like, accept them and start the VM. The Ubuntu Server install process is quite simple but can take a few minutes. You can find tutorials elsewhere on the Internet if you need help with it, just be sure to check “LAMP” and “OpenSSH” when given a list of packages to install (see screenshot to the left).

Make it Accessible From the Host2 Machine

Whilst it’s installing, we can continue to make a little progress. In order to make your virtual environment accessible from your host machine, VirtualBox has to be configured to forward requests through to the virtual machine:

Update: If you need the VM to be accessible from other devices on your network, select “Bridged Adapter” as the adapter type on the Network Settings page, and disregard the port forwarding info below. This enables the VM to communicate with your network as if it were a real host, bypassing the host OS’s network stack (More on virtual networking with VirtualBox).

On the Network tab of the VM’s settings, you will find a button labelled “Port Forwarding”. Open it up and add the following rules. (Note that if you’re on Linux, the port numbers you choose have to be above 1024, since ports below that require higher privileges to attach to. See footnote.)3

Protocol: TCP
Host IP: 127.0.0.1
Host Port: 8888
Guest IP: 10.0.2.15
Guest Port: 80
Protocol: TCP
Host IP: 127.0.0.1
Host Port: 2222
Guest IP: 10.0.2.15
Guest Port: 22
Setting Up Port Forwarding

Setting up port forwarding. See the article text to see how to determine the Guest IP.

The Guest IP may be different for you. To find it, run the command ifconfig from the virtual machine once Ubuntu Server’s installed and restarted. If you change any port forwarding rules, a restart of the VM may be required for them to take effect (you can do that quickly with sudo reboot):

Finding the IP Address of the VM

The IP Address of the VM, the “Guest IP”, is the “inet addr”, in my case 10.0.2.15.

Testing It Out

Once all that’s done, your virtual environment should now be accessible from your host machine.

In a web browser, navigate to http://127.0.0.1:8888/. If everything’s good, you should see a message saying “It works!” – the default greeting page of Apache server.

It works!

It works! This is the page you should see at http://127.0.0.1:8888/.

Making it Useful with SSH

To set up SSH, so you can use version control software4 and access it like a remote server, you obviously require an SSH client. Free clients are available for Windows and Mac; Debian-derivative users can run sudo apt-get install openssh-client.

To SSH into the virtual server, Linux/Mac users can run ssh [user]:127.0.0.1 -p 2222 where [user] is the username you chose at install and 2222 is the “Host Port” from the Port Forwarding dialogue. Windows users can use PuTTY to do the same thing (get PuTTY from the page linked above). You’re now inside the VM from your host machine’s command line, just as when SSHing into a remote machine:

SSHing Into the Server

SSHing into the virtual server from Ubuntu terminal.

A Note About Permissions

By default, Apache uses /var/www/ as the web directory. If you want to edit files in that directory, you’ll need to change its owner to your user. Eg I would run cd /var/www/ && sudo chown matt . index.html (note the dot) from inside the VM.

Accessing the Filesystem via a GUI

Since OpenSSH server comes preinstalled with an SFTP server, you can mount the virtual server as a drive on your filesystem. This makes copying files over much easier, should you need to.

Mounting Filesystem from Nautilus

Mounting the virtual environment from Nautilus in Ubuntu. The parameters should be the same for Win SSHFS and Macfusion.

In Windows, you can use Win SSHFS.

For Mac, there is Macfusion which can mount the virtual server’s filesystem in Finder. (Note: I’ve personally never used this software).

In Ubuntu, you can mount the VM’s filesystem from Nautilus, the Ubuntu filesystem browser: select File->Connect to Server and enter the server’s details. Altenatively, the command gvfs-mount sftp://[user]@127.0.0.1:2222 does the same thing.

If none of these work, you can always connect using FileZilla or other FTP software.

Conclusion

Virtualizing your web development environment is a great way to streamline and professionalize your development process, and do away with unnecessary boot-up times and a bloated operating system at the same time. This tutorial really just presents the start of getting your environment fully set up and optimized; separating services like Apache and MySql into different VMs is a common next step if you need finer-grained control.

I’m interested to hear about your experiences with virtualization. Do you already use a virtual web development environment? What made you make the switch?

  1. If you use Windows server, you might like to look here: http://www.personal.psu.edu/sal21/blogs/stuff/2009/06/create-a-web-application-devel.html. []
  2. ie The one you’re on now []
  3. If you are bothered by this (I mean, port numbers in the address bar are pretty unsightly), a workaround is to set up a reverse proxy (nginx, squid, or Apache) on the host system to redirect requests to the right port on the VM. Eg in Apache, in httpd.conf:

    LoadModule proxy_module /usr/lib/apache2/modules/mod_proxy.so
    
    ProxyRequests Off
    ProxyPreserveHost On
    <Proxy *>
        Order allow,deny
        Allow from all
    </Proxy>
    
    ServerName localhost
    ProxyPass / http://127.0.0.1:8888/
    ProxyPassReverse / http://127.0.0.1:8888/
    DocumentRoot /var/www/
    

    []

  4. Setting up version control etc. is outside the scope of this tutorial, but here’s a good one for Git. []