DEV Community

ThankGod Chibugwum Obobo
ThankGod Chibugwum Obobo

Posted on • Originally published at actocodes.hashnode.dev

Set Up Vagrant With Apache2 and Serve a Static Page via Port Forwarding

Vagrant isolates dependencies and their configuration within a single disposable, consistent environment, without sacrificing any of your existing tools. In lay-man terms vagrant helps you package a light weight bootable environment (OS) called boxes, which can be run on a hypervisor or a containerization platform.

Prerequisites

To get going with vagrant you'll need the following:

  • An installation of the vagrant binaries in your system PATH (this makes vagrant available in your terminal)
  • A hypervisor like virtualbox or a containerization platform like docker
  • A vagrantfile which is a configuration file written in ruby that tells vagrant how to cook your environment
  • A vagrant box which is the lightweight base image from which vagrant builds your custom environment

Getting Started with Vagrant

Follow these steps to get going with a vagrant environment:

  1. Install the vagrant binaries

  2. Install the virtualisation software or hypervisor

  3. Initialize your project with the shell command vagrant init ubuntu/focal64 in your project directory. This creates a vagrantfile in your current working directory. Here's a breakdown of the vagrantfile created:

# initiate a vagrant configuration block using the configure method
Vagrant.configure("2") do |config| 
  # set "ubuntu/focal64" as the base image to use
  config.vm.box = "ubuntu/focal64"
  # end the configuration block
end
Enter fullscreen mode Exit fullscreen mode
  1. Spin up your virtual environment with the shell command vagrant up in your project directory. This goes ahead to cook a new environment from the provided base image using the configuration in your vagrantfile.

  2. Access your virtual environment with the shell command vagrant ssh in your project directory. This will directly place you in a new shell environment on your guest environment/virtual environment.

  3. Exit the virtual environment by running the command logout. This takes you out of ssh and back into your project directory.

  4. Remove the virtual environment by running vagrant destroy in your project directory to remove all traces of the guest machine from your host PC.

How to Complete The Task: Create a Web Server Using Apache2

Note: Remember to use sudo if you encounter permission issues.

Step 1: Create the HTML File

  1. Create a new directory in your project directory:
mkdir html
Enter fullscreen mode Exit fullscreen mode
  1. Move into the new directory:
cd html
Enter fullscreen mode Exit fullscreen mode
  1. Create a new file:
touch index.html
Enter fullscreen mode Exit fullscreen mode
  1. Edit the file with nano index.html and add the following content:
<!DOCTYPE html>
<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  1. Save the file with CTRL+O then ENTER and exit with CTRL+X. This is the html file we'll be serving.

Step 2: Set Up Apache2 Manually

  1. Follow the steps above to spin up a virtual environment and ssh into it.

  2. From the ssh environment, update the package lists:

apt update
Enter fullscreen mode Exit fullscreen mode
  1. Install Apache2:
apt install apache2
Enter fullscreen mode Exit fullscreen mode
  1. Remove the default /var/www directory:
rm -rf /var/www
Enter fullscreen mode Exit fullscreen mode
  1. Create a symbolic link to serve files from the shared folder:
ln -fs /vagrant /var/www
Enter fullscreen mode Exit fullscreen mode
  1. Verify the setup:
wget -qO- 127.0.0.1
Enter fullscreen mode Exit fullscreen mode

This should return the contents of the html file we created above.

Automating the Setup with Provisioning Scripts

There's a shortcut to all this using scripting or automation. We can create one more file in our project directory, say bootstrap.sh, and add the following as its contents:

#!/usr/bin/env bash

# update package lists
apt-get update
# install apache2 from apt(advance package tool)
apt-get install -y apache2
# sets up a redirect for apache2 from "/var/www" to "/vagrant"
# (essentially this tells apache2 to serve the files from /vagrant, which is the shared folder set up by vagrant between our host pc and the guest VM.)
if ! [ -L /var/www ]; then
  rm -rf /var/www
  ln -fs /vagrant /var/www
fi
Enter fullscreen mode Exit fullscreen mode

Notice that the contents of the new file are actually the commands with which we installed and set up apache2. Now we need vagrant to be aware that we want to run this script while setting up our environment. To do that, our vagrantfile needs to be edited as such:

# initiate a vagrant configuration block using the configure method
Vagrant.configure("2") do |config|
  # set "ubuntu/focal64" as the base image to use
  config.vm.box = "ubuntu/focal64"
  # tell vagrant to run our bash script during setup
  config.vm.provision :shell, path: "bootstrap.sh"
  # end the configuration block
end
Enter fullscreen mode Exit fullscreen mode

With these changes made, we can go ahead to run vagrant up to spin up our environment, and once it's done we can run wget -qO- 127.0.0.1 to test our server.

Port Forwarding With Vagrant

To forward a port is simply giving access to your guest system from the host system. Essentially, this provides a way to communicate with your guest system, by giving it a location, more casually a door to its apartment where you can knock on to make requests or talk to it.

To achieve this, add another line to the vagrant config block in the vagrant file:

# initiate a vagrant configuration block using the configure method
Vagrant.configure("2") do |config|
  # set "ubuntu/focal64" as the base image to use
  config.vm.box = "ubuntu/focal64"
  # tell vagrant to run our bash script during setup
  config.vm.provision :shell, path: "bootstrap.sh"
  # tell vagrant to forward the port 80 on the guest to port 4567 on the host.
  config.vm.network :forwarded_port, guest: 80, host: 4567
  # end the configuration block
end
Enter fullscreen mode Exit fullscreen mode

With this new instruction we successfully open a portal to reach our guest system through the host. So any requests or messages that go to port 4567 on the host are forwarded to port 80 on the guest system. We can now open our browser and visit localhost:4567 and we should get our html page as response.


Connect with me on LinkedIn

Top comments (0)