Getting Started with AWS

Build a Basic Web Application

Deploy a web application and add interactivity with an API and a database

Module 1: Create a Static Website

In this module you will create and host a static website using Amazon S3.

Introduction

In this module you will configure Amazon Simple Storage Service (S3) to host the static resources for your web application. In subsequent modules, you will add dynamic functionality to these pages using AWS Lambda and Amazon API Gateway to call remote RESTful APIs. (REST stands for 'Representational State Transfer' and it is an architectural pattern for creating web services. API stands for application program interface. Thus, a RESTful API is one that implements that architectural pattern.).

For the purposes of this module you'll use a website endpoint URL that Amazon S3 supplies. It will be in the form:

http://{your-bucket-name}.s3-website.{region}.amazonaws.com

All of your static web content - including HTML, CSS, JavaScript, images, and other files - will be stored in Amazon S3. We selected the S3 service since it provides object storage, so that we can directly store and retrieve files from it. Your end users will easily be able to access your website by using the object URL exposed by S3.

If you are nervous about working with so many new things, do not worry! You will not use any other AWS services in this module, and you also do not need to run any web servers (a "server" is software or a hardware device that accepts and responds to requests made over a network) in order to make your website available.

The website will be an extremely simple "Hello World" page and we will add more functionality in later modules.

For most real applications you will want to use a custom domain to host your site. (A "custom domain" is a unique branded name that identifies a website, such as www.amazon.com. While beyond the scope of this module, if you are interested in using your own domain, you can follow the instructions in this guide).

What You Will Learn

  • Create an S3 bucket
    • Data is stored as objects within resources called "buckets"
  • Upload files to an S3 bucket
  • Navigate to the S3 console to edit "bucket" and "object" settings
  • Change the security level in an S3 bucket and make objects within it public
  • Enable web hosting on an S3 bucket
    • "Web hosting" provides the technologies/services needed for your website to be viewed on the Internet

Key Concepts

Static website A static website has fixed content, unlike dynamic websites. Static websites are the most basic type of website and are the easiest to create. All it takes is creating a few HTML pages and publishing them to a web server!

Resource An entity that you can work with (for example, an Amazon S3 bucket).

Object Storage A computer data storage architecture that manages data as objects, as opposed to other storage architectures where data is stored as files or blocks.

S3 Objects A resource that contains data and metadata (a set of data that describes and gives information about other data) and is associated to a unique key that identifies it.

S3 Bucket A resource used to group multiple stored objects. It must have a globally unique name.

S3 Object URL Unique web-accessible address provided by the S3 service for an object stored in it.

AWS Regions Separate geographic areas that AWS uses to house its infrastructure. These are distributed around the world so that customers can choose a region closest to them in order to host their cloud infrastructure there.

 Time to Complete

10 minutes

 Module Prereqs

Implementation

  • Create Bucket with Public Access
    1. Using your AWS credentials, log into the Amazon S3 Console.
    2. Click the orange "Create bucket" button.
    3. Give your bucket a name. All Amazon S3 buckets, regardless of what account they are created in, share the same namespace, so this name must be globally unique.
    4. Select the region you want to locate your bucket in. For this tutorial, pick the one that is closest to you.
    5. Unselect "Block all public access." Since we are hosting a website, we want people to have access to it.
    6. Select the check box next to "Block public access to buckets and objects granted through new public bucket or access point policies."
    7. Select the check box next to "Block public and cross-account access to buckets and objects through any public bucket or access point policies."
    8. Select the check box to acknowledge that the content of this bucket might become public. We won't store any private information in this bucket as its contents could be public. This is what it should look like:
    Full Stack tutorial bucket settings

    9. Click the orange "Create bucket" button.

    10. You should see a green box at the top of the screen with a message that reads "Successfully created bucket."

  • Configure Bucket to Host a Website
    1. Find your new bucket on the list below and click on it.
    2. Click on the grey "Properties" tab.
    3. Click on the "Static website hosting" box.
    4. Click on the "Use this bucket to host a website" radio button.
    5. Under "Index Document" type "index.html."
    6. Under "Error Document" type "error.html." This is how it should look like:  
    Full Stack tutorial bucket hosting

    7. Click the blue "Save" button.

    8. Click on the grey "Overview" tab.

    9. Leave your browser open and open your favorite text editor on your computer. Create a new file and paste the following HTML in it...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    
    <body>
        Hello World
    </body>
    </html>

    10. Save the file as index.html.

    11. Create a second text file and paste the following into it...

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Error Page</title>
    </head>
    
    <body>
        Error Page
    </body>
    </html>

    12. Save the second file as error.html.

    13. Go back to your browser.

    14. Click the blue "Upload" button.

    15. Select the index.html and error.html files to upload.  

    Full Stack tutorial upload-html

    16. Click the blue "Next" button.

    17. From the "Manage public permissions" drop-down menu select : "Grant public read access to this object(s)." We need to do this so anyone can open the site using their browser, including ourselves for testing.

    Full Stack tutorial GrantPublicRead

    18. Click the blue "Upload" button on the left.

  • Test Your Static Website
    1. Click on index.html from the list.
    2. Click the link under "Object URL."
    3. A new browser tab should load and render a very basic "Hello World" web page.
    4. Congratulations, you've hosted a static website!

Application Architecture

Here is what our architecture looks like right now:

Full Stack tutorial Module One app arch

It is pretty minimal for now as we are only using the S3 service. We have confirmed that users can successfully access our web app stored in S3. Next we will create an AWS Lambda function.

Was this module helpful?

Thank you
Please let us know what you liked.
Sorry to disappoint you
Is something out-of-date, confusing or inaccurate? Please help us improve this tutorial by providing feedback.

Build Serverless Function