AWS Web Hosting | Part 1.1 React App on S3 with Static Hosting + Route 53 + CloudFront

Blog cover created by OpenAI DALL·E

Previous blogs of this series:

• Series Introduction: ⚒️ How to Host Your Portfolio Website on AWS: A Comprehensive Guide!

---

Hi! Welcome to the first part of hosting your portfolio website on AWS! There are 3 subparts and I'll explain each one of them individually:

1. Upload the website content into S3 bucket for static hosting.

2. Set up the DNS routing in Route 53.

3. Create a certificate in a CloudFront distribution to support HTTPS.

Let's get started with configuring the S3 bucket!

Upload the website content into S3 bucket for static hosting

If your website is also built using React, first you will need to bundle all the React files together so that they can be deployed to the production environment.

Go to your project's root directory and run:

npm run build

Then a folder named "dist" or "build" will be generated, it contains the index.html file, static contents, etc., that we need for the website.

Create the S3 bucket

We're going to create two different buckets. The first one is our website name with "www" in front of, for example my website www.evelynliu.com, it's the authority and have all of our content in it. The other one is the website name without "www", for example evelynliu.com, it's for redirect. In our project, when someone goes to evelynliu.com it redirects to www.evelynliu.com, but you can also do the opposite.

Come up with a domain name for your website, I'll use mine as examples and let's get started!

First we create the "www" bucket. Select a AWS region that is close to you or the one you want your website to be in. Then name your bucket. You can leave everything as default and click on Create Bucket.

Second is the bucket without "www". Everything is exactly the same despite of the bucket name, name it the "non-www" version of your website.

Now you will have two buckets:

Upload the files

We only need to upload the files to the "www" version bucket. Go to the bucket and click on Upload. Then add files and folders to the bucket.

Enable "www" bucket settings

Go to the "www" bucket and click on Permissions. Click Edit, disable Block public access (it's enabled by default) to make the bucket public.

Then edit the Bucket policy by pasting the following string. This policy allows anyone to call the S3 get object API on our bucket. Make sure you change "YOUR-BUCKET-NAME" string to your bucket name.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
        }
    ]
}

Your bucket will look like this after you've completed previous steps:

Now if you go to the index.html page and open the Object URL, you can see the React app is loading up but not the whole content. We can tell here from now that the bucket is public and we're able to access all the files. After we set up the DNS and later steps you are going to see your website and everything will work perfectly.

Let's enable the static website hosting on the "www" bucket. Go to Properties and scroll all the way down to the bottom, there's a section called Static website hosting. It's disabled by default. Edit it and set it up as follows:

Now the "www" bucket is ready to go!

Enable "non-www" bucket settings

To enable to the redirect thing, go to the Static website hosting section and edit:

For now we'll set protocol as http, but we'll come back here when we use CloudFront and set it to https to get security on our website.

Congratulations! This is everything for the S3 portion for now! Your S3 console should look like this, and please comment below if you have any issues when following this tutorial!

Now let's go over to Route 53! See you in the next blog! 🫶

➡️ AWS Web Hosting | Part 1.2 React App on S3 with Static Hosting + Route 53 + CloudFront | Domain Registration with Route 53