1_StaticWebHosting

Module 1: Static Web Hosting with Amazon S3

In this module you'll configure Amazon Simple Storage Service (S3) to host the static resources for your web application. In subsequent modules you'll add dynamic functionality to these pages using JavaScript to call remote RESTful APIs built with AWS Lambda and Amazon API Gateway.

If you're already comfortable working with Amazon S3, or you just want to skip ahead to working with Lambda and API Gateway, you can launch one of these AWS CloudFormation templates in the Region of your choice to build the necessary resources automatically.

Region	Launch
US East (N. Virginia)
US East (Ohio)
US West (Oregon)
EU (Frankfurt)
EU (Ireland)
EU (London)
Asia Pacific (Tokyo)
Asia Pacific (Seoul)
Asia Pacific (Sydney)

CloudFormation Launch Instructions (expand for details)

1. Click the Launch Stack link above for the region of your choice.

2. Click Next on the Select Template page.

3. Provide a globally unique name for the Website Bucket Name such as wildrydes-yourname and click Next.

4. On the Options page, leave all the defaults and click Next.

5. On the Review page, check the box to acknowledge that CloudFormation will create IAM resources and click Create.

   This template uses a custom resource to copy the static website assets from a central S3 bucket into your own dedicated bucket. In order for the custom resource to write to the new bucket in your account, it must create an IAM role it can assume with those permissions.

6. Wait for the wildrydes-webapp-1 stack to reach a status of CREATE_COMPLETE.

7. With the wildrydes-webapp-1 stack selected, click on the Outputs tab and click on the WebsiteURL link.

8. Verify the Wild Rydes home page is loading properly and move on to the next module, User Management.

Architecture Overview

The architecture for this module is very straightforward. All of your static web content including HTML, CSS, JavaScript, images and other files will be stored in Amazon S3. Your end users will then access your site using the public website URL exposed by Amazon S3. You don't need to run any web servers or use other services in order to make your site available.

For the purposes of this module you'll use the Amazon S3 website endpoint URL that we supply. It takes the form http://{your-bucket-name}.s3-website.{region}.amazonaws.com. For most real applications you'll want to use a custom domain to host your site. If you're interested in using a your own domain, follow the instructions for setting up a static website using a custom domain in the Amazon S3 documentation.

Implementation Instructions

Each of the following sections provide an implementation overview and detailed, step-by-step instructions. The overview should provide enough context for you to complete the implementation if you're already familiar with the AWS Management Console or you want to explore the services yourself without following a walkthrough.

If you're using the latest version of the Chrome, Firefox, or Safari web browsers the step-by-step instructions won't be visible until you expand the section.

Region Selection

This workshop can be deployed in any AWS region that supports the following services:

• Amazon Cognito
• AWS Lambda
• Amazon API Gateway
• Amazon S3
• Amazon DynamoDB

You can refer to the region table in the AWS documentation to see which regions have the supported services. Among the supported regions you can choose are N. Virginia, Ohio, Oregon, Ireland, Frankfurt, Tokyo, and Sydney.

Once you've chosen a region, you should deploy all of the resources for this workshop there. Make sure you select your region from the dropdown in the upper right corner of the AWS Console before getting started.

1. Create an S3 Bucket

Use the console or AWS CLI to create an Amazon S3 bucket. Keep in mind that your bucket's name must be globally unique. We recommend using a name like wildrydes-yourname.

Step-by-step instructions (expand for details)

1. In the AWS Management Console choose Services then select S3 under Storage.

2. Choose +Create Bucket

3. Provide a globally unique name for your bucket such as wildrydes-yourname.

4. Select the Region you've chosen to use for this workshop from the dropdown.

5. Choose Create in the lower left of the dialog without selecting a bucket to copy settings from.

   

2. Upload Content

Using the AWS CLI, upload the website assets available at s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website. You can use the following command to easily copy all of the assets. Make sure you replace YOUR_BUCKET_NAME with the name you used in the previous section.

aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME

If the command was successful, you should see a list of objects that were copied to your bucket.

3. Add a Bucket Policy to Allow Public Reads

You will need to add a bucket policy to your new Amazon S3 bucket to let anonymous users view your site. By default your bucket will only be accessible by authenticated users with access to your AWS account.

See this example of a policy that will grant read only access to anonymous users. This example policy allows anyone on the Internet to view your content. The easiest way to update a bucket policy is to use the console. Select the bucket, choose the permission tab and then select Bucket Policy.

Step-by-step instructions (expand for details)

1. In the S3 console, select the name of the bucket you created in section 1.

2. Choose the Permissions tab, then choose Bucket Policy.

3. Enter the following policy document into the bucket policy editor replacing YOUR_BUCKET_NAME with the name of the bucket you created in section 1:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
           }
       ]
   }

   

4. Choose Save to apply the new policy.

4. Enable Website Hosting

Using the console, enable static website hosting. You can do this on the Properties tab after you've selected the bucket. Set index.html as the index document, and leave the error document blank. See the documentation on configuring a bucket for static website hosting for more details.

Step-by-step instructions (expand for details)

1. From the bucket detail page in the S3 console, choose the Properties tab.

2. Choose the Static website hosting card.

3. Select Use this bucket to host a website and enter index.html for the Index document. Leave the other fields blank.

4. Note the Endpoint URL at the top of the dialog before choosing Save. You will use this URL throughout the rest of the workshop to view your web application. From here on this URL will be referred to as your website's base URL.

5. Click Save to save your changes.

   

Implementation Validation

After completing these implementation steps you should be able to access your static website by visiting the the website endpoint URL for your S3 bucket.

Visit your website's base URL (this is the URL you noted in section 4) in the browser of your choice. You should see the Wild Rydes home page displayed. If you need to lookup the base URL, visit the S3 console, select your bucket and then click the Static Web Hosting card on the Properties tab.

If the page renders correctly (see below for an example screenshot), you can move on to the next module, User Management.