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
PlantShopAPILambda 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.jsand change the value of theapiUrlvariable to point to the URL of thePlantShopAPILambda function.Once you have done that, you can build the frontend code from within the
frontenddirectory withnpm:npm install npm run buildThis will produce a
builddirectory. The files within this directory are ready for deployment to S3.- Deploy the Frontend Code
Deploy the contents of the
builddirectory to the S3 bucket. You can do this from the CloudShell instance using theawsCLI.Once this step is complete, you should be able to access the Plant Shop app using the S3 bucket’s static website URL.
