S3 Exercise 2.1: Host a Static Website on S3
(This post is part of the AWS for the Bootcamp Grad series. The series consists of exercises to build familiarity with various aspects of the AWS ecosystem. Again, all of these posts are “exercises” for introductory exposure to AWS — they are NOT represented as best practices.)
Background
S3, or Simple Storage Service, is an AWS service that provides an interface for storing and retrieving data from anywhere on the web. Compared with EC2, S3 feels more approachable for a beginner, due to its familiar terminology and concepts. Specifically, the parallels between the structure of S3 and the file system on your local computer make it comparatively easy to pick up.
The fundamental entities stored in S3 are known as objects (as opposed to files) and they are stored in buckets (as opposed to folders). Buckets have a domain name, and the objects in the buckets have a key value (e.g. the name of the object). For example, an object with the key value of myPhoto.jpg stored in the my-bucket bucket would be accessible at: http://s3.amazonaws.com/my-bucket/myPhoto.jpg
In this exercise, you will do the following:
- Create an S3 bucket
- Configure the S3 bucket to host a static website
- Upload html files to the S3 bucket from the AWS console
- Host a static website with a client-side script from S3.
Before You Begin
Create index.html and error.html files locally. Copy the following into the index.html file:
<h4>I am a:</h4>
<button onClick=showDogContent()>Dog</button>
<button onClick=showCatContent()>Cat</button>
<h1 id="content"></h1><script>
const contentEl = document.getElementById("content")
const dogContent = "Woof Woof Woof"
const catContent = "Meow Meow Meow"
function showDogContent() {
contentEl.innerHTML = dogContent
}
function showCatContent() {
contentEl.innerHTML = catContent
}
</script>
Note that a client-side script on this file inserts additional html content when one the buttons is clicked.
Copy the following into the error.html file:
<h1>Whoops</h1>Create an S3 Bucket
Navigate to the S3 dashboard from the AWS console. Click Create Bucket and enter a bucket name of your choice (bucket names must be unique across all AWS accounts) and select the region closest to your location. Click Next. Click Next again on the Set Properties section.
In Set Permissions step, select Grant public read access to this bucket under the Manage public permissions section. Click Next then Create bucket.
Configure the Bucket to Host a Static Website
From your S3 dashboard, click the name of the bucket you just created. Click the Properties tab and click Static website hosting. Select Use this bucket to host a website to configure the static website.
The endpoint for your static website is shown at the top of the form. This is your website URL. For index document, type index.html and for error document, type error.html.
This means that the index.html object stored on this bucket will be served at the root of your website. If there is a problem serving that file, the error.html object stored on this bucket will be served.
Click Save.
Upload HTML files to the S3 Bucket
Now you will upload the HTML files for your website.
Click the Overview tab for the bucket and then click Upload. Click Add files and select the index.html and error.html files you created earlier. Click Next.
In Set Permissions step, select Grant public read access to this object(s) under the Manage public permissions section. Click Next, maintain all of the default options in the Set Properties step and click Next. Finally, click Upload.
You will see both of your files listed in your bucket.
Visit Your Website
Navigate to your website URL (reminder: you can find from the AWS console it by clicking Properties → Static website hosting from the S3 bucket). Your index.html content should appear. Click on the buttons to execute the client-side script.
To see the error page, navigate back to the AWS console. Click the Overview tab in your bucket and click on the link for the index.html object. Click on the Permissions tab and click the radio button under Public access. Deselect Read Object and click Save. Navigate back to your website URL and refresh the page. You will now see the error.html content, as the website is unable to access the private index.html file.
Navigate back to your AWS console and make the index.html object public again. Then click the Overview tab.
Notice that there is a link shown at the bottom for the index.html object. This link is known as the REST URL for the object (as opposed to the website URL you used earlier). If you click this link, you will see your index.html content — just like you did from the website URL. However, this URL lacks some of the behavior provided at the website URL (such as error handling). See this page for more information on the difference between these URLs.
Clean Up
Navigate to your S3 dashboard. Click the bucket symbol next to your bucket name. Then click Delete Bucket. Type the name of the bucket, and click Confirm.
