Amazon Web Services and Basic HTML Assignment
This tutorial teaches you how to set up a server on Amazon Web Services. You will be doing all of your assignments on this server. You will also protect that server with a .htaccess password, and learn how to create your first HTML pages.
There's a lot here, but it is meant to be helpful. It's broken down into parts, and neither should take you long at all. The steps for this assignment are:
Part 1: Server Setup Basics
- Create a free Amazon AWS Account
- Create an Amazon EC2 Web Server
- Setup Your Web Server
- Uploading Files
Part 2: HTML Basics
- Creating Your HTML Pages
- Creating Your Server Index
- Securing Your Code
- Creating Your First Assignments
Finally, there are a few notes on format, submission and some whistles.
The deadline for this assignment is Wednesday, January 23 at 11:59 p.m. Good luck!
Contact
Your contact for this assignment is Bradley Halpern. Please direct questions about this assignment to Bradley (see the Contact Page) because he will best know what's going on. You can also always contact Jeff, who may end up forwarding your question to Bradley.
Creating an Account
- Go to the Amazon Web Services Homepage.
- Click on
Sign Up
orSign Up Now
to create an account. Even if you have an existing Amazon account, you will still need a credit card and phone number during the setup process. - Wait until you get an email confirming that your account has been set up.
- Go back to the homepage and click on
My Account/Console -> AWS Management Console
. You can now sign in.
Creating a Server
- Sign in.
- Click the EC2 tab.
- Click the
Launch Instance
Button.
- Quicklaunch should be selected from the left column.
- Give your server a name.
- Make sure
Create new Key Pair
is selected and clickDownload
to save the key. - Make sure Amazon Linux 64-bit is selected.
- Click Continue.
- Double check that the type is
t1.micro
. (Anything larger and you get charged.) - Click
Edit details
.
- Select
Security Settings -> Security Groups
. - Select
Create new Security Group
. - Give it a name and description.
- Add an SSH rule with source
0.0.0.0/0
. By setting source to0.0.0.0/0
, any computer can access the server. (Note: Select "SSH" from the drop-down menu at the bottom of the page) - Add an HTTP rule with source
0.0.0.0/0
using the same drop-down menu. - Click
Create
. - Click
Save details.
- Click
Launch
. - Click
Close
.
Connecting to and Setting Up Your Server
- Make sure you are signed in and in the EC2 tab.
- Select
Instances
underINSTANCES
in the left navigation bar. - Click on your server.
- The box at the bottom of the page should be open to the
Description
tab. Note the Public DNS value towards the bottom of it.
- If you are on a non-Windows system, open Terminal (command line utility on Mac and Linux). Make your pem file secure by modifying permissions with:
chmod 400 /path/to/my/keyfile.pem
. Then, use the command line argumentssh -i /path/to/my/keyfile.pem ec2-user@ec2-##-##-##-###.compute-#.amazonaws.com
, where/path/to/my/keyfile.pem
is the path to the key file you downloaded andec2-##-##-##-###.compute-#.amazonaws.com
is the Public DNS value. Remember to put a space after-i
and DO NOT put a space betweenec2-user@
annd your Public DNS value. - If you are using Windows, the process is a bit more complicated:
- Download PuTTY and PuTTYgen if you do not already have it.
- Open PuTTYgen by going to
Start -> Programs -> WinSCP -> Key tools -> PuTTYgen
. - Select
Conversions -> Import Key
and find your file. - Click
Save private key
. Name it something likemyKeyPair
, and make sure the type is*.ppk
. You will get a warning, but just clickYes
. - Close PuTTYgen and open PuTTY and go to
Connection -> SSH -> Auth
in the left navigation bar. - Click the
Browse
button near the bottom of the page and select your *.ppk file. - Go back to the
Session
page and save the configuration so you don't have to find the key every time you log in. - Now sign in as
ec2-user@ec2-##-##-##-###.compute-#.amazonaws.com
, whereec2-##-##-##-###.compute-#.amazonaws.com
is the Public DNS value.
- Install the appropriate packages on the server, including updates, using the following commands (where 'password' is whatever you want your mysql password to be). Note: as a best practice, run "update" until the server notifies you it is up to date.
sudo su yum update yum install httpd yum install mysql-server mysql yum install php php-mysql service httpd start service mysqld start /usr/bin/mysqladmin -u root password 'password' yum update
- Use the following commands to give yourself permission to upload your files to your server:
cd ../../var/www chown ec2-user html/
- To make sure the server is working, type
http://ec2-##-##-##-###.compute-#.amazonaws.com
into your web browser, whereec2-##-##-##-###.compute-#.amazonaws.com
is the Public DNS value. You should see a test page. If your browser times out, go toSecurity Groups
in the left navigation bar on your AWS EC2 tab and make sure the security group you set up for your server has the http rule. If not, add it and don't forget to click theApply Rule Changes
button. - Note: If you want, you can enable password authentication for the future. You absolutely don't need to, but some people prefer it.
Uploading Your Files
- If you are on a non-Windows system, log out of your server by using the command
exit
until you are back to your local machine, and then use the command line argumentscp -i /path/to/my/keyfile.pem /path/to/my/copyfile.txt ec2-user@ec2-##-##-##-###.compute-#.amazonaws.com:path/to/assignment/folder
, where/path/to/my/keyfile.pem
is the path to the key file you downloaded,ec2-##-##-##-###.compute-#.amazonaws.com
is the Public DNS value, and /path/to/assignment/folder is the path to your assignment folder on your server. /path/to/assignment/folder should start with ../../var/www/html. If you just want to test a file to make sure your server is working, just use the path ../../var/www/html. You can upload any .txt file you want for testing purposes, and you can later remove that file with therm filename.txt
command. - If you are using Windows, the process is a bit more complicated:
- Download WinSCP if you do not already have it.
- Open WinSCP.
- Set
Host name
toec2-##-##-##-###.compute-#.amazonaws.com
, whereec2-##-##-##-###.compute-#.amazonaws.com
is the Public DNS value. - Set
User name
toec2-user
- Press the
...
button at the end of thePrivate key file
bar and find your *.ppk key file. - Click the
Save
button at the bottom of the window so you don't have to enter all of the information every time you log in. - Click
Login
. - Navigate to the html folder by going through the following folders:
.. -> .. -> var -> www -> html
. From here you should see your assignment folders if you have created them. You can upload any .txt file you want for testing purposes, and you can later remove that file with therm filename.txt
command.
Pause: This is the end of Part 1 of this week's assignment. Ensure everything is working before continuing.
If You Have Trouble
Try some of the following:
- Make sure you have set up the SSH and HTTP rules with location 0.0.0.0/0.
- If you changed the SSH and HTTP rules, then make sure you not only clicked the
Add Rule
button, but also theApply Rule Changes
button. - Make sure you chose the correct key when signing in.
- Make sure the name of your key and the names of all of the folders in the path to your key are one word.
- Make sure the path to your key is correct.
- Make sure you put a space after "-i" for ssh and scp.
- Sign in as root instead of ec2-user.
- Set the key permissions to 400 (only readable, and only by you).
- Make sure you are installing the packages on the server, not your local computer.
- Retype the installation commands.
- Make sure you include your key when doing the scp command.
- If you are using TextEdit, make sure you change the properties so that files are saved as plain text. You can find instructions for this online.
If you're having trouble with the key (.pem) file, likely because you're on Windows, one option you have is to use password authentication instead of key file auth. Even if your keys work fine, you're welcome to use passwords if that's easier for you. To enable password auth, you will still have to log in for the first time with a key file, but you can do that from a CSC lab computer running linux (or any other linux/mac machine), which may be easier. After successfully logging in there, you can follow the below instructions to enable password auth, then you'll be able to use your computer with password auth for the rest of the semester.
How to enable password authentication: After you've logged into SSH, type the following commands: sudo su
(to take superuser permissions), vim /etc/ssh/sshd_config
(vim is a basic text editor, sshd_config is the file you need to edit. Scroll (using your arrow keys, not mouse) to the line that reads PasswordAuthentication
(not #PasswordAuthentication... # denotes a comment and doesn't actually do anything). PasswordAuthentication should be followed by 'no' because it is disabled; press Shift+A
to move your cursor to the end of the line and enable editing, press Backspace to delete 'no' and type 'yes'. Then press the Escape key to exit editing mode, type :wq
to save (write) and quit, and press Enter. You should return to a command prompt. Set your password by typing passwd ec2-user
(you will be prompted to enter your password and although you will not see characters typed, it is working). Finally, restart your SSH server to reflect the changes by typing the command: /etc/init.d/sshd reload
. You should now be able to login easily from any computer with the command: ssh ec2-user@ec2-##-##-##-###.compute-#.amazonaws.com
.
Create your first HTML pages
You're going to create a couple of webpages: (1) A homepage for your server, (2) A demonstration for assignment 0. You will also add a .htaccess password to protect your work. The base process for creating a web page is the following:
- Create a file in your favorite text editor (notepad, textpad, emacs, etc.)
- Write or paste the HTML for your web page in this file and save it.
- Use an SFTP program or SCP command to upload that file to your account.
- View your web page.
More information about scp and sftp
You will make a new directory on your server for each assignment. To do so, log on to your server and run cd ../../var/www/html
. This will take you to your html folder. To actually make a directory for this assignment, do mkdir 0
. This will create a directory with the name "0". Do chmod 755 0
(755 meaning read+write access for you, read only access for everyone else, and 0 being the directory to apply it to) to make the directory readable and executable by everyone. Also do chown ec2-user 0/
to make yourself the owner and allow yourself to upload files to this new folder. Before turning in your URLs, make sure that your files are readable and executable by everyone so they work in a web browser. To do this, go to the folder for the current assignment and type chmod 755 *
. * is a wildcard; this will allow everyone to read and execute all of the files in your assignment folder (so be careful not to run that command in a system folder).
An index for your server
First thing is first: when users visit your webserver, you want there to be something for them to see. Here's an outline you can use, but you can feel free to add as much to it as you want. As long as your name and "CSC 210 - Spring 2013" are prominently displayed somewhere on the page, you can customize it however you want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>(Your Name)'s Web Server</title> </head> <body> <h1>(Your Name)- CSC 210, Spring 2013</h1> <p> This is my first webpage! </p> </body> </html>
Now, visit http://<yourPublicDNSValue>/ and you should see your shiny, new web page. That's all you need to do for now, but feel free to style it, add media... whatever you please.
Securing your Assignments
It's important to protect your work so that nobody else can access your private files. In a class like CSC 210, it's an important part of academic honesty, but in the real world it's an equally useful skill.
You'll be securing your entire html directory with .htaccess, so the same protection and password should apply to your server's index.html and all of your assignment files.
- http://<public dns>/
Use the instructions from above to login to your server and create the following two files using your favorite text editor:
- /var/www/html/.htaccess
AuthName "CSC210" AuthType Basic AuthUserFile /home/ec2-user/.htpasswd Require valid-user
user:eBPHuu8YopIkg
Change the permissions of both files to 644 (using chmod 644 <filename>
) so only the root user can edit them. We don't want just anyone to be able to change passwords! Also do chmod 755 /home/ec2-user
. You can put .htpasswd
in any other directory.
No mater where you put it,
make sure you specify the correct directory path of .htpasswd
in .htaccess
.
The form of content in .htpasswd
is "username:enc(password)"
.
The password is encrypted in the file.
Note that "user:eBPHuu8YopIkg"
is just an example, you need to create your own.
For instance, for the username "tpain" and the password "onaboat" the file would read "tpain:eHJnPWaCPHwss".
You can get the encrypted form of password from
here or follow instructions for a program already on your server called htpasswd to create the file and encrypted password for you.
- Pro tip: you can use the
ls -al
command to view a list of all files in a directory, along with their permissions, indicated by series of 'rwx' on the left, indicating first the owner's permissions, then the group's, then everyone else's. (More info on permissions.)
Now you need to get your webserver set up to actually look for .htaccess files. Do sudo su
to give yourself root access. The permissions of the file you will edit are quite restrictive (and for good reasons). You'll edit the Apache configuration file here: /etc/httpd/conf/httpd.conf
Change the second appearance of the line "AllowOverride None"
to "AllowOverride AuthConfig"
-- this means .htaccess can change Apache configuration directives per directory. There are lots of ways to change a file; the easiest is probably using vim. There's a basic intro to vim also in the password auth section of this document as well.
Then, you'll need to restart Apache:
httpd -k restart
It also turns out that your server only starts when you execute the httpd command. That means if your instance goes down for some reason, you'll need to tell the webserver (Apache, httpd) run at startup.
chkconfig --add httpd
Before continuing, visit your web page on your server and make sure that it asks for the username/password that you set up.
If You Have Trouble
Your web browser will likely remember your password, so it may seem like something is wrong because your login window is not showing up. Clean your cookies (and possibly close and reopen your browser) and try again.
If it's still not working, do sudo su
and then cd /var/log/httpd/
Open error_log
and scroll down to the bottom to see what error(s) occurred the last time you tried to access your server via the browser.
Keep in mind that your server is running Linux. If you are having a hard time finding the solution to your problem, it may help to add the word Linux
to your search string.
Your Web Page
If you haven't already created an assignment directory (that is, a 0 folder within your main html folder), make one now. Copy and paste this into a file within your assignment directory. For example, mysweetwebage.html
.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>My First Web Page - It's Super Sweet!</title> </head> <body> <h1>My First Web Page!</h1> <p> Congratulations, you created your first web page. </p> <p>This kitty is sad, but is much happier now that your web page exists. <img src="http://www.cs.rochester.edu/u/jbigham/courses/210/pics/sad-kitty.jpg" alt="A really sad kitten"> </p> </body> </html>
Add a README Page
Save the following as index.html
in your assignment directory.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>ReadMe for Assignment 0</title> </head> <body> <h1>ReadMe for Assignment 0</h1> <p> <a href="mysweetwebpage.html">Assignment 0</a> </p> <p> (describe what you did, including any extra credit, here.) </p> </body> </html>
Format (for all assignments)
For all assignments this semester, please store all assignment files in http://<yourPublicDNSValue>/#/ (where # is the assignment number). A readme file should always be located at index.html. Your readme should include at a minimum the information above, though you're welcome to spruce it up as you please. Your entire server must be protected by an .htaccess password indefinitely, and you should not share this password with anybody except the professor and TAs. You also should not share your public or private keys with anybody except the professor and TAs.
So for this assignment, I expect to be able to visit http://<yourPublicDNSValue>/0/ and see a page describing what you did in this assignment and then visit http://<yourPublicDNSValue>/0/sweetwebpage.html to see the actual assignment. If you don't like the name sweetwebpage.html, you can name is something else, but it should be linked from the readme, and your readme should be the index. Also, don't forget that you created an index file for your root URL: http://<yourPublicDNSValue>/ . That doesn't need to follow any particular format, just be sure that the file is there and working properly.
Submission
To submit this assignment, you need list four pieces of information on the blackboard submission labeled Assignment 0 by no later than Wednesday, January 23 at 11:59 p.m. They are:
- Your server's web address (which should point to your index file).
- The address of your Assignment 0 README (which should be your server's address + '/0/').
- The .htaccess username you created.
- The .htaccess password you created.
Extra Credit
Each assignment will come with a list of extra credit options each worth some number of bells and whistles. Bells and whistles usually ask you to make some cool tweak to your page and may sometimes point to an external web page on how to do it. A whistle is worth approximately half as much as a bell, and neither counts all that much, but they could bring your grade up half letter in the end if it's close. Most importantly, the bells and whistles usually give you the chance to flex your web programming muscles and create something awesome - whistle and ring on CSC210'ers!
This week's assignment is designed to be quick & easy, so there's just a couple of simple whistles to choose from. All of them are meant to be completed in your assignment (0) directory, except for the first one.
- Make your server's index.html file useful and/or pretty- maybe add a bio of yourself, or use it as a sitemap that links to each of the assignments throughout the semester. Creativity encouraged.
- Add a new paragraph to your web page that tells us what you hope to get out of the course, why you're here, or a funny joke.
- Style your page with fancy colors and graphics the 1990s way (sans CSS, which you won't learn about until next week) - for inspiration, check out this sweet Bruce Lee page (which is basically how all pages looked in '95) or pretty much any MySpace page near you. Make us laugh and receive an extra 0.5 whistles.
- The web is about more than technology -- add a 200 word essay response to the Wired "The Web is Dead" article. Argue that the web is dying, that it's not, or something in between.
- Save the TA some time and implement a Javascript word counter for your essay. To get this whistle, Javascript code on your web site should calculate the number of words in your page when the page is loaded and display the count near your essay. We haven't learned Javascript yet, but a time-honored tradition of the web is cutting and pasting code -- apply the code on this web page to your page.
Make sure to tell us what extra credit you did in the readme describing this assignment, otherwise we might not realize that the weird Star Trek quote you included was meant to be a joke (Spock wouldn't be illogical! Get it?) and should count for the second whistle.
Props
This document is based on the tutorials and posts at imperialWicket, Cloud Computing Info, Coding This, and the AWS Forum.
Please email Jeffrey P. Bigham at jbigham@cs.rochester.edu with questions.