DEV Community

Cover image for Step-by-Step Guide: Setting Up Apache2 and Deploying an HTML Template on Ubuntu (Using Vagrant on a Local Machine)
Joseph Ibeh
Joseph Ibeh

Posted on

Step-by-Step Guide: Setting Up Apache2 and Deploying an HTML Template on Ubuntu (Using Vagrant on a Local Machine)

#linux #webserver #ubuntu

This article outlines the process of setting up an Apache2 web server on Ubuntu using Vagrant and deploying an HTML template for a mock finance site. The aim is to provide a comprehensive guide that details the steps involved in configuring a server and deploying a static website in a Linux environment.

Project Overview

The project utilizes Vagrant to initialize and configure a virtual machine (VM), set up Apache2 for serving web content, and deploy a downloadable HTML template. This hands-on experience is intended to enhance understanding of server configuration and web development, serving as a foundation for future projects.

Tools and Technologies

  • Apache2: A widely used, open-source web server software that enables the hosting of websites by serving web content to clients over HTTP.
  • Vagrant: A tool that automates the creation and management of virtualized environments, allowing for easy setup and destruction of VMs without affecting the host operating system.
  • Virtual Machines (VMs): VMs provide isolated environments that replicate physical computers, enabling the execution of different operating systems on a host machine for testing and development.

Steps to Set Up Apache2 and Deploy HTML Template

  1. Create Project Folder
    Create a folder named C:\vagrant-vms.

  2. Navigate and Create Directory
    Navigate to the folder and create a directory "finance" in Git Bash:

cd C:\vagrant-vms
mkdir finance
cd finance
Enter fullscreen mode Exit fullscreen mode

Output

  1. Initialize Vagrant Run the following command to initialize Vagrant with the ubuntu/focal64 box: 
vagrant init ubuntu/focal64
Enter fullscreen mode Exit fullscreen mode

Vagrant Init output

  1. Edit Vagrantfile Open the Vagrantfile for configuration: 
vim Vagrantfile
Enter fullscreen mode Exit fullscreen mode

Make the following changes in insert mode:

  • Uncomment the private IP address line and set it to 192.168.56.22.
  • Uncomment the config.vm.provider "virtualbox" do |vb| line.
  • Uncomment the vb.memory line (default memory can be increased if needed). Save and exit the editor with Esc, :wq.

IP Configuration

memory configuration

  1. Start the Virtual Machine Bring up the VM with: 
vagrant up
Enter fullscreen mode Exit fullscreen mode

vagrant up

  1. Log into the VM Log into the VM: 
vagrant ssh
Enter fullscreen mode Exit fullscreen mode

vagrant ssh

  1. Switch to Root User Switch to the root user: 
sudo -i
Enter fullscreen mode Exit fullscreen mode
  1. Change Hostname Edit /etc/hostname to set the hostname as finance: 
vi /etc/hostname
Enter fullscreen mode Exit fullscreen mode

Save and exit (Esc, :wq), then run:

hostname finance
Enter fullscreen mode Exit fullscreen mode

Log out and log back in:

exit
vagrant ssh
Enter fullscreen mode Exit fullscreen mode

new host name

  1. Install Required Packages Install Apache2, wget, vim, zip, and unzip: 
sudo apt install apache2 wget vim unzip zip -y
Enter fullscreen mode Exit fullscreen mode

apt install

  1. Start and Enable Apache2 Start the Apache2 service: 
systemctl start apache2
Enter fullscreen mode Exit fullscreen mode

Enable Apache2 to start on boot:

systemctl enable apache2
Enter fullscreen mode Exit fullscreen mode

start apache

enable apache

  1. Verify IP Address Run the following to check the IP address: 
ip addr show
Enter fullscreen mode Exit fullscreen mode

Copy the IP and check it in a browser to ensure Apache2 is running correctly.

verify ip

web output

  1. Verify Web Root Directory Navigate to the Apache2 web root directory: 
cd /var/www/html/
Enter fullscreen mode Exit fullscreen mode

List the contents to verify the directory where Apache serves files:

ls
Enter fullscreen mode Exit fullscreen mode

  1. Download HTML Template
    Visit Tooplate.com in a browser and select the "Mini Finance" template. Use Developer Tools (F12) to copy the direct download link visit the Network tab.

  2. Download and Unzip Template
    Change directory to /tmp and download the template:

cd /tmp/
wget https://www.tooplate.com/zip-templates/2135_mini_finance.zip
Enter fullscreen mode Exit fullscreen mode

Unzip the downloaded file:

unzip 2135_mini_finance.zip
Enter fullscreen mode Exit fullscreen mode

Navigate into the extracted directory:

cd 2135_mini_finance
ls
Enter fullscreen mode Exit fullscreen mode

download

unzip the file

list content after unziping of file

navigation

  1. Copy Files to Web Root Copy all files from the template folder to the Apache2 web root: 
cp -r * /var/www/html/
Enter fullscreen mode Exit fullscreen mode

copy

  1. Restart Apache2 Service Restart the Apache2 service to apply changes: 
systemctl restart apache2
Enter fullscreen mode Exit fullscreen mode

restart apache2 service

  1. Check Apache2 and Firewall Status Check the Apache2 status: 
systemctl status apache2
Enter fullscreen mode Exit fullscreen mode

Verify the firewall status:

systemctl status firewalld
Enter fullscreen mode Exit fullscreen mode

Stop and disable the firewall (note: this is not recommended for production):

systemctl stop firewalld
systemctl disable firewalld
Enter fullscreen mode Exit fullscreen mode

apache2 status

  1. Access Deployed Template Retrieve the IP address: 
ip addr show
Enter fullscreen mode Exit fullscreen mode

Open the IP in a browser to view the deployed HTML template.

ip address

deployed

deployed cont

Conclusion

This project provides a comprehensive overview of setting up an Apache2 web server on Ubuntu using Vagrant and deploying an HTML template. Following these steps not only facilitates the understanding of server configuration but also lays the groundwork for further exploration in web development and server management.

Top comments (2)

Collapse
 
osagie_anolu_d2226eba194c profile image
osagie anolu •

Amazing my President

Collapse
 
josephibehdev profile image
Joseph Ibeh •

I'm glad you find it amazing my brother. Thank you for the feedback.

Read next

shahzaibhaider profile image

TCP/IP Model vs OSI Model: A Detailed Comparison

Shahzaib Haider -

oliverbennet profile image

Trying to Install Docker on Ubuntu 24?

Oliver Bennet -

brogrammerjohn profile image

A performant and extensible Web Server with Zig and Python

brogrammerjohn -

tallesl profile image

Cleaning up syslog

Talles L -