Cloud Vendor | Amazon AWS |
Proficiency Level | Cloud Enthusiast |
Tags | AWSS3Web Server |
Summary
In this lab, you will provision an Amazon S3 Bucket and create a static website in it. You will upload static web pages and images to the bucket that is used for the static web site and will test that the content is served properly.
Each exercise below builds upon the previous one. You should start each new exercise from the last step of the previous exercise unless it is explicitly written otherwise.
Learning Objectives
After completion of this lab, you will be able to:
Prerequisites
To complete this lab, you will need the following:
- Reliable internet connection
- A free AWS Account used to access the AWS Management Console
Exercise #1: Creating Azure Storage Account
In this exercise, you will create an Amazon S3 bucket that you will use to host your static web site.
Steps
- Sign into the AWS Management Console at https://aws.amazon.com/console/ using your AWS credentials
- In the Find Services search box, type S3, and press Enter
- On the S3 buckets page, click on the
button
- Fill in the following information in the Create bucket → Name and region tab form:
Bucket name →[first name][last name initial]s3lab01bkt
Region →US West (Oregon)
- Click on the
button
- On the Configure options tab, add the following tags for the bucket:
Role →static web
Lab →s3storagelab01
Owner →<your name>
OwnerEmail →<your email>
- On the Set permissions tab, clear the Block all public access checkbox and click on the
button
- On the Review tab, review your entries and click on the
button
- Milestone step: At this point, you have learned how to create an Amazon S3 bucket. Verify that you have the following resources in the buckets list:
[first name][last name initial]s3lab01bkt
Exercise #2: Enable Static Website in Amazon S3 Bucket
In this exercise, you will enable the hosting of a static website in the Amazon S3 bucket.
Steps
- Clik on the
[first name][last name initial]s3lab01bkt
bucket from the list - On the next screen, change to the
tab
- Click on the Static website hosting tile
- Change the radio button selection to
Use this bucket to host a website
- Fill in the following information in the form that appears
Index document →index.html
Error document →error.html
- Copy the Endpoint URL for your web site
- Click on the
button
- Milestone step: At this point, you have learned how to create a static web site in your Amazon S3 Bucket.
- Open a new browser window and paste the copied URL into the address bar
- Milestone step: At this point, you have learned how to access the static web site you created in your Amazon S3 Bucket by using your browser.
Exercise #3: Upload Content to the Static Website in Amazon S3
In this exercise, you will upload content to the static website.
- Create a new file on your local machine with name
index.html
and the following content<!DOCTYPE html> <html> <head> <title>Welcome to Amazon S3</title> </head> <body> <h1>My Static Website</h1> <p>Hello, I am a static web site hosted in Amazon S3 Bucket.</p> </body> </html>
- Create a new file on your local machine with name
error.html
and the following content<!DOCTYPE html> <html> <head> <title>Ooops... error!</title> </head> <body> <h1>An error occured</h1> <p>Ooops, it seems that we encountered an error or you are trying to access the wrong page.</p> </body> </html>
- Take a screenshot of the text editor you used to create the above two files and save it on your local machine with the following name
ide-screenshot.png
- Click on the
tab for your Amazon S3 Bucket
- Click on the
button
- On the Select files tab, click on the
button
- Select the files from your local machine and click on the
button
- On the Set permissions tab, select the following in the Manage public permissions section:
Grant public read access to this object(s)
- Click on the
button
- On the Set permissions tab, leave everything by default and click on the
button
- On the Review tab, review your entries and click on the
button
- Open a new browser window and paste the copied URL into the address bar
- Milestone step: At this point, you have learned how to access the home page of the static web site you created in your S3 Bucket.
- Add the following to the end of the URL in your browser’s address bar and click Enter
/foo
- Milestone step: At this point, you have learned how to the static web site you created in your S3 Bucket handles errors.
- Remove the
/foo
from the URL in your browser’s address bar and add the following
/ide-screenshot.png
Click Enter. - Milestone step: At this point, you have learned how to the static web site you created in your Storage Account can handle other static content like images.
Exercise #4: Delete the Amazon S3 Bucket
In this exercise, you will delete the Amazon S3 Bucket to save costs.
- Click on Amazon S3 in the breadcrumbs on top of the page
- Select the
[first name][last name initial]s3lab01bkt
bucket from the list - Click on the
button above the list
- Type the name of the bucket and click on the
button
- Milestone step: At this point, you have learned how to delete your Amazon S3 Bucket to save cost.
Last Update: October 8, 2019