inanzzz | Accessing vagrant virtual machine from the browser of host machine

In this example, we're going to set up a virtual ubuntu box with vagrant as a guest operating system and access it's apache server from the host operating system's browser with a static IP address.

Configuration

I'm assuming that you already have installed vagrant and Oracle VM software. I also assume that the ubuntu/trusty64 box is already added to your filesystem with vagrant box add ubuntu/trusty64 command. If you're not sure, you can confirm it with ls -l ~/.vagrant.d/boxes/ command.

Create a new project folder

$ mkdir ubuntu-trusty64
$ cd ubuntu-trusty64/

Initialise vagrant box

$ vagrant init ubuntu/trusty64
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.

Update Vagrantfile

# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure("2") do |config|
    # Name of the vagrant development box
    config.vm.box = "ubuntu/trusty64"

    # The static IP that enables us to access vagrant environment from outside
    config.vm.network "private_network", ip: "192.168.50.10"

    # The file that contains command which will be run while setting up the environment
    config.vm.provision :shell, path: "bootstrap.sh"

    # Folders to use shared resources.
    # You must create "public" folder in project root of host OS
    # The "/var/www/html" will be created automatically and it is the DocumentRoot
    config.vm.synced_folder "public", "/var/www/html"

end

Create the shared folder

$ mkdir public

Create bootstrap.sh file

$ touch bootstrap.sh

Place content below into the file.

#!/usr/bin/env bash

# BEGIN ########################################################################
echo -e "-- ------------------ --\n"
echo -e "-- BEGIN BOOTSTRAPING --\n"
echo -e "-- ------------------ --\n"

# VARIABLES ####################################################################
echo -e "-- Setting global variables\n"
APACHE_CONFIG=/etc/apache2/apache2.conf
VIRTUAL_HOST=localhost
DOCUMENT_ROOT=/var/www/html

# BOX ##########################################################################
echo -e "-- Updating packages list\n"
apt-get update -y -qq

# APACHE #######################################################################
echo -e "-- Installing Apache web server\n"
apt-get install -y apache2

echo -e "-- Adding ServerName to Apache config\n"
grep -q "ServerName ${VIRTUAL_HOST}" "${APACHE_CONFIG}" || echo "ServerName ${VIRTUAL_HOST}" >> "${APACHE_CONFIG}"

echo -e "-- Allowing Apache override to all\n"
sed -i "s/AllowOverride None/AllowOverride All/g" ${APACHE_CONFIG}

echo -e "-- Updating vhost file\n"
cat > /etc/apache2/sites-enabled/000-default.conf <<EOF
<VirtualHost *:80>
    ServerName ${VIRTUAL_HOST}
    DocumentRoot ${DOCUMENT_ROOT}

    <Directory ${DOCUMENT_ROOT}>
        Options Indexes FollowSymlinks
        AllowOverride All
        Order allow,deny
        Allow from all
        Require all granted
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/${VIRTUAL_HOST}-error.log
    CustomLog ${APACHE_LOG_DIR}/${VIRTUAL_HOST}-access.log combined
</VirtualHost>
EOF

echo -e "-- Restarting Apache web server\n"
service apache2 restart

# TEST #########################################################################
echo -e "-- Creating a dummy index.html file\n"
cat > ${DOCUMENT_ROOT}/index.html <<EOD
<html>
<head>
<title>${HOSTNAME}</title>
</head>
<body>
<h1>${HOSTNAME}</h1>
<p>This is the landing page for <b>${HOSTNAME}</b>.</p>
</body>
</html>
EOD

# END ##########################################################################
echo -e "-- ---------------- --"
echo -e "-- END BOOTSTRAPING --"
echo -e "-- ---------------- --"

Run vagrant box

If you ever change your "bootstrap.sh" file, you'll need to run vagrant reload --provision command instead.

$ vagrant up
==> default: ......
==> default: ......
==> default: ......
==> default: -- ------------------ --
==> default: -- BEGIN BOOTSTRAPING --
==> default: -- ------------------ --
==> default: -- Setting global variables
==> default: -- Updating packages list
==> default: -- Installing Apache web server
==> default: Reading package lists...
==> default: Building dependency tree...
==> default: Reading state information...
==> default: apache2 is already the newest version.
==> default: 0 upgraded, 0 newly installed, 0 to remove and 0 not upgraded.
==> default: -- Adding ServerName to Apache config
==> default: -- Allowing Apache override to all
==> default: -- Updating vhost file
==> default: -- Restarting Apache web server
==> default:  * Restarting web server apache2
==> default:    ...done.
==> default: -- Creating a dummy index.html file
==> default: -- ---------------- --
==> default: -- END BOOTSTRAPING --
==> default: -- ---------------- --

Access the box

$ vagrant ssh
vagrant@vagrant-ubuntu-trusty-64:~$

Check apache

$ apache2 -v
Server version: Apache/2.4.7 (Ubuntu)
Server built:   May  4 2016 17:05:10

Check if webserver is responding

$ wget -qO- 127.0.0.1
<html>
<head>
<title>vagrant-ubuntu-trusty-64</title>
</head>
<body>
<h1>vagrant-ubuntu-trusty-64</h1>
<p>This is the landing page for <b>vagrant-ubuntu-trusty-64</b>.</p>
</body>
</html>

Access webserver from host browser

If you go to http://192.168.50.10/ in the browser, you should see response below.

vagrant-ubuntu-trusty-64

This is the landing page for vagrant-ubuntu-trusty-64.