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
Create Project Folder
Create a folder namedC:\vagrant-vms
.Navigate and Create Directory
Navigate to the folder and create a directory "finance" in Git Bash:
cd C:\vagrant-vms
mkdir finance
cd finance
- Initialize Vagrant
Run the following command to initialize Vagrant with the
ubuntu/focal64
box:
vagrant init ubuntu/focal64
- Edit Vagrantfile
Open the
Vagrantfile
for configuration:
vim Vagrantfile
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 withEsc
,:wq
.
- Start the Virtual Machine Bring up the VM with:
vagrant up
- Log into the VM Log into the VM:
vagrant ssh
- Switch to Root User Switch to the root user:
sudo -i
- Change Hostname
Edit
/etc/hostname
to set the hostname asfinance
:
vi /etc/hostname
Save and exit (Esc
, :wq
), then run:
hostname finance
Log out and log back in:
exit
vagrant ssh
- Install Required Packages Install Apache2, wget, vim, zip, and unzip:
sudo apt install apache2 wget vim unzip zip -y
- Start and Enable Apache2 Start the Apache2 service:
systemctl start apache2
Enable Apache2 to start on boot:
systemctl enable apache2
- Verify IP Address Run the following to check the IP address:
ip addr show
Copy the IP and check it in a browser to ensure Apache2 is running correctly.
- Verify Web Root Directory Navigate to the Apache2 web root directory:
cd /var/www/html/
List the contents to verify the directory where Apache serves files:
ls
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.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
Unzip the downloaded file:
unzip 2135_mini_finance.zip
Navigate into the extracted directory:
cd 2135_mini_finance
ls
- Copy Files to Web Root Copy all files from the template folder to the Apache2 web root:
cp -r * /var/www/html/
- Restart Apache2 Service Restart the Apache2 service to apply changes:
systemctl restart apache2
- Check Apache2 and Firewall Status Check the Apache2 status:
systemctl status apache2
Verify the firewall status:
systemctl status firewalld
Stop and disable the firewall (note: this is not recommended for production):
systemctl stop firewalld
systemctl disable firewalld
- Access Deployed Template Retrieve the IP address:
ip addr show
Open the IP in a browser to view the deployed HTML template.
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)
Amazing my President
I'm glad you find it amazing my brother. Thank you for the feedback.