Host dev environment/website locally with VirtualBox

Host Dev Environment and Website On VirtualBox Virtual Machine

With VirtualBox it's very easy to host your development environment or website with a custom domain and TLD (e.g. notes.dev) locally, right on your computer. I do it all the time!

Considering that you already have VirtualBox installed on your computer, let's see how.

Create new VM & install guest OS

Start VirtualBox, create a new virtual machine, and configure it keeping the notes below in mind.

  • Guest OS: Debian or Ubuntu
  • Virtual hard drive type: Dynamically allocated
  • VM's settings: (right-click on the VM > select 'Settings')
    • Storage > Controller: IDE > Add CD/DVD Device > select Debian/Ubuntu ISO you downloaded for installation
    • Audio > uncheck 'Enable Audio'

With that set, start the virtual machine for the first time to install the guest operating system. The installation process is pretty straightforward from there, but here's a complete walk-through for first-timers.

First things first

Once you are all set, log-into your VM for the first time as 'root' and run these commands to:

  • Update the system
  • Install vim command-line text editor (as we'll need it later; nano comes pre-installed on Debian/Ubuntu if you prefer that)
  • shutdown the system, as we have other things to do
apt-get update && apt-get -y upgrade
apt-get -y install vim
shutdown -h 0

Once the shutdown is complete, take a snapshot of your VM so that if anything goes wrong, you can simply revert to the snapshot.

Configure network

First let's list our requirements for the VM:

  • Internet Access: The VM should be able to access the internet connection used by the host (e.g. for installing updates, downloading files, etc).
  • Access to/from host: To be able to transfer files to/from the host computer.
  • Static IP Address: In order to use a custom domain for the website hosted on the VM and other reasons.

These can be accomplished with any one of the three different network configurations (or modes) listed below. But you'd do well to go with the recommended configuration (3).

1. Bridged Networking

(NOTE: I've noticed that when my internet connection is slow or down, the connection to the VM from the host (via SSH or HTTP) becomes slow as well. For example, the website hosted on the VM loads slow.)

This is the simplest network configuration for your VM and just works. Go to VM's Settings > Network > select Bridged Adapter from the dropdown for Attached to option > click OK to save.

Go to VirtualBox VM Settings

VirtualBox Network Configuration - Bridged Adapter

Start the VM, login and run this command to get the IP address of your VM:

ifconfig

Your VM's console should output something like this:

VirtualBox Network Configuration - Bridged Adapter ifconfig output

Highlighted in the image (above) is the IPv4 address of the VM. Let's map our custom domain (notes.dev) to the VM's IP address. To do so, open the hosts file on the host as administrator or user with administrative privileges...

Location of 'hosts' file:

  • Windows XP/Vista/7/8: %SystemRoot%\system32\drivers\etc\hosts
  • Mac OS X: /etc/hosts
  • Linux (Ubuntu, Debian): /etc/hosts

...and add something like this:

192.168.1.3    notes.dev

This is how you'd do all that on Windows:

Map VirtualBox VM's IP Address To Custom Domain

With all that done, after we install and configure the web server on the VM, we'll be able to access our locally-hosted website at http://notes.dev (http:// is important as .dev is a custom—unrecognized—tld).

2. NAT

It is the default networking mode in VirtualBox and is enabled by default. Go to VM's Settings > Network and make sure that NAT is selected from the dropdown for Attached to option, just in case.

The disadvantage of NAT mode is that, much like a private network behind a router, the virtual machine is invisible and unreachable from the outside internet; you cannot run a server this way unless you set up port forwarding.

We need to set up port forwarding for the services we want to make accessible from the host, like HTTP and SSH. Go to VM's Settings > Network > Advanced > Port Forwarding > click the Insert new rule (Ins) button, and add new port forwarding rules as shown below.

VirtualBox NAT Configuration - Port Forwarding

Then add something like this in your host's hosts file:

127.0.0.1    localhost    notes.dev

With all that done, after we install and configure the web server on the VM, we'll be able to access our locally-hosted website at http://notes.dev.

NOTE! This NAT configuration only works on Windows due to a limitation of NAT on Unix-based hosts.

Forwarding host ports < 1024 impossible:

On Unix-based hosts (e.g. Linux, Solaris, Mac OS X) it is not possible to bind to ports below 1024 from applications that are not run by root. As a result, if you try to configure such a port forwarding, the VM will refuse to start.

So we need to tweak our configuration for Unix-based hosts to something like this:

VirtualBox NAT Configuration - Port Forwarding on Unix-based Hosts

But that also means our website will be accessible via http://localhost:8888 and http://notes.dev:8888 (don't forget to modify the hosts file as mentioned earlier). Not so nice!

3. Host-Only Networking & NAT (recommended)

In this case we'll be enabling two network adapters—Host-only and NAT. Host-only networking provides connectivity among VMs and the host, while NAT provides internet access to the VMs.

Before we can enable host-only networking, we need to create a virtual network adapter on the host system that the to/fro traffic (among VMs and the host) will go through. To do so, in VirtualBox's main menu, go to File > Preferences > Network > Host-only Networks tab > click the Add host-only network (Ins) button.

VirtualBox - Create Virtual Network Adapter For Host-only Networking

Double-click on the newly created network adapter's name or click the Edit host-only network (Space) button, and from the popup make note of the host IPv4 address and Network Mask for the adapter for later use; in our case they are 192.168.86.1 and 255.255.255.0 respectively. Also make sure that in the DHCP Server tab, Enable Server option is unchecked—we don't want DHCP server enabled as we need a static IP address for our VM.

VirtualBox Network Settings - Host IPv4 Address and Network Mask For Host-only Virtual Network Adapter

Now we're ready to enable the Host-only adapter for our VM. Go to VM's Settings > Network > under Adapter 1 select Host-only Adapter from the dropdown for Attached to option, then select the virtual network adapter we just created from the dropdown for the Name option.

Then go to the Adapter 2 tab under Network settings, select NAT from the dropdown for for Attached to option, and make sure the Enable Network Adapter option is checked. Click OK to save. This enables NAT alongside Host-only networking for our VM.

VirtualBox - Enable Host-only And NAT Adapters For VM

There's one last problem we need to resolve for our current network configuration to work.

We need to update our VM's network interface configuration (ref. /etc/network/interfaces) to our current network settings as it still directs to the old NAT configuration we had at the time of installing the guest OS. (NAT is default, remember?)

Start the VM and modify /etc/network/interfaces using vim or nano:

root@debian:~# vim /etc/network/interfaces

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
allow-hotplug eth0
iface eth0 inet dhcp

so that its contents look similar to this:

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
# Host-only Adapter
allow-hotplug eth0
iface eth0 inet static
    address     192.168.86.10
    netmask     255.255.255.0
    network     192.168.86.0
    broadcast   192.168.86.255

# The secondary network interface
# NAT Adapter
allow-hotplug eth1
iface eth1 inet dhcp

Notes:

  1. eth0 represents the Adapter 1 from our VM's network settings—the Host-only adapter. Similarly, eth1 represents Adapter 2 from our VM's network settings—the NAT adapter.

  2. The static in iface eth0 inet static allows us to set a static IP address for our VM.

  3. Remember the host IPv4 address and Network Mask for the Host-only network adapter we make note of earlier? The rest of eth0's configuration is based on that.

    • address represents the static IP address we want to allot to our VM. It can be anything in the range of IP addresses left over from the Network Mask (I don't know the math behind this, but could find many calculators that'd do the job for us). The host IP address range in our case is 192.168.86.0–192.168.86.255. But as the host IPv4 address for the adapter is already set to 192.168.86.1, we should use something else—192.168.86.10.
    • We know the value of netmask from before (→ Network Mask).
    • network and broadcast represent the lowest and highest possible IP addresses in the host IP address range.
  4. We use the default configuration for eth1, simply replacing eth0 in old configuration with eth1 as both represent NAT config.

With the configuration saved, reboot the system for the changes to take effect.

Check for issues:

  1. Run the system update command apt-get update && apt-get -y upgrade to check for internet connectivity.

  2. Run ifconfig to check if the IP address allotted to the VM is same as the one we set in /etc/network/interfaces.

Map the VM's IP address (192.168.86.10) to the custom domain (notes.dev) in the host's hosts file as shown before, so that after the web server is installed and configured on the VM, we'll be able to access our locally-hosted website at http://notes.dev.

Configure web server (Apache)

We need a web server (e.g. Apache, Nginx) to serve our files via HTTP. Setting up a web server is outside the scope of this tutorial, but to show how it's done, lets brush through some basic stuff.

Install Apache:

apt-get -y install apache2 apache2-doc apache2-utils

Create the website root:

mkdir -p /var/www/notes.dev/public/ /var/www/notes.dev/logs/

Create virtual host for notes.dev (NOTE: filename should be notes.dev on Debian and notes.dev.conf on Ubuntu Server 14.04+):

vim /etc/apache2/sites-available/notes.dev

entry:

<VirtualHost *:80>
    ServerName notes.dev
    ServerAlias *.notes.dev
    DocumentRoot /var/www/notes.dev/public
    ErrorLog /var/www/notes.dev/logs/error.log
    CustomLog /var/www/notes.dev/logs/access.log combined
</VirtualHost>

Enable the site:

a2ensite notes.dev

Enable mod_rewrite, mod_expires, mod_headers, mod_deflate and other important Apache modules:

a2enmod setenvif headers deflate filter expires rewrite include alias mime autoindex

Restart the Apache server to initialize all the changes:

service apache2 restart

Launch website

Drop a test index.html in the website's root directory, i.e./var/www/notes.dev/public, via SFTP (yes, you can connect to the VM via SSH and SFTP, just try it!) and open up http://notes.dev/index.html in your web browser.

Launch Website Hosted On VirtualBox VM

That's it. You are now successfully hosting a website on your VM, and right on your computer!

Questions, Feedback & Suggestions