« All Software Development Articles

Develop on Host Machine, Serve from LAMP VM (or other stack)

10/6/2017

Introduction

This article will describe how to set up a virtual machine with your choice of target platform (LAMP, Node, etc.) and configure it to serve a project located on the host machine. The steps are written for a Windows host system, however an OS X user should be able to follow along with only minor adjustments, and Ubuntu running Apache, MySQL, and PHP as the guest VM.

There are several advantages to this development process. Snapshots and rollbacks can be performed on the VM encouraging experimentation and more rapid development. Multiple VMs can be created for isolation of configuration and data between projects. The IDE and other tools such as source control and ancillary tools like chat and change control can run on the native OS while still using command line tools such as Composer or NPM on the guest web server.

Install VirtualBox

VirtualBox is an open source and frequently maintained application. It is comparable to VMware Workstation Player in features although admittedly is not as popular. As a developer, after using both you'll see that they are very similar in features and terminology and there isn't much difference when outside of a production environment. To start, download and install VirtualBox 5.1 at https://www.virtualbox.org/wiki/Downloads. Select the package for your platform e.g. Windows hosts or OS X hosts.

Double-click the downloaded file to begin installation. Follow the wizard and choose the defaults. You may lose network connectivity during the process and at the end will be prompted to reboot.

Create the Linux Virtual Machine

I like to choose the desktop flavor of Ubuntu for development Linux environments. There is a plethora of documentation and packages for the software I need seem to work well right out of the box. Debian is also one I use a lot. Fedora or CentOS may be better if you are targeting RHEL in production. It's likely that your production environment is quite different than your development environment regardless of OS. Make sure your test or pre-prod environments match production closely to account for this variation.

To create an Ubuntu Linux VM open the VirtualBox Manager and click the New button. You'll be proceeding through the Create Virtual Machine wizard specifying the parameters for your new environment. Give your VM a name and for Type and Version select Linux and Ubuntu (64-bit). For memory I allocated 4 GB and for the hard disk I created a new VDI format, dynamically allocated virtual hard disk with 80 GB of storage, although you can experiment and adjust these to your needs.

At the time of this writing Ubuntu 16.04 is the current LTS release. Download the installation ISO file from https://www.ubuntu.com/download/desktop. To start your VM for the first time select it from the VirtualBox Manager list on the left and side and click Start. You should see the VM open in a new window and be prompted to find the ISO you downloaded. If you're not, go to Devices and click Optical Drives then Choose Disk Image, then reset the VM from the Machine menu.

The Ubuntu graphical installer is fairly simple. Choose to download updates and install third-party software. The rest of the options are self explanatory...time, keyboard, first user. I like to give the computer the same name as in the VirtualBox Manager list but this is not required. Allow the installer to proceed and get a cup of coffee. Reboot when prompted and log in.

The next step is to install the VirtualBox Guest Additions. While logged in to the virtual desktop, click on the Devices menu and click Insert Guest Additions CD Image. On the Ubuntu platform a prompt will come up to start the install automatically, click Run. If you're not prompted, the script on the CD is VboxLinuxAdditions.run, run it with sudo. Afterwards, shut down the VM and, if desired, take your first snapshot. While powered off, select your VM in the manager and click on the Snapshots button in the upper right, only Current State should be visible. Click Take Snapshot and give it a name. Now you may revert to this point in time for this VM if desired.

Set up the Host-only Network Adapter

To access sites hosted on the VM we will create a virtual network link between it and the hosting machine using a Host-only Adapter. In the Manager go to File and click Preferences. Select the Network preferences and choose the Host-only Networks tab then click the Add New button.

On the Adapter tab keep the defaults, the IPv4 address here will be the host computer's address as seen from the VM. It should be something like 192.168.x.1. Go to the DHCP Server tab and check the Enable Server box. You will notice that the server addresses have the same first three groups as the Adapter address on the first tab, this is for convenience. However, you may not leave the addresses with a trailing 0. For Server Address, make the last number 100, for Mask leave it at 255.255.255.0, for Lower Bound make the last number 101, and the Upper Bound 254.

In a nutshell, the host machine IP ends in 1, the virtual DHCP server ends in 100, and the IP address range handed out by the DHCP server ends between 101 and 254. This is the basic functionality of the Host-only Network Adapter and DHCP server. This adapter has been added to the host machine and on Windows can be seen in the Network Adapters area of the Control Panel.

Next, give access to this Host-only Network to the VM. Right click on the VM and click Settings. Select Network and observe that Adapter 1 is a NAT adapter which allows the VM to browse the internet piggybacked on the host's connection. Click on the Adapter 2 tab, check the Enable box, and attach it to the Host-only Adapter with the name created above, then click OK.

To test this configuration, power on the VM. Open a terminal and type ifconfig. There should be three distinct sections of output. One for the NAT adapter with a 10.x.x.x address, one for the Host-only Adapter with a 192.168.x.101 address, and one for the loopback adapter with the standard loopback IP 127.0.0.1. On the host machine, in a command prompt try to ping the address of the VM's Host-only Adapter and you should get a response. This will be the address we use to view pages once we install the web server on the VM.

  After the Windows 10 Creators Update my Host-only Network Adapter was removed from Windows, VirtualBox Manager, and the VM settings. If this happens to you simply create a new adapter and assign it to the VM as shown above. I also updated VirtualBox and reinstalled the guest additions on guest, but I don't think that was required.

Install the LAMP Stack

Now it is time to install the server software stack. LAMP, Node.js and Mongo, and more all are possible and with this. The rest of this article will focus on LAMP, tweak the steps as necessary for your goals.

For the LAMP stack I will direct you to a great article at https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-16-04. Linode also has a quality walk-through for a LAMP stack at https://www.linode.com/docs/web-servers/lamp/install-lamp-stack-on-ubuntu-16-04. If you require mod_rewrite check out https://www.digitalocean.com/community/tutorials/how-to-rewrite-urls-with-mod_rewrite-for-apache-on-ubuntu-16-04. A good PhpMyAdmin article is at https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-12-04.

  For the link above, in a development VM I would not spend time configuring a UFW firewall on the server or adding unused extra PHP modules. I also may consider skipping some of the MySQL and PhpMyAdmin security steps. This highly depends on what sort of data will be stored on the VM and what network you're on. Best practice is to have no real data on your development environment at all. Also remember that you're not forwarding open ports from the host to the guest so this will limit what passes through to the VM's services.

Once complete, out of the default hosting directory, /var/www/html, create a simple page that dumps the output of phpinfo() (I believe this step is in the linked article) and view it in the browser from the host machine. The address will be http://192.168.x.101/phpinfo.php or whatever file name you gave. Also verify your PhpMyAdmin is accessible from the host. If something failed you can rollback to the previous snapshot and try again. If everything works, take another snapshot to have on hand.

Serve Files From the Host Machine

To share your Eclipse projects that physically reside on your host machine so that the VM actually serves them up we will share the workspace folder with the VM. Powered off, right click on the VM in Manager and click Settings. Select Shared Folders and click the Add button. Find your Eclipse workspace folder and set it to Auto-mount.

After powering on the VM the folder will be shared at /media/sf_[foldername] (the sf_ prefix is to denote a shared folder). To control the folders you will normally use, add yourself and the user named www-data to the vboxsf group using the command sudo usermod -aG [group] [user]. You will have to log out and back in for the new groups to be applied to yourself and restart Apache using sudo apachectl restart. Lastly, create a symlink from the shared folder to the hosting directory using the command ln -s /media/sf_[foldername] /var/www/html/sf_[foldername].

To test the configuration, create an Eclipse PHP project in Windows and create an index.php. Browse to this new project at http://192.168.x.101/sf_[foldername]/[projectname] and view your site.

Done

You've created a development server on a VirtualBox VM and have touched on many aspects of development and server configuration. The skills gained here can be used to create virtual development environments for plenty of other setups. The process could be changed to use VMware Workstation as the virtualization software or experimenting with server applications such as Wordpress or Drupal while having a safety net of snapshots along the way. If you like this article or have a correction let me know on my contact page.

Have a nice day.