Deploy a react static site to amazon S3

Required Bucket Configuration

  • Enable Static Site Hosting
  • Need public access to the bucket along with the objects
  • A bucket policy to enable Get Object permission
  • Bucket name should be the same as a domain name

Step 01: Create a Bucket

  • Go to AWS Console and open S3 service
  • Create a bucket and Uncheck Public Access
  • Bucket name should be the same as your website domain
  • While creating a bucket, ensure you uncheck the Block all public access
  • Also, acknowledge the pubic access

Step 02: Enable Static Website Hosting

  • Select the bucket and go to properties tab
  • Now you will find an option to edit Static website hosting and click Edit button
  • Enable the hosting
  • For a react app the index document should be index.html
  • We can create an error file and put it in the Error document section. Alternatively, we can use a dummy file name, even though it does not exist.
  • Now save the changes

Step 03: Update Bucket Policy

  • Select bucket-policy and click edit
  • Bucket policy be
  • Save the bucket-policy

Step 04: Upload Static Files

  • Now select the bucket and upload all the files and directory inside the build directory
  • Select bucket and go to the properties section
  • In properties, under the static site hosting you will find the url for the site.

Step 05: Setup Domain Using Route 53

  • Route name should be the same as the bucket name
  • Alias should be toggled in
  • As a value, from the dropdown select the s3 website endpoint
  • Also, select the region and bucket name from the value dropdown
  • Route type should be A record (IPv4)
  • Routing policy for the static site can be Simple Routing Policy

We Are Done

--

--

--

A lifelong learner. Love to travel, listen to music, and hang out with friends. I believe in simplicity and peace.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

BMG acquires music interests of blues icon John Lee Hooker

Solutions to Common JS Problems — The DOM

Angular 9 in a nutshell

Top React Hooks — Online Status, Timers, and Previous State

Sorting JavaScript Arrays

Where’s the Sleep Function in JavaScript?

Serving Static Files in Express Apps with serve-static

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Shams Nahid

Shams Nahid

A lifelong learner. Love to travel, listen to music, and hang out with friends. I believe in simplicity and peace.

More from Medium

How to secure your Node-Red Instance

How to use MariaDB to store text containing emojis in a Node.js environment

A Web Interface for Running Parallel Image Processing Algorithms in AWS Cloud

Preventing clickjacking exploits using AWS Cloudfront