Hosting a static website with HTTPS on S3 Bucket
Thu May 23, 2019 · 522 words

Today, I’ll host a static website with https on S3, I’ll use http://imyuvii.com as an example. Before starting you will need an AWS account and your DNS added in route53.

So Why to use S3 and why not EC2?

There are not really significant benefits to using ECS over S3 for static websites - you’d really use it when you have dynamically generated content.

We’re going to use following AWS services.

S3 bucket

We’ll need two S3 buckets one for imyuvii.com and another for www.imyuvii.com S3 Bucket

Do you see the endpoints in above screenshot. Kindly note it down those endpoints, we’ll use it at later stage.

Certificate manager

Public SSL/TLS certificates provisioned through AWS Certificate Manager are free. You pay only for the AWS resources you create to run your application.

CloudFront

S3 cannot support ssl on it’s own, so we’ll use CloudFront to support https on our static website which is quite straight forward.

Go to CloudFront, We’ll create two distribution one for imyuvii.com and another for www.imyuvii.com,

Let’s start with imyuvii.com

Click on create distribution, The form contains many fields but for us required fields are “Orignal Domain Name”, “Viewer protocol policy”, “Alternate domain name (CNAME)” and “SSL Certificate” - Original Domain Name : S3 bucket static site endpoint, Do not select from the drop down, Copy from the S3 Bucket properties becasue – create distribution - Viewer Protocol Policy: Redirect HTTP to HTTPS create distribution - Alternate domain name (CNAME): imyuvii.com - SSL Certificate: Custom SSL Certificate (select from dropdown) create distribution

Repeat the distribution for www.imyuvii.com only difference will be the Orignal Domain Name and Alternate domain name field.

Route53

Next we’ll go to route53 and point domains to the cloudfront distributors.

Edit the A records for imyuvii.com and www.imyuvii.com, map it with cloudfront distribution. Route53

Now we just have to wait for cloudfront to finish the distribution. That’s it you’ve your https://imyuvii.com.

Cheers!!


back · posts · who is yuvi? · contact · home