Serving Static Content with S3

30 minutes
  • 3 Learning Objectives

About this Hands-on Lab

S3 is a great way to manage object data, but you can also use it to serve data in the form of a static site. In this lab, we will explore what it looks like to serve static frontend content for a web application using S3. We will create and configure an S3 bucket, then deploy our application’s static frontend code to it.

Learning Objectives

Successfully complete this lab by achieving the following learning objectives:

Create the S3 Bucket

Create an S3 bucket to host our static frontend content.

Configure the bucket to allow public access, and enable static website hosting. In addition, create a bucket policy that will allow all users to read any objects (static files) in the bucket.

Build the Frontend Code

You will need to modify the frontend code to point to the PlantShopAPI Lambda function in AWS. This function is already set up, but you will need to access it to obtain its URL.

You can clone the application code from the GitHub repository located here using a CloudShell instance.

Within the code repository, you will need to edit frontend/src/App.js and change the value of the apiUrl variable to point to the URL of the PlantShopAPI Lambda function.

Once you have done that, you can build the frontend code from within the frontend directory with npm:

npm install

npm run build

This will produce a build directory. The files within this directory are ready for deployment to S3.

Deploy the Frontend Code

Deploy the contents of the build directory to the S3 bucket. You can do this from the CloudShell instance using the aws CLI.

Once this step is complete, you should be able to access the Plant Shop app using the S3 bucket’s static website URL.

Additional Resources

Welcome to the Plant Shop!

Our self-hosted online store has worked well, up until lots of people started buying our plants. Now, we want a more reliable platform that we can use to innovate faster. We're moving to AWS!

We already moved the application's database to RDS and set up the API in AWS Lambda. The next step is to deploy the static frontend content to S3. Your task is to set up an S3 bucket, then build and deploy the application's static frontend code to the bucket.

The lab server associated with this lab represents the old "non-cloud" version of our app. You can access the app using the Plant Shop server's public IP address, on port 8081. The application's API is on port 8080.

You also have an AWS account that you can use to set up our frontend in AWS. Good luck!

What are Hands-on Labs

Hands-on Labs are real environments created by industry experts to help you learn. These environments help you gain knowledge and experience, practice without compromising your system, test without risk, destroy without fear, and let you learn from your mistakes. Hands-on Labs: practice your skills before delivering in the real world.

Sign In
Welcome Back!

Psst…this one if you’ve been moved to ACG!

Get Started
Who’s going to be learning?