Ameh Mathias Ejeh

Posted on Mar 10

Challenge Lab: Creating a Static Website for the Café

Lab Scenario

Frank and Martha are a husband-and-wife team who own and operate a small café business that sells desserts and coffee. Their daughter, Sofía, and their other employee, Nikhil (who is a secondary school student), also work at the café. The café has a single location in a large city.

The café currently doesn’t have a marketing strategy. It gains new customers mostly when someone walks by, notices the café, and decides to try it. The café has a reputation for high-quality desserts and coffees, but the café's reputation is limited to people who have visited or who have heard about it from other café customers.

Sofía suggests to Frank and Martha that they should expand community awareness of what the café has to offer. The café doesn’t have a web presence yet, and it doesn’t currently use any cloud computing services. However, that situation is about to change.

Lab overview

In this lab, you use Amazon Simple Storage Service (Amazon S3) to build a static website and implement architectural best practices to protect and manage your data.

Features

Host a static website by using Amazon S3.
Implement one way to protect the data with Amazon S3.
Implement a data lifecycle strategy in Amazon S3.
Implement a disaster recovery (DR) strategy in Amazon S3.

Architecture Diagram

Setup Instructions

Challenge 1: Launching a static website

Task 1: Extracting the files that you need for this lab

Download the .zip file that you need for this lab:
Extract the files to your computer.

Task 2: Creating an S3 bucket to host your static website

Open the Amazon S3 console.
Create a bucket in the US East (N. Virginia) us-east-1 AWS Region.
Tip: Clear Block all public access and enable ACLs.
Enable static website hosting on your bucket.
Tip: Use the index.html file for your index document.

Task 3: Uploading content to your S3 bucket

In this task, you upload the static files to your S3 bucket.

Upload the index.html file and the CSS and images folders to your S3 bucket.

In a separate web browser tab, open the endpoint link for your static website.

Task 4: Creating a bucket policy to grant public read access

Create a bucket policy that grants read-only permission to public anonymous users by using the bucket policy editor.

Confirm that the website for the café is now publicly accessible.

Challenge 2: Protecting website data.

Task 5: Enabling versioning on the S3 bucket

In this task, you enable versioning on your S3 bucket and confirm that it works.

In the Amazon S3 console, enable versioning on your S3 bucket.
Note: Notice that after you enable versioning, you can't disable it.

In a text editor, open the index.html file.
For example, you could use the Notepad++ or text editor of your choice.
Modify the file according to the following instructions:

a. Locate the first line that has the embedded CSS code bgcolor="aquamarine" in the HTML, and change it to bgcolor="gainsboro".

b. Locate the line that has the embedded CSS code bgcolor="orange" in the HTML, and change it to bgcolor="cornsilk".

c. Locate the second line that has the embedded CSS code bgcolor="aquamarine" in the HTML, and change it to bgcolor="gainsboro".

Save the changes.
Upload the updated file to your S3 bucket.
Reload the web browser tab with your website and notice the changes.
To see the latest version of the index.html file, go to your bucket and choose Show versions. You should see both versions of this file listed.

Challenge 3: Optimizing costs of Amazon S3 object storage.

Task 6: Setting lifecycle policies

In this task, you set a lifecycle policy to automatically move older versions of the objects in your source bucket to S3 Standard-Infrequent Access (S3 Standard-IA). The policy should also eventually expire the objects.

Configure two rules in the website bucket's lifecycle configuration.

a. In one rule, move previous versions of all source bucket objects to S3 Standard-IA after 30 days.

b. In the other rule, delete previous versions of the objects after 365 days.

Challenge 4: Enhancing durability and planning for DR.

Task 7: Enabling cross-Region replication

In this task, you enable cross-Region replication on your source S3 bucket.

In a different Region than the Region for your source bucket, create a second bucket and enable versioning on it. The second bucket is your destination bucket.
On your source S3 bucket, enable cross-Region replication. When you create the replication rule, make sure that you do the following:

a. Replicate the entire source bucket.

b. Use CafeRole for the AWS Identity and Access Management (IAM) role. This IAM role gives Amazon S3 the permissions to read objects from the source bucket and replicate them to the destination bucket.

Version: 2012-10-17
Statement:
  - Action:
  - s3:ListBucket
  - s3:ReplicateObject
  - s3:ReplicateDelete
  - s3:ReplicateTags
  - s3:Get*
    Resource:
  - '*'
    Effect: Allow

Make a minor change to the index.html file and upload the new version to your source bucket.
Verify that the source bucket now has three versions of the index.html file.
Confirm that the new object was replicated to your destination bucket.

What I Learnt

Host a static website by using Amazon S3.
Implement one way to protect your data with Amazon S3.
Implement a data lifecycle strategy in Amazon S3.
Implement a disaster recovery (DR) strategy in Amazon S3.

Future Improvement

Creating a Dynamic Website for the Café
Adding a database layer for the Café
Creating a VPC Networking Environment for the Café

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started