How to apply SSL for HTTPS on a WebApp hosted in AWS S3 Bucket

So you are ready to publish your web application to be available to the world, but you notice the URL is only serving HTTP traffic?

Overview Diagram

Steps Overview

1. Register domain name using Route 53 (or point your name servers to AWS)
2. Generate an SSL certificate for your domain
3. Create an S3 bucket with the SAME NAME as you want your domain to show (example.com)
4. Create CloudFront Distribution that points to the S3 bucket with the SAME NAME you want your traffic routed to (using the HTTP link, not selecting the S3 bucket)
5. Create an A record in Route 53 that points to the CloudFront Distribution previously created in step 4

Steps Breakdown

Step 1- Register domain name using Route 53 (or point your name servers to AWS)

If you don’t have an AWS account, create a free account here https://aws.amazon.com/free/

1. Go to Route 53

Search for Route 53 within services

2. Create a Hosted Zone

Name it the same as your domain name

Check if the domain name is available and register it

Or point the domain name servers to AWS

I bought this domain a while back, I know is Corny but hey is a domain to show you lol

For example this domain was registered with Google but is pointing to AWS name servers

Add the AWS Name servers

Step 2 - Generate an SSL certificate for your domain

1. Go to AWS Certificate Manager and request a Certificate

Click Request

Click Next

Type in your domain name, and leave all the defaults, then press next.

Once requested, this might take a long time, it took around 1 hour for me, but in the meantime, you could continue on the next steps.

Step 3 - Create an S3 bucket with the SAME NAME as you want your domain to show (example.com)

1. Go to S3 AWS Service

Click on Create Bucket

2. Name your bucket the same as your domain

3. For Block Public Access Settings for this bucket — option, unselect Block all public access, and check the Acknowledge

Check the I acknowledge checkbox

4. Leave the rest options as default and click on Create Bucket

Click on Create Bucket

5. Go into the bucket and select properties

Select Properties

6. We need to Enable this S3 bucket to host a static website, Scroll all the way down to the bottom where it says Static Website Hosting.

Then click on edit to enable

Click on Edit

7. Once we enable Static Website Hosting we need to select which pages will be the default (type index.html) for both fields

8. Next we have to make Objects Public we do this by applying a bucket policy, by going to Permissions and then clicking on Edit under Bucket Policy

Then enter the following JSON object, but notice you have to put your own bucket name under the Resource

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::your-bucket-name-here/*"
        }
    ]
}

The bucket Policy should look like this:

This allows all to be able to get items from this bucket — making it public

9. Upload your website content to the S3 bucket

If you are using a React Application you have to Upload the contents of the BUILD folder, which contains the index.html

If you don’t have a React App create one like this

# create react app
$ npx create-react-app my-cool-app

# create build of the react app, this will create a build folder with an index.html within
$ npm run build

Upload the contents of the BUILD folder NOT the BUILD folder itself!

Run `npm run build` then open the location where the build folder was created

10. Test the URL provided by the S3 bucket, go to the S3 bucket, select properties, and scroll all the way down

Click on the link

Then your Web Application should show up on the link

Step 4 — Create CloudFront Distribution that points to the S3 bucket with the SAME NAME you want your traffic routed to (using the HTTP link, not selecting the S3 bucket)

1. Go search for CloudFront and click on Create Distribution

Click on Create Distribution

For Origin Domain, paste in the URL provided by the S3 bucket (without the HTTP://)

DO NOT select the S3 BUCKET from the dropdown

Paste the URL that was provided by the S3 bucket (without the HTTP)

Select Redirect HTTP to HTTPS and select GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

Make sure to add an Alternative Domain Name CNAME — NOT OPTIONAL

Make sure to add an Alternative Domain Name CNAME — NOT OPTIONAL if you want the A Record to be able to point to it

Then click on Create Distribution

Then copy the Distribution Domain Name and it should show the content from the S3 bucket, in this case, is the web application we created earlier

Visit the Distribution Domain Name and it should show the web application in the S3 bucket

Step 5— Create an A record in Route 53 that points to the CloudFront Distribution previously created in step 4

1. Go to Route 53 service and create a Hosting Zone

Create a Hosting Zone

Select Define Simple Record — Choose A type, select Alias to CloudFront Distribution then the CloudFront Distribution record should show up in the list

Define Simple Record

Then finally when anyone visits your domain name it should display the contents of your S3 bucket using HTTPS

For example my domain name codewithdad.com

Notice the HTTPS in the lock in front of the domain name