Stupidly Simple Static Hosting with S3

About S3

One of the backbones of the AWS platform is its Simple Storage Service, or S3. The more one learns about AWS, the more you realize how dependent the internet is on its existence.

A lesser known feature of S3 however, is the ability to host static websites. By making your bucket publicly available, it quickly can become your interweb-facing beacon, hosting your personal site, portfolio, or teenage mutant ninja turtle blog. Another cool thing about S3 is that you don’t have to manage any servers. That’s great because when you let AWS manage those things, your site can go viral and scale without issue for pennies on the dollar.

A key thing to note is that the site must be static. Sorry Wordpress fans, that means no PHP or other server-side scripting. For this tutorial, we’re going to stick to using a popular React library called Create React App. For the purpose of this article, I created a sample site that can be cloned from Github.

Let’s Learn!

Before we start, let’s get a high-level overview of what we’re going to do:

  • Clone the sample site from Github and get it running
  • Upload the site to an S3 bucket using the AWS console
  • Learn to automate deployments to S3 using the AWS CLI tool

To kick things off, we’re going to get the site’s code from Github. Go into your terminal and run the following:

git clone git@github.com:brockinit/s3-create-react-app.git

If you’d like to see the site in all its completely stock glory, run npm start and navigate to localhost:8080 in your browser.

Now that we’ve gotten the site setup, let’s prepare to move it to S3.

  • Run npm run build

This will create the /build folder which will contain all of our compiled code.

With that out of the way, it’s time to move the site into S3. The next step is to log in to your AWS console. If you don’t have an account yet, be sure to make one at the AWS homepage. While not necessary for working within the AWS console, it’s important to get to your Access Key ID and Secret Access Key from your IAM Management console if you wish to access S3 via the command line. Amazon has thorough documentation on how to accomplish this here.

Upon successfully logging in to your AWS console, click over to the S3 dashboard. You’ll be greeted with a screen like this:

Hooray! We made it.

S3 stores objects in resources called “buckets”. To host our site, we need to create a bucket and make it available to the public. To do this, click on the “Create Bucket” and you’ll land here:

  • Give the bucket a name.
IMPORTANT Bucket names are unique across all of AWS. The bucket name that you choose must be the only instance of its kind out in the wild.
  • Click next and next again in step two to arrive at the “Set permissions” step.
  • Click into “Manage public permissions”
  • Check “Read” for both objects and object permissions.

The only thing we want to change here is public access. In order for our site to be served from this bucket, it’s necessary to make it visible to the world. If you don’t do this and people try to visit your website, they’ll be met with a sad 403 error and nobody likes those.

Me IRL after getting denied access to your bucket

Once this has been completed, you can keep everything else at their default settings and finish creating the bucket!

Luckily for us, configuring a bucket to host a website is a breeze. To do this, we have to click into the bucket and check the “Properties” tab.

From here:

  • Go to “Static website hosting”
  • Check the button “Use this bucket to host a website”
  • Add “index.html” to both the index document and error document
  • Hit “Save”
Setting the index document tells the bucket which file to serve as your site’s root

The final step is to take the contents of your /build directory from earlier and upload them to your bucket. Remember to set their public permissions to “Read” like you did for your bucket. Click on the endpoint listed for your bucket under “static website hosting” (example in above picture) and if all goes well, you should be looking at your newly deployed site!

Next steps: Automated deployments

Repeating these steps every time you make a change to your site can quickly become tedious. Fortunately, there’s a much simpler way to deploy changes in seconds using the AWS CLI tool.

If you don’t have the AWS CLI tool yet, be sure to run:

pip install --upgrade --user awscli

Before you can use the CLI tool to talk to your S3 bucket, you must configure it with your access keys. Here are the steps required:

  • aws configure
  • Enter your access key id and secret access key when prompted (these can be found by going to the IAM service in the AWS console and navigating to Users >> Some_User >> Security Credentials)

Now that the CLI tool is setup and configured to communicate with our S3 bucket, we can run our deployment script to send our updated website files up to the cloud!

From the website’s root directory, run the following commands:

# Create a new build folder with bundled assets
npm run build
# Move into the build directory
cd build
# Copy the contents of the build folder into your S3 bucket and make # them publicly available
aws s3 sync . s3://your_bucket_name --delete --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers

That’s it! Anytime you make an update to your site’s code, simply run that list of commands and your changes will be effective immediately on S3.

Conclusion

S3 is an immensely powerful service and as you can see, it can easily work in tandem with app scaffolding services such as create-react-app to rapidly develop and deploy static site solutions.

If you’d like to streamline the deployment process further, I’ve included the commands above as a bash script which can be found in the Github repo for this example. As always, if I’ve made a mistake or you think I could have done something another way, feel free to let me know in the comments!

Like what you read? Give Brock Lanoza a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.