Literally me

Vagrant and VirtualBox for local web server

When you seriously start working as a web developer, a proper development environment is a must. In fact, there are no suit-for-all solution, but I recommend my set up for those who have the very first step in this path (web developer): Vagrant and VirtualBox.

Why Vagrant? Why VirtualBox?

They’re free, yet useful. Maybe not the best, but it makes it work.

Production-like development server

You can build that server like a real one, with the same OS, softwares, and other configuration,… as much as you can. Actually, there are still gaps between them, but you can reduce those without change your machine too much, says, you don’t have to change your laptop OS to a linux distro so as to find the bug that happened in the live server.

Share the same development environment among the team

If you working in a team, you may run into the problem: my code run well on my desktop, check yours, dude!

Because you’re (all the team members) using the same image, we’re having the same environment no matter what OS they’re using (macOS, Windows, CentOS,…). It your code works, it works! You don’t have to wait to upload to a shared server for the team to test all your works. It makes the process smoother, painless (well, actually, less pain).

Let’s get started!

Download Vagrant here.

Download VirtualBox here.

Install all of them, of course!

Make your own project environment. Save this as Vagrantfile under your project root directory. Content as below:

VAGRANTFILE_API_VERSION = '2'
@script = <<SCRIPT
Install dependencies
LC_ALL=C.UTF-8 add-apt-repository ppa:ondrej/php
apt-get update
apt-get install -y apache2 git curl php7.3 php7.3-bcmath php7.3-bz2 php7.3-cli php7.3-curl php7.3-intl php7.3-json php7.3-mbstring php7.3-opcache php7.3-soap php7.3-sqlite3 php7.3-xml php7.3-xsl php7.3-zip libapache2-mod-php7.3

echo '<VirtualHost *:80>
DocumentRoot /var/www
AllowEncodedSlashes On
Options +Indexes +FollowSymLinks
DirectoryIndex index.php index.html
Order allow,deny
Allow from all
AllowOverride All
ErrorLog ${APACHE_LOG_DIR}/error.log
CustomLog ${APACHE_LOG_DIR}/access.log combined 
' > /etc/apache2/sites-available/000-default.conf
service apache2 restart
SCRIPT

Vagrant.configure(VAGRANTFILE_API_VERSION) do |config|
   config.vm.box = 'bento/ubuntu-18.04'
   config.vm.network "forwarded_port", guest: 80, host: 8080
   config.vm.synced_folder '.', '/var/www'
   config.vm.provision 'shell', inline: @script
config.vm.provider "virtualbox" do |vb|
     vb.customize ["modifyvm", :id, "--memory", "1024"]
     vb.customize ["modifyvm", :id, "--name", "My Project"]
   end
 end

Create an index.php file under your project root:

<?php
echo 'Voila!';

Run! (not you, the project!). Open terminal, go to your project root directory (where the Vagrantfile located) and run this command:

vagrant up

For the first time, it takes times to initialise the whole micro server in your machine. The next time will be faster. When the command finishes, open your browser and type this address: http://localhost:8080/

Voila!

Notes:
– For those who run Windows, the command needs the Administrator privilege
– You can change the lower port (eg. 80)