Business

Static Website on S3 by Dr. Yao Page 1

Static Website on AWS S3

Table of Contents

Page# Subject Subject

1  Basic Concepts  Using AWS S3 Bucket and S3 Folders as MIS 341 Website

2 to 7  Using S3 Bucket as a Website  Adding a Link/Folder to MIS 341 Website

8 to 9  Using S3 Folder as a Website  Static Domain Hosting via AWS Route 53

Basic Concepts

Website, Web page/application, File, Folder

A file is stored under a folder. A folder may contain many files. A folder is physically located on a computer

(on a device on a computer). A web page/application is a file. A website may contain many web

pages/application. A website is a folder. What is the key difference between a web page and a file on your

computer? What is the key difference between a website and a folder on your computer? In general practice, in

order to access the files and folders on your computer, you need to be physically on your computer. Hence, files

and folders on your computer cannot be accessed by the public. A file stored on a network (under a folder on a

computer inside the network) is no different from a file on your computer and, by default, is not accessible by

the public. Are all files and folders stored on a network accessible to the public? Which files and folders should

be made accessible to the public? A server-side application/process (running on the network) determines which

files and folders can be accessed by the public. How many different server-side applications/processes can run

on the same network? Many, such as a web server, an email server, etc. A web page or web application is a

file that can be accessed by the public. A web page (file) is stored on a network (under a folder on a computer

inside a network). In order to allow the public access to the web page (file), the folder that contains the web

page/file needs to be made accessible to the public. A web server (a server-side application/process running on a

network) makes such a folder to be accessible to the public. Such a folder is termed as a website.

AWS S3 does not support server-side scripting/programming and, hence, does not support dynamic website

hosting. This does not mean that AWS cannot support dynamic website hosting, because AWS provides other

services that can be used to host dynamic websites.

A static website is used to deliver/post information in several formats, including HTML, video, audio, and

image. A static website does not require coding. There are two general methods to utilize AWS S3 for hosting a

static website:

1. Using AWS S3 Bucket and/or Folders 2. Using AWS Route 53 and AWS S3 bucket to host your own domain

Bucket

In order to use AWS S3 bucket as a website, the following must be satisfied:

 The S3 bucket must contain the landing or home page, such as index.html, and corresponding folder. In the following examples, we

o use MS Word to create the necessary web pages and folders o upload the web pages and corresponding folders to AWS S3

 The bucket properties must be changed to enable Static website hosting o If necessary, change the name of the landing page, which is default to index.html

 The bucket must be publicly accessible. o change the bucket permission to unblock public access o change the bucket policy to allow public access to files and folders in the bucket

The URL for a bucket is termed as Endpoint URL.

Static Website on S3 by Dr. Yao Page 2

Bucket Folder

In order to use AWS S3 bucket folder as a website, the following must be satisfied:

 The S3 folder must contain the landing or home page, such as index.html, and corresponding folder.

 The bucket properties must be changed to enable Static website hosting

 The bucket must be publicly accessible. o change the bucket permission to unblock public access o change the bucket policy to allow public access to files and folders in the bucket

The URL for a folder is termed as Object URL.

Static Website on S3 by Dr. Yao Page 3

Using S3 Bucket as a Website Essentially, this method allows the public to access AWS S3 buckets, as URLs, via the web browser. This

example demonstrates how to make www.cmis491.net bucket accessible via a unique URL (AWS Endpoint).

1. At AWS S3 console, create a bucket and name it as www.cmis491.net

2. At your computer, use MS Word to create a file and save it on the local disk as index.htm. MS Word creates the following file and folder on your disk:

 index.html

 index_files

3. On AWS, go to www.cmis491.net bucket and upload the following file and folder from your disk.

 index.html

 index_files

(Drag and drop the folder in order to upload a folder to S3.)

Click www.cmis491.net bucket and select Properties

Click Static website hosting

Static Website on S3 by Dr. Yao Page 4

This is the URL for this landing/home page of this website.

Click Use this bucket to host a website

Enter index.html as the Index document.

(This file name and extension must match the

file that you created in MS Word and upload

to your S3 bucket.)

Click Save.

Click Endpoint (URL) to open this web page.

The following error page pops up, indicating

that this URL is not accessible.

(Because we did not make the bucket to be

accessible by the public, yet.)

By default, a bucket is NOT accessible by the public.

Hence, it is necessary to change the permission on the bucket to allow public access.

The following error message is different from the above error message and indicates that index.htm file is NOT

found in the bucket.

What is the file name and file extension for the landing/home web page? Is it index.html or index.htm?

Static Website on S3 by Dr. Yao Page 5

Click Permissions tab for this bucket (www.cmis491.net).

Click Block public access

Change from this

To this

This change unblocks public access.

Static Website on S3 by Dr. Yao Page 6

Enter confirm at the following pop-up page to confirm the change.

The status of Permissions has been changed to “Public”.

Note: You must unblock the public access (the above step) before you can change/save the bucket policy.

The next step is to create a bucket policy to allow the public access to all folders and files under the bucket.

The general statements are:

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "PublicReadGetObject",

"Effect": "Allow",

"Principal": {

"AWS": "*"

},

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"

}

]

}

Static Website on S3 by Dr. Yao Page 7

Click Permissions->Bucket Policy. Copy and paste the statements from the previous page.

arn:aws:s3:::YOUR-BUCKET-NAME/*

Change YOUR-BUCKET-NAME

to the name of the bucket.

Static Website on S3 by Dr. Yao Page 8

Click on the Endpoint under Properties->Static website hosting

The following web page pops up.

The statements in the index.html file are listed below.

Welcome to my home page

Link to George Mason University: https://www2.gmu.edu/

You can use MS Word to enter the above lines and save the file as index.html or index.htm (a web page).

To insert a web link (URL), select Insert->Hyperlink from MS Word.

Use the Save As option to save the file and save it as:

Web Page

or

Web Page, Filtered

Static Website on S3 by Dr. Yao Page 9

 Using S3 Folder as a Website

Under the www.cmis491.net bucket, create a folder and name it Java.

You may also want to create a folder on your computer, dedicated for this website.

1. Search the web for a Java picture and download it to your local disk (java.png).

2. Open up MS Word software and create a blank document. Enter the following lines:

Welcome to Java home page

Link to Java Home page: https://www.java.com/en/

Select Insert->Hyperlink from the menu to create a link for https://www.java.com/en

3. Select Insert->Pictures from the menu, find the Java picture downloaded in Step 1 and insert it.

4. Click on the Java picture, select Insert->Hyperlink from the menu, and enter the following as the link: https://www.java.com/en/

5. Save the file as java.docx. Also, select Save As to save the file as a web page (java.htm).

Screenshot of the Java folder

Screenshot of the Java\java_files folder

(This folder is created by MS Word

When you saved java.htm file.)

Static Website on S3 by Dr. Yao Page 10

6. Go to www.cmis491.net/Java folder on AWS S3. 7. Click Upload.

8. Upload java_files folder.

(Drag and drop the folder in order to upload a folder to S3.)

9. Upload java web page file (java.htm).

The screenshot below shows that www.cmis491.net -> Java folder contains:

 java.htm

 java_files

10. Click on java.htm and click its Object URL

You can also copy the

link location and paste

to a web browser.

Static Website on S3 by Dr. Yao Page 11

 Using AWS S3 Bucket and Folder as MIS 341 Website

There are 2 major tasks:

 Design and create web pages

 Create S3 bucket and folders. Then, upload files and folders

 Design and create web pages

We would like to show the basic information about MIS 341 Clod Computing Essentials with a landing

page. This landing page will contain the links to (1) Course Description and (2) Course Objectives.

o Create a folder on your local disk and name it MIS341Website

o Use MS Word to create a web page, mis341.htm, to contain

Course Description MIS 341 Cloud Computing Essentials

Offered by School of Business

George Mason University

Course Objectives

ISOM Major

The link to School of Business is: https://catalog.gmu.edu/colleges-schools/business/

The link to George Mason University is: https://www2.gmu.edu/

The link to ISOM major is: http://business.gmu.edu/undergraduate/academic-programs/majors/isom/

Note: mis341.htm is NOT completed, yet. We will revise/finalize it in a later step: We need to add the links to

“Course Description” and “Course Objectives”.

o Use MS Word to create a web page, Description.htm

o Use MS Word to create another web page, Objective.htm

The following screenshot shows the files and folders created by the above steps.

These html files and folders need to be uploaded to AWS S3 bucket.

Static Website on S3 by Dr. Yao Page 12

 Prepare AWS S3 Bucket/Files

o Create a bucket and name it as mis341.gmu.edu

o Click mis341.gmu.edu bucket and click Upload

o Upload the following files and folders  mis341.htm  Description.htm  Objective.htm  Description_files  Objective_files

(Drag and drop the folder in order to upload a folder to S3.)

We need to revise mis341.htm to include the links to Course Description and Course Objectives pages.

In AWS S3, click Description.htm and copy its Object URL (link location).

Open mis341.docx in MS Word and insert a hyperlink using the copied link location to Course Description

In AWS S3, click Objective.htm and copy its Object URL

In mis341.docx, insert a hyperlink using the copied link location to Course Objectives

Save mis341.docx. Select Save As to save mis341.docx as a web page.

Upload the revised/finalized mis341.htm to AWS S3 www.mis341.gmu.edu bucket.

Static Website on S3 by Dr. Yao Page 13

In AWS S3 mis341.gmu.edu bucket, click mis341.htm and click Open

The following page pops up.

Click on its Object URL

The following error message is displayed.

If you copied the URL and pasted it into a web browser, you will see the following error message.

Static Website on S3 by Dr. Yao Page 14

Suh an error message indicates that these files/folders are private and not accessible to the public.

In AWS S3, click www.mis341.gmu.edu bucket. Click Properties -> Static website hosting.

Click Use this bucket to host a website and enter mis341.htm as the Index document. Click Save.

Click Permissions and Edit

Click the check to unblock all public access

Static Website on S3 by Dr. Yao Page 15

Enter confirm and click Confirm

Finally, we need to change the bucket policy to allow public access.

Under Permissions, click Bucket Policy

Copy and paste the following code:

{

"Version": "2012-10-17",

"Statement": [

{

"Sid": "PublicReadGetObject",

"Effect": "Allow",

"Principal": {

"AWS": "*"

},

"Action": "s3:GetObject",

"Resource": "arn:aws:s3:::mis341.gmu.edu/*"

}

]

}

Static Website on S3 by Dr. Yao Page 16

In AWS S3, click mis341.gmu.edu bucket, click mis341.htm

Copy its Object URL

Static Website on S3 by Dr. Yao Page 17

Copy and paste the link (Object URL) to a web browser.

The web page will be displayed successfully, as shown below

To verify/test, click Course Description link and Course Objective link.

Static Website on S3 by Dr. Yao Page 18

 Adding a Link/Folder to MIS 341 Website

In this example, we will add a link to the previous landing page, mis341.2.html, to show the grade scale. In

order to complete this example, we will (1) search the web and download a grade scale related image, (2) use

MS Word to create a file and insert the download image to the file, (3) save the file as a Word document and as

a web page: Grade.htm, (4) upload Grade.html and corresponding folder to S3 mis341.gmu.edu bucket, (5)

find out the Object URL for Grade.htm on AWS S3, (6) modify mis341.html to add a link to the grade scale

using the Object URL copied from the previous step, and (7) upload the revised mis341.htm file.

Search the web and download an image related to the grade scale.

Use MS Word to create a file and insert the image download from the previous step.

Save the file as Grade.docx.

Use Save As to save the file as Grade.html

On the local disk, 2 files and one folder are being created:

Grade.docx

Grade.htm

Grade_files (folder)

Upload Grade.html file and Grade_files folder to S3 bucket.

You need to drop and drop Grade_files folder to S3 bucket.

Static Website on S3 by Dr. Yao Page 19

In AWS S3 mis341.gmu.edu bucket, click Upload

Drag and drop Grade_files folder

You may be ask about granting public access to this folder.

Upload Grade.htm file.

Static Website on S3 by Dr. Yao Page 20

The screenshot on the right shows that Grade_files folder and Grade.htm have been uploaded to the bucket.

Click Grade.htm to find out its Object URL and copy it.

Modify mis341.htm to add a link to the above Object URL.

Upload the revised mis341.htm to AWS S3 mis341.gmu.edu bucket.

Static Website on S3 by Dr. Yao Page 21

Click mis341.htm to bring up the property pop-up window.

Copy the URL and open it with a web browser.

You may want to use a different web browser or reload/refresh the page.

Click Grade Scale to make sure the page comes up correctly.

Static Website on S3 by Dr. Yao Page 22

 Static Domain Hosting via AWS Route 53

Note: This course does NOT have any assignment that requires a domain name.

Steps involved in static hosting for a domain, using AWS Route 53:

1. Register a domain via AWS Route 53, if you do not have a domain name. 2. Sign onto AWS S3 console to create 2 buckets

 Create 2 buckets with the name that matches the website/domain name

 For example, if your domain name is mywebsite.com, you need to create 2 buckets: o mywebsite.com

 This bucket will contain web content files. o www.mywebsite.com

3. Upload files for the web content

 Register Domain Name

The link to AWS route53 is: https://console.aws.amazon.com/route53/

Click Get started now under Domain registration

Click Register Domain

Static Website on S3 by Dr. Yao Page 23

Enter the desired domain name and click Check

Once you found an available domain name, click Add to cart and click on Continue

Enter your contact information:

Verify your contact information.

Click Complete Order.

Static Website on S3 by Dr. Yao Page 24

An email will be sent to you after the domain name has been successfully registered.

Your AWS account also shows such information:

Static Website on S3 by Dr. Yao Page 25

 Create the Required Buckets

The link to AWS S3 console is: https://console.aws.amazon.com/s3/

Click Create bucket. The name of the bucket MUST be identical to the domain name.

Create another bucket with the www. as the prefix, hence, www.drandyyao.com

Static Website on S3 by Dr. Yao Page 26

Both required buckets have been created:

drandyyao.com

www.drandyyao.com

(This is known as a subdomain.)

Click on the bucket that has the same name as the domain name,

in this example, drandyyao.com

Then, click Properties tab

Click Static website hosting

Click Use this bucket to host a website

Static Website on S3 by Dr. Yao Page 27

Make a note of the Endpoint

http://drandyyao.com.s3-website-us-east-1.amazonaws.com

Enter the name of the landing page for your website. Typically, it is named as:

index.html

Click Save.

The status for Static website hosting is changed to:

Bucket hosting

Static Website on S3 by Dr. Yao Page 28

 The next step is to set up website subdomain redirect.

At AWS S3 console, click the subdomain bucket,

in this example: www.drandyyao.com

Then, click Properties tab.

Click Static website hosting

Click Redirect requests

In the Target bucket or domain box,

Enter the domain name

In this example, the domain name is:

drandyyao.com

Click Save.

Static Website on S3 by Dr. Yao Page 29

 The next step is to upload the index.html and other web content files.

At AWS S3 console, click the bucket that has the same name as the domain name. In this example,

drandyyao.com

Click Upload to upload the index.html file.

Click Add files

The index.html file has been added to drandyyao.com bucket.

Static Website on S3 by Dr. Yao Page 30

 Add Alias Record

The link to AWS Route 53 is: https://console.aws.amazon.com/route53/

At AWS Route 53 console, click Create Hosted Zone

Click Create Hosted Zone

Click Create Hosted Zone

Static Website on S3 by Dr. Yao Page 31

Enter the Domain Name.

Then click Create.

Click Create Record Set

The following screen pops up.

Static Website on S3 by Dr. Yao Page 32

For the next step, you will need to the Endpoint for your domain.

In this example,

s3-website-us-east-1.amazonaws.com

Keep Name with the default value.

Keep Type with the default value.

Click Yes for Alias.

Alias Target: Enter the Endpoint

In this example,

s3-website-us-east-1.amazonaws.com

Keep Routing Policy with the default value.

Click Create.

Static Website on S3 by Dr. Yao Page 33

Via AWS S3 console, set up public access and bucket policy for drandyyao.com bucket.