In this blog I will show you how to deploy a static website on Amazon S3, along with an HTTPS endpoint and content delivered by CloudFront CDN. Here’s a video of the steps
Six steps to deploying a static website on Amazon S3
Step 1. Create a Bucket
As the first step I create a bucket in S3. Note that at this point, I already have the static website HTML/CSS/Javascript pages built and tested. The bucket should not be public.
Step 2. Upload files to the bucket
Next, I uploaded the HTML/CSS and javascript files to the bucket. You can upload using the AWS console or use the AWS S3 cp utility.
Step 3. Create an Origin Access identity
I built the website so that it can be accessed using CloudFront instead of directly through S3. The advantage is that your traffic is served through CDN and also your website is secured through HTTPS since CloudFront can be used to terminate your SSL connection. There are two ways in which CloudFront can access the S3 bucket. The first way is to make the S3 bucket public and the second way is to keep the bucket private and create an Origin Access Identity (OAI). This OAI is used by CloudFront to access files in the S3 bucket. I just modified the bucket policy in S3 to allow access via OAI. Actually, that’s not complete accurate – while I created the OAI, I just clicked a checkbox in the UI and it updated the bucket policy on my behalf. Nifty !
Step 4. Create a certificate in ACM
I then created a certificate in ACM. My site was called ‘site.studytrails.com’ so I created a certificate for that name. Since my website DNS is in Route53, I had to click another button in ACM to validate the certificate and it made the required entries into Route53 to validate the certificate. I had to wait till the validation was done, before moving on the next step.
Step 5. Create the CloudFront distribution
Once the certificate is ready, I created a new CloudFront distribution. While creating the distribution, I selected the RESP API endpoint for the bucket and used the OAI that I had created in step 3. I also gave the distribution the additional CNAME of ‘site.studytrails.com’ since that is how I want to access my website. I then chose the certificate for that site that I had created in Step 5. I also put in index.html as the root object. Once I clicked on ‘create distribution’, I had to wait for a while before the distribution was ready.
Step 6. Create the DNS entry
The last step is to create the DNS entry in Route 53 (or your own DNS provider). I created a Route53 entry for my site and used the CloudFront distribution as the alias. It might take a while for the DNS to propagate.
That’s it! Six easy and simple steps to host your static website on AWS! You site is secure, scalable and ready for the world!!