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?
Steps Overview
- Register domain name using Route 53 (or point your name servers to AWS)
- Generate an SSL certificate for your domain
- Create an S3 bucket with the SAME NAME as you want your domain to show (example.com)
- 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)
- 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/
- Go to Route 53
2. Create a Hosted Zone
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
Step 2 - Generate an SSL certificate for your domain
- Go to AWS Certificate Manager and request a Certificate
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)
- Go to S3 AWS Service
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
4. Leave the rest options as default and click on Create Bucket
5. Go into the bucket and 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
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:
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!
10. Test the URL provided by the S3 bucket, go to the S3 bucket, select properties, and scroll all the way down
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)
- Go search for CloudFront and 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
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 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
Step 5— Create an A record in Route 53 that points to the CloudFront Distribution previously created in step 4
- Go to Route 53 service and 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
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