Project 1 - Simple Site Created 2 ways on AWS

200 points

Due dates - March 6, start of class

INDIVIDUAL or GROUP Work - YOUR choice to work individually or in a group but, the requirements are the same.

Project Description & Requirements

Goals of this Project

You will create a simple static website that implements the main home page, about, signin and contact us page 2 different ways on AWS (cloud). The website should be for a startup company dealing in Computer Vision and ML technologies (you come up with the idea of what the company produces but, see project 2 for how your webpage project 2 could be a feature on this website).

PART 1 - Create static content

using HTML, CSS and Javascript (Bootstrap --learn on own) - you are to create a Home Page, About and Contact page.
JavaScript should be used for minimum 2 interactions. One must be to realign the menu when changing scale of the viewed web content (think browser to mobile) using Bootstrap as one. The other you must propose to the instructor before doing.
Images and graphics are required on ALL of the pages you create.
CSS style must be present on EACH of your pages to create an interesting design that uses the CSS box model. You must have minimally one div/span area that floats to right/bottom.
The sign in page should have a form to accept a login, password text fields and submit button. It also has a "create account" button. This page will use ReactJS and you will have this page consist of minimal html (only empty div tags) that is populated with React Components. If the "create account" is hit then to the right of the login form a new form appears asking for name, email, login and password as separate text fields with a enter button is hit. When this enter button is hit, it simply makes all of the create account form elements dissapear and only the original login form remains but, this time with the new login and password values filled in. So you will need to use state to preserve the login and password via React.

PART 2 - Implementing via AWS EC2

You are to setup an EC2 instance, and install Apache Webserve. Then upload all of the content. See Amazon documentation on how to do this (or search web for your own informaiton)

REQUIREMENTS PART 2

In this project you will create an Amazon EC2 instance with a later version of Ubuntu pre-defined AMI (something free tier)
You will create a GitHub repository called PART 2 (called Project 1 Part2) and use the GitHub wiki documenting your work(take screen shots while you do it)
GitHub code must include all the HTML, CSS, JavaScript
MAKE sure that you include a screenshot of the site being deployed and show the deployed URL which should match up to your main pages of your website. Demonstrate the use of Bootstrap and JavaScript Interaction (Part 1) in your site.
You are required to create and use a Docker Container
- this must contain all of the software needed for your EC2 server and STATIC content.
Add to you GitHub repository all the documentation including how to create your Docker Container and deploy it. The DockerContainer should be under the source Code on your GitHub repository in a folder you make called DockerContainer .
Create a YouTube video of creation of the Docker, deployment and the website running and show clearly the URL. Go through all the website pages and discuss the CSS styling you did, the JavaScript interactions including the Bootstrap
GIthub Wiki make sure that you have the following pages keep names shown
- Special Issues= turn in a pdf answering the special issue 1 and special issue 2
- YouTube Link = link to YouTube video
- Docker Creation = document with screenshots showing youir docker creation and deployment. If you used DockerHub or other resources AWC ECR, ECS explain that and show screenshots of the AWS related consoles.

SPECIAL ISSUE 1 You must SOLVE---what happens when an instance stops running

when you shut down your data is lost
you need to learn about how to "freeze" you instance and save it in Amazon S3 as an AMI and then reinstate or duplicate.
see http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/ExportingEC2Instances.html

what are the cost involved?

SPECIAL ISSUE 2 SOLVE---what happens when reboot instance& what can you do?

the IP address changes. What are your options if you want to publish the URL to the public?
Some items to read:
- http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/using-instance-addressing.html http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/elastic-ip-addresses-eip.html
- what are the fees incurred
Can this be done on the learner lab environment?

PART 3 - Implementing via AWS S3

You are to re-implement your site by deploying to AWS S3.. See Amazon documentation on how to do this (or search web for your own informaiton)

REQUIREMENTS PART 3

You will setup the necessary S3 system to host and deliver your website.
You will create a SEPERATE GitHub repository called Project 1 Part 3 and use the GitHub wiki documenting your work(take screen shots while you do it). Also discuss the cost involved to implement Part 3.
MAKE sure that you include a screenshot of the site being deployed and show the deployed URL which should match up to your main pages of your website.
GitHub code must include all the HTML, CSS, JavaScript
Documentation = show a YouTube video of setup, the website running and show clearly the URL.
Create a YouTube video documenting the deployment and the website running and show clearly the URL. Discuss any issues you had in setup.
GIthub Wiki make sure that you have the following pages keep names shown
- YouTube Link = link to YouTube video
- S3 Bucket Setup = show screenshots showing the S3 bucket and content that has been uploaded in the AWS console.

Discussion

Be prepared to discuss in class both Part 1 and Part 2 and what are the advantages and disadvantages of Part 2 and Part 3 approaches.

Evaluation Guidelines

See rubric on Canvas

Deliverables

Turn in Deployed wesite URLs AND GitHub repository URLs for both Part 2 and 3 to Canvas ->Assignments -> Project 1 (see due date and time at top). Wiki on each repository should be created as specified including all specified media and links to youtube as specified.
Discussion in class (must be present when discussed during class)