Web Development: Apache2 Servers

At some point in your web development journey you’ll want full control of your website, and mastering the art of web hosting can bring you closer to that goal. If you’re reading this article I assume you’re comfortable looking at code, and using the linux terminal. I’ll be touching on the basics of setting up your apache2 server using a raspberry pi 4B model, so you should have some experience.

Side note: if you haven’t experimented with a raspberry pi I highly recommend it. They can encompass a wide range of practical projects, and teach you so much on the wonderful world of Linux. The price of entry is low. My pi came in a kit at around $100 (brand new at the time). You can also do this on older versions of the pi that can cost as low as $10. Don’t snub your nose at a pi Zero W. They’re dope machines.

To start off open your command line, and download the necessary packages to create what is know as our LAMP stack: Linux, apache2, php, and mysql.

sudo apt-get install apache2 -y
sudo apt-get install php libapache2-mod-php -y
sudo apt-get install mariadb-server

What’s ‘mariadb’? Well it’s the package that holds our mysql, and to install it we’ll use:

sudo mysql_secure_installation

and to access the db through php…

sudo apt-get install php-mysql

Now I won’t be showing you how to use php and mysql in this article, but by all means please explore more of these on your own.

Now if all went well you should be able to see the default web page on your browser by typing in your hostname.local (mine would be pi4b.local). You can adjust your host-name using the ‘sudo raspi-config’ command under system options if you’d like.

Now from here there are two important folders where we’ll do most of our adjustments. The first being /var/www. This is where our web apps live. There you should see the default apache2 page in the html folder. Check it out, and see how the file and folders are set up. For fun I’ll set up two test folders, and in each their own index.html file.

The second folder we need to know about is located at /etc/apache2. Here look at the sites-available folder and sites-enabled. It’s here we configure our test1 and test2 folders so that they render on our server. In sites-enabled you’ll see 000-default.conf already there. That’s apache’s default website. In order to disable use the a2dissite command:

sudo a2dissite 000-default.conf

Let’s take a gander inside.

The first thing we notice is that our information is enclosed in a VirtualHost tag. What V.H. allows apache2 to do is server up multiple websites on the same server. This is great because you don’t need an individual server for each website. It’s dynamic! The first line contains the port number. Here it’s port 80 (<VirtualHost *:80>). The ‘*’ stands in for our IP address. Use the command ifconfig if you don’t know. However, you should have a static IP address for your web-sever.

The DocumentRoot points the V.H. to the folder where it’ll find the index.html. We’ll also set up ServerAlias and ServerName so it’s easier to navigate to our website. Otherwise we would just type our IP address in the browser to access them. Let’s take a look at how I’ll set up my two test folders in one .conf file.

I was able to configure both of my test sites into one test.conf file because of Virtual Hosting! But wait how will my server know which site to serve? They’re both running on port 80… I only have one IP address. That’s where my ServerName comes to play. I can configure this in the /etc/hosts file.

Okay, last step is to active our test.conf file so both our test sites will be hosted on apace2. In the terminal type:

sudo apache2ensite test.conf

Follow apache’s command to reload the server, and then load up your ServerNames’ in the url. Here’s how they look on my browser.

Not bad! Play around with apache2 some, and try to configure a simple website. There’s a lot more to learn, but having the basics under your belt is a great step. Code on fam.