July 19, 2020

In the making of bhuvana.pro with S3 Route 53 ACM CloudFront

Long time wish of building a personal website & self hosting with custom domain, all happened over two weekends. 
Here you go with steps followed in the making of bhuvana.pro after developing the static website. 
The entire blog is detailed out with three stages. You can stop at any stage but still have working website with custom domain.
  1. Stage 1 - Static Website hosted on S3 routed with Route 53
  2. Stage 2 - Static Website hosted on S3 routed with Route 53 & CloudFront with ACM for SSL
  3. Stage 3 - Stage 2 + CI CD for deploying static website

Table of Contents

AWS Services Used

  • S3
  • Route 53 
  • Amazon Certificate Manager
  • CloudFront
  • AWS CodeCommit
  • AWS CodeDeploy
  • AWS CodePipeline

Best Practise
  • Ensure to tag all the resources that you create.
    • S3 root domain & logging bucket
    • CloudFront Distribution
    • Route 53 - Hosted Zone
    • ACM - public certificate 
  • I have create two tags as (Name: Bhuvana.pro and Usage: website), which will help for resource grouping and cost analysis.
  • To standardize example.com and www.example.com is used as root and subdomain through out this article



Detailed Implementation Instructions

Stage 1: 

We will be implementing Static Website on S3 routing to Custom domain (example.com) using Route 53 where Custom domain is registered with GoDaddy.com. This will be implement from Steps 1 to 9. 

Static Website hosted on S3 with Route 53


Step 1:

Amazon Route 53 is a highly available and scalable Domain Name System (DNS) web service. You can use Route 53 to perform three main functions in any combination: domain registration, DNS routing, and health checking. In our tutorial, we will be using Route 53 for DNS routing with external site for domain registration. Read here for more details on Route 53

Register your favourite domain based on availability.  I registered with GoDaddy just to integrate external domain with Route 53; otherwise registering a domain with Route 53 will automatically create a hosted zone for you.

Step 2:

Amazon Simple Storage Service (Amazon S3) is storage for the internet and static website hosting functionality helps you to host a static website on S3 bucket without need to provision and manage servers to meet the scale. Read here for more details on how to use S3.

Create an S3 bucket for the root domain (say example.com) and upload the content for your static website

Step 3:

Create an S3 bucket for subdomain and configure that to redirect to the domain bucket

Step 4:

Create a hosted zone in Route 53 for the registered domain name and copy the NS Record server details to update in GoDaddy.com
If you have registered domain with Route 53, this is handled automatically by AWS.

Step 5:

Add the NameServers in GoDaddy.com.
Remember to exclude the trailing dot while copying the server names.

Step 6:

Now that you have created two S3 buckets for hosting and redirecting, lets check if its working by copying the endpoints of S3 buckets to the browser. Yes, Website is up with S3!


Step 7:

Its time to route the domain / subdomain to access the website hosted in S3. You will have to create two record sets under the hosted zone pointing to the S3 buckets example.com and www.example.com

Step 8:

To watch the website traffic, you can enable logging on the root domain s3 bucket and store that logs in logs.example.com under prefix logs/


Step 9:

Test the websites with root domain and subdomain as follows


Stage 2

We have the website up & running, but how secured it is ? Good to have SSL integration. But S3 does not support SSL Integration, hence let's use Amazon CloudFront to deliver the static website from S3 secured with a public certificate created from Amazon Certificate Manager (ACM).

Static Website hosted on S3 with Route 53 with CDN


Step 10:
Amazon Certificate Manager helps you to easily provision, manage & deploy public and private SSL certificates. Read here for more details 

Important note: You should create the SSL only in N.Virginia region for usage with ACM. 

Step 11:

Amazon CloudFront is a web service that speeds up distribution of your static and dynamic web content, such as .html, .css, .js, and image files, to your users. CloudFront delivers your content through a worldwide network of data centers called edge locations. When a user requests content that you're serving with CloudFront, the user is routed to the edge location that provides the lowest latency (time delay), so that content is delivered with the best possible performance. Read here for more details on CloudFront.

Let's create a Web distribution in Amazon CloudFront to act as a CDN for our static website hosting

Step 12:

In Step 7, we routed the domain / sub domain to access the website hosted in S3. delete those record sets and create two new record sets to point to CloudFront domain.
If ipv6 is turned on for the CloudFront distribution, create two more record sets.

Step 13:

Your website is up & running with SSL Integration

Step 14:

Well, now your website can be browsed via S3 endpoint without SSL & via root domain & subdomains with SSL.

That isn't enough. Further, why should user access S3 content directly when we have SSL integration for your domain in place ?

Let's go in for Origin Access Identity to restrict access to content that you serve from Amazon S3 buckets and here are the steps:

  1. Create a special CloudFront user called an origin access identity (OAI) within CloudFront console and associate it with your distribution.

  2. Configure your S3 bucket permissions so that CloudFront can use the OAI to access the files in your bucket and serve them to your users. Make sure that users can’t use a direct URL to the S3 bucket to access a file there.

After you take these steps, users can only access your files through CloudFront, not directly from the S3 bucket.

Click here to read more about OAI and follow the below instructions to setup



Step 15:

Try accessing the content via S3 endpoint.. Hope you are getting 403 Forbidden ?
First time you can be happy about getting Access Denied Error. Hurray!!

Now your website should be only accessible via your root domain and subdomain delivered through CloudFront distribution.

Hearty Congratulations for successfully setting up your secured static website along with me.

Stage 3

As a DevOps person, an implementation is incomplete without a source control repository for versioning to the website changes  and seamlessly integrating the changes to S3 bucket through a DevOps pipeline and here is the architecture..  


                   Static Website hosted on S3 with Route 53 with CDN + DevOps Pipeline

Pricing

If you wanted to explore how much is your expenditure on the monthly basis, go to My Billing Dashboard to Activate Cost Allocation Tags for Name & Usage that we have created for all resources. Activating tags for cost allocation tells AWS that the associated cost data for these tags should be made available throughout the billing data pipeline. Once activated, cost allocation tags can be used as a filtering and grouping dimension in AWS Cost Explorer, as a filtering dimension in AWS Budgets, and as a dedicated column in the AWS Cost & Usage Report.

Reference Links


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)