Launching Your Apache Web Server on Amazon's EC2

The Apache Web Server

The Apache organization (Apache.org) is a massive open source project. They provide an ever-growing number of Internet projects. However, they are best known for their web server. In this class, we will install and start a web server on our EC2 instance. First, we will look at how to move files to, and from, your server. Then we will jump right into installing and launching a web server. We will keep things simple and build a “Hello World” web page on your website. The page is just a first step, and it will give us a basis for more to come in future classes.

What are the problems we want to solve by taking this class?:

What can we do with the server we created?
How do we move files back and forth from our server?
How do we get a web server installed and running?
Where do we create and place files on our web server so we can see them on the website?

What we will cover:

Describe FTP and SFTP
Perform steps to install and configure FileZilla for EC2 access
Perform steps to install Apache web server on your EC2 server
Create a simple website
Deploy the site to your EC2 server

Class Goal: Install and launch a web server on your EC2 server and create your home web page.

Note: This class can serve as an excellent reference for setting up a web server for a customer or on future servers. You might want to bookmark the tech notes for installing the Apache web server in particular.

Transferring Files

FTP and SFTP are web standards for sending files from machine to machine. FTP is File Transfer Protocol, and SFTP is simply Secure FTP. Data sent across FTP is not encrypted, but SFTP transferred files are sent encrypted for added security. FTP and SFTP tools have command line versions in every operating system, but for ease of use (and because we don’t need to know the internals of FTP), we will just focus on the cross-platform, open source solution called FileZilla.

FileZilla is an excellent way to drag and drop your files across machines and easy to setup. There are dozens and maybe hundreds of FTP/SFTP tools out there so feel free to browse for something that you love if Filezilla seems lacking. You might also want to look for some web design tools that help you with the file deployment process. These are outside of the scope of this class.

Getting Started with FileZilla on EC2

If you want a free commercial product you can try this:

Free fast FTP client supports secure transfers and multiple connections [Download]

Setting up the Apache Web Server

When dealing with installing software on Linux of any kind we have to look at the installer. Windows has Windows Update and installation packages, but Linux distributions have package installers. Package installers include rpm, apt, and yum among others. In our case, we will use the Yellowdog Updater, Modified (yum). YUM is installed by default and, if you followed instructions during login, you probably used it to update your server. You are sometimes asked to type “sudo yum update” to update packages, and that is almost as painful as it gets to use. It is very powerful and helpful, and an excellent way to get software on your server and keep it up to date. If you find yourself on another Linux/UNIX machine, Google for the package manager it uses and you will find the commands to be very similar.

Web Servers in a nutshell

We are going to use the Apache web server to serve our web files. The Apache Foundation has created numerous open source applications and libraries, and their web server is typically called Apache Web Server. Web servers convert text files (HTML – hypertext markup language) into a graphical display. For example, open your web browser to a site and select the view source option from the menu to see the HTML used to create the page. For now, just know that web requests are either HTTP or https. Https is the encrypted/secure version of data transmission (also known as SSL support). We will explore this in more depth later. If you would like to get a little more knowledge about how web servers work this is a great article and a quick read: What is a Web Server?

Enough preamble, let’s get that server installed. You can follow the steps at this link to set up your own LAMP (Linux-Apache-MySQL-PHP) stack on your server:

Native LAMP on Amazon Linux

Multiple Environments

One of the easiest ways to get into trouble during development is to make changes to the production environment as part of the effort. The good news is that it is easy to avoid this entirely. The solution is to separate your development and production environments. In our case, we have a production environment on our EC2 server. We can bring up a second EC2 server to use for developing or we can create an environment on our laptop. The less expensive option is to write code on our personal machine.

We highly recommend you set up your development environment now so you can get into the habit of using it. This step will speed development time as you will have far more powerful tools readily available to write code on your personal machine. Your time saved in using a modern editor rather than struggling with VI is alone a winning argument for this approach. You can then code in a comfortable environment and then use Filezilla to move your changes to production after you have tested them locally.

Apache on Windows- WAMP

For Windows, you can install the WAMP server from https://bitnami.com/stack/wamp/installer. WAMP is easy to install and provides all you need for a development environment for your site. You can also look at xampp and MAMP if you want a very similar configuration on Linux or Mac. For these classes, we will keep the smaller, native package installs on Linux rather than LAMP.

When working with a Web Server, it always helps to start with the root folder. The root folder equates to http://serveraddress/. Thus, if you put the file index.html in the root folder, you can view it in the browser at the address http://serveraddress/index.html. The root folder of the default Linux install is /var/www/html. Finally, the root folder for WAMP is in the install directory called “htdocs.”

There are special file names that web servers look for when one is not specified, the most common is: index.html. The default page is why we see the same result when we include index.html in our address as when we do not include the filename in a browser.

Your First Web Pages

For example, let’s create a basic web file. Create a file called index.html and place this code in it:
<html> <h1>Hello World</h1> </html>

Copy it to your web server root path. The root folder for WAMP is in the “htdocs” folder of the install directory “c:/wamp/htdocs” on my dev machine. It is /var/www/html on your server. Once the file is there go to the web address using a browser (Chrome, Firefox, Edge, Safari, etc. ) to see your page. For your local machine, you can type http://localhost, and your page should appear with just the text Hello World.

Creating a Home Page:

Open a file in your text editor (or MS Code)
Type in the text ”My Class Home Page.”
Save the file as index.html in the web folder in a folder called “my-site” (wamp/www/my-site)
Open a browser and go to http://localhost/my-site/index.html and you will see your page
Since index.html is the default home page, you will get the same result typing http://localhost/my-site.
Try the same on your server (HTTP://[your elastic IP address])
Note that text without markup tags can be read by a browser and it will just display in the default font and won’t be the same as the “header” font we used in the hello world example.

Creating a Status page:

Open a file in your text editor (or MS Code)
Type in the text ”My Status for Week 1:”
Save the file as status.html in the web folder in a folder called “my-site” (wamp/www/my-site)
Move the index.html file to the “my-site” folder as well.
Open a browser and go to http://localhost/my-site/status.html and you will see your page
On the index.html page adjust the code to this:

My Class Home Page Name: [Your Name] E-mail Address: [Your Address] <a href="status.html">View Status</a>

Save the changes and view your home page. Now when you click on the text “View Status” you will go to the status page. Notice that your home page will be hard to read. The <a> tag is how we create a link on a page. We will cover that in more depth later.

Formatting Our Text

Now we add some line feeds to make it more human readable:

My Class Home Page<br/> Name: [Your Name]<br/> E-mail Address: [Your Address]<br/> <a href="status.html">View Status</a>

Adding a Link

On the status.html page adjust the code to:

<a href="/my-site">Back To Home</a><br/> <h2>My Status for Week 1:</h2>

Save the changes and view your status page. Click on the text “Back To Home” you will go to the home page. Notice that <br/> adds a new line and <h2></h2> is a way to make text a header. More on those later.

Assignments

Create your home page and provide a brief description of you for your visitors.
Edit your status page. Then provide us a review of what you learned, liked, and disliked this week. Include any questions you have for us from the material this week.
Copy your website out to your server using FileZilla. You will need to copy your “my-site” folder to the /var/www/html folder. The site will be your “published homework” approach for the web server portion of this class unless otherwise noted. However, it will also serve as a marketing site to your blog when we get that installed and configured.
When you are done your server should have a layout and pages like this:

/var/www/html/my-site/index.html
/var/www/html/my-site/status.html

and there should be links back and forth between the pages.

Bonus: Check out the various HTML tags available at http://www.w3schools.com/tags/ and spend a little time customizing your website. We will do some of this in a later class, but experimentation never hurts. Some suggestions are adding an email address, some basic details, maybe a current job description, and add tags to make the groupings of data visually separate.

The class is complete, and it is time to move on to the next step: An Introduction To WordPress