How to host a web page with Apache
Tags: apache2, awsdeployment, devops, cloud
Published: 2024-04-29 15:41:49

Deploying websites on cloud servers has become a standard practice due to its scalability, flexibility, and accessibility. This article delves into the process of hosting a custom web page on Amazon Web Services (AWS) using Apache as the web server and Ubuntu as the operating system. 

Table of Contents
1. Introduction
2. Set up EC2 Instance
3. Install Apache webserver
4. Deploy your custom web page.
5. Conclusion


**- Introduction**
The Apache web server is like a reliable backbone that confidently handles the traffic powering websites and applications worldwide. Its versatility goes beyond simply hosting web pages. It is a powerhouse of features designed to keep your online presence secure, performant, and easily customizable.
In other words, Apache is a widely used open-source web server software that serves web content over the internet with key functionalities such as HTTP protocol handling, content delivery, virtual hosting among others. Apache is also highly compatible with various operating systems (e.g., Linux, Unix, Windows)
This article provides a detailed guide on how to host your custom web page with Apache.

Let's begin!

**- Set up EC2 Instance**
Log in to your AWS console. On the search bar, type in EC2. On the EC2 dashboard, scroll down and proceed to launch an instance.

![EC2 Launch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj2fgj12zh3mbss4q6f5.png)

Choose a name for your EC2 instance
![EC2 launch page ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/62umtq9nu0r39d9ihjyy.png)

Proceed to select your AMI(Amazon Machine Image). For this article, we will select the Ubuntu AMI.

![Ubuntu AMI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xfvvtf52yxoj7rlp65yz.png)

Scroll down to generate your key pair. We need it to be able to connect to the terminal. If you already have a key pair, you can use it at this point.

![Key pair generation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g85daa26z2hvjusbnc6x.png)

Let's create a key pair. Choose a name for your key pair, select the key pair type and proceed to create it.

![Create key pair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sehfesfieai6nghz9218.png)

On the security group settings, set the SSH, HTTPS and HTTP to allow traffic from anywhere and also from the internet.

![Security group](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73iu3s324c4w17ww682m.png)

Leave every other setting on default and proceed to launch your instance.
Once the EC2 instance has been launched successfully, you will see 2/2 checks passed underneath the status check.

Next, click on the instance ID 

![Instance ID](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txhsbfzlt2x6odzegm4s.png)

And connect via the EC2 Instance Connect. 
See the images below

![EC2 connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmvoxlq8wacjaumfkxdo.png)

![Ec2 Instance connect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cxf8gmxhokkzn7o95kuw.png)
Take note of the public IP address.

**- Install Apache Web Server**
Once you have connected and are in the terminal, run this command first to update your packages and dependencies.
`sudo apt update`
![Isudo apt update](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2id83q6uwe4g9nloquf.png)

Next, install apache2.
`sudo apt install apache2 -y`

The "-y" flag in the command above instructs the package manager to proceed with the installation without asking for confirmation. In other words, it bypasses the user's input during installations.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nvvlzfhmixqvaomalwc.png)

**- Deploy your custom web page**
i. Let's install git since we will be cloning a Github repo for this article.
`sudo apt install git`

![Install git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ru1h5bhgew89rvt7t50.png)

ii. Create a directory. This directory will be the location where you clone your Github repo. I'm using Florence as my directory, you can use any name of your choice.

`mkdir Florence`

![mkdir Florence](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wi8upnlc61hn444rftb.png)

Let's change our directory to the one we just created.
`cd Florence/`

![cd Florence/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5rbrx0iki2z83xojmiq.png)

iii. Let's initialize git in the Florence directory.
`git init`

![git init](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y3rqpgob6hunkounna6y.png)

iv. Let's clone our GitHub repository. This is the [link ](https://github.com/WendyOkoli/AltSchool-Assignment-3)to my GitHub repository. 

See the image below on how to copy the link.

![Github repo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ily73bikik58ursz87dk.png)

To clone the GitHub repo
`git clone https://github.com/WendyOkoli/AltSchool-Assignment-3`

![Github repo clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmir8xhgwbh00khnmzls.png)

iv. Let's create another directory but this time the directory will store web server files like _index.html, index.css_, etc.
To do this, let's run this command
`sudo mkdir /var/www/FlorenceOkoli`
Whatever name you choose to call your directory, please note that the '/var/www/'should be in it for it to achieve the purpose of storing web server files.

![/var/www/FlorenceOkoli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aritbzjpu14bsynsb3se.png)

v. Let's copy the content of our 'Florence' directory into the one we just created.
`sudo cp -R ./* /var/www/FlorenceOkoli`
  
![copy content](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxkzbe3re0p4xo4m1uz8.png)

Here's a breakdown of the command:

_**sudo**_: This stands for "superuser do". This command allows you to run other commands with administrative (root) privileges. It's necessary for commands that change system settings or modify system files, like this one.

_**cp**_: This is the command to copy files and directories.

-R: This option tells cp to copy directories recursively, meaning it will copy all the files and subdirectories within any directory you specify.

_**.***_: This is a wildcard that matches all files and directories in the current directory.

_**/var/www/FlorenceOkoli**_: This is the destination directory where the files and directories will be copied.

vi. Let's create a new file named FlorenceOkoli.conf
`sudo touch /etc/apache2/sites-available/ForenceOkoli.conf`


![Create empty conf file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rrpjj7qtsxtknncoox8u.png)
The command sudo touch `/etc/apache2/sites-available/FlorenceOkoli.conf` creates a new empty file named `FlorenceOkoli.conf` in the `/etc/apache2/sites-available/ directory`.
This is the first step in setting up a new web page with Apache.

vii. Let's create a copy of the default Apache site configuration file and name it FlorenceOkoli.conf.
To do this, let's run the command below
`sudo cp /etc/apache2/sites-available/000-default.conf /etc/apache2/sites-available/FlorenceOkoli`


![copy 000-default.conf file to the .conf file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kewi4yimjgyjfwizw145.png)

viii. Now that the FlorenceOkoli.conf file has been created, let's edit it to add the configuration of our new site.

`sudo nano /etc/apache2/sites-available/FlorenceOkoli.conf`


![Edit the file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lyy6xxc0puaw7gws4zj.png)

Your conf file should look exactly like the image below. Edit the DocumentRoot to be `/var/www/name of your conf file`


![Conf file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03av454agaukjh6ls59v.png)

Save your file and exit.

ix. Enable the FlorenceOkoli.conf file and disable the 000-default.conf file

First, enable the FlorenceOkoli.conf file
`sudo a2ensite FlorenceOkoli.conf`

Then disable the 000-default.conf file
`sudo a2dissite 000-default.conf`


![a2ensite & a2dissite](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/666w77tg8zf8zillzkag.png)
When these commands are run, it enables the site in the FlorenceOkoli.conf file and disables the site in 000-default.conf file.

To activate these new configurations in the conf file, run this command:

`sudo systemctl reload apache2` 

![systemctl reload apache2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14aq1xk0wxxv3zg0v3k6.png)

Finally, on your web browser where you have the displayed Apache web page, reload it and you will see your custom web page displayed. 
If you used my GitHub repo, the output of your web page should look like the image below:

![WP web page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/478r6cr5cfx9jo5yxlbi.png)

As soon as you are done following this guide, please terminate your EC2 instances to avoid incurring costs from AWS. Let the images below guide you on how to terminate your instance.

Go back to your console where you have your instance ID. Expand the Instance state box, click on terminate instance and follow the prompt.


![Instance termination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4f0qqyfrn2f9yqu20fyd.png)

![Instance termination](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj348e4lbgjanjye52c9.png)

Once this is done, you will find a pop-up like the image below to show that your instance has been successfully terminated.

![Instance termination complete](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kamsu1i2t2qdorthkxsi.png)

**- Conclusion**

Congratulations on successfully hosting your custom web page using Apache on AWS! In this guide, we covered the essential steps to set up an EC2 instance, install an Apache web server, and deploy a custom web page. By leveraging cloud infrastructure and open-source tools like Git and Apache, you've created a scalable and accessible platform for showcasing your web page.

Remember to terminate your EC2 instance to avoid unnecessary costs. Follow the provided steps to gracefully shut down your resources and manage your AWS environment efficiently.

I encourage you to explore further with Apache and AWS, experiment with different configurations, and customize your web hosting setup to meet your specific needs. Your feedback is valuable to me- please feel free to share your thoughts and experiences with this guide. I'm here to assist and improve based on your insights.

Thank you!