Hosting a Static WebSite on AWS S3 with SSL Enabled

If you are thinking about hosting a static website on AWS cloud without spending a lot of money, please read on. Remember, a static website need not be a simple HTML/css site, but it can be a production build folder ( made out of a React or Angular codebase ) containing all your css, js and media files.

Step one is to create a S3 bucket via AWS Management Console
In my case, I wanted to host a static build at https://dev.mydomain.com/. So I created a S3 bucket with the same name.

Step two is to upload all your build files or HTML/CSS files to the S3 bucket. Once you click open the bucket in AWS Console, you can just drag and drop all your files.

Make sure you have your index.html file uploaded.

Now go to the Permissions tab of the bucket and add a bucket policy like below.

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

Note: <bucket_name> is to be replaced with the real bucket name. In my case it’s dev.mydomain.com

Save it and go to the Properties tab of same bucket. Scroll down to the bottom and Enable Static Web Hosting. At the bottom line you will see the Bucket Website Endpoint, which you can use to access your website. Pheww!

Now you will need to configure the real domain name to access the website. For that, login to your DNS provider interface and add a CNAME record for your domain to point to the bucket website endpoint. In my case I created a DNS entry with Hostname “dev.mydomain.com”, type “CNAME” and value “dev.mydomain.com.s3-website.ap-south-1.amazonaws.com”. Now you can access your domain dev.mydomain.com which will serve the  content from s3 bucket.

Finally, if you want to access your website via SSL, you will need to do the following things.
1) Import a SSL Certificate OR just Request for one from AWS itself. You can this via AWS Certificate Manager service.
2) Configure a CloudFront Distribution to serve the content from our S3 bucket. For this you will need to set the Origin Domain field to S3 Bucket endpoint. In this step you will also get a chance to select the certificate you imported/got via AWS Certificate Manager.
3) Edit the domain’s ( in my case dev.mydomain.com ) CNAME and point it to the CloudFront Distribution Name ( something like r5o6atze4v4tx.cloudfront.net) instead of Bucket Website Endpoint.

Now you must be able to access your site over HTTPS.

I shall elaborate the last three points in another blog post for better clarity. Happy Hosting!!

Leave a Reply

Your email address will not be published. Required fields are marked *