Skip to content

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.
  • Labs icon Lab
  • A Cloud Guru
Google Cloud Platform icon
Labs

Serving Static Content with S3

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.

Try for free Contact sales
Google Cloud Platform icon
Labs

Path Info

Level
Clock icon Intermediate
Duration
Clock icon 30m
Published
Clock icon Jul 15, 2022

Contact sales

By filling out this form and clicking submit, you acknowledge our privacy policy.

Table of Contents

  1. Challenge

    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.

  2. Challenge

    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.

  3. Challenge

    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.

A Cloud Guru - Labs - Serving Static Content with S3
Author
A Cloud Guru

The Cloud Content team comprises subject matter experts hyper focused on services offered by the leading cloud vendors (AWS, GCP, and Azure), as well as cloud-related technologies such as Linux and DevOps. The team is thrilled to share their knowledge to help you build modern tech solutions from the ground up, secure and optimize your environments, and so much more!

What's a lab?

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.

Provided environment for hands-on practice

We will provide the credentials and environment necessary for you to practice right within your browser.

Guided walkthrough

Follow along with the author’s guided walkthrough and build something new in your provided environment!

Did you know?

On average, you retain 75% more of your learning if you get time for practice.

Start learning by doing today

View Plans