AWS Hybrid Cloud Testing – Part 2 – Distribute static website over Cloudfront

This is part II of the AWS Hybrid Cloud testing series. In this post, I will be discussing how to test static website when it is being distributed and delivered over CloudFront. For the prupose of demonstration, I wil consider a mock scenario.

I run a small startup company. Instead of hosting my company website with an ISP, I would like to host my website on a S3 bucket and then distribute the content over Cloudfront. Using Cloudfront means that my website content, especially the large media content can be quickly delivered to global users over the Content Delivery Network (CDN) or edge servers.

The infrastructure is setup as below:

  • Create a static website with an html page and an image added to the html webpage (for demo purpose)
  • Create an s3 bucket to host the static website in Sydney region (Asia Pacific (Sydney) -ap-southeast-2)
  • Copy the html page and image to the s3 bucket
  • Now go to s3>Properties and select Static website hosting, properly configure the settings with index document (index.html) and error document (error.html). Also ensure that the objects can be accessed by public. So the url for the static website will be: http://<bucket-name&gt;.s3.<region-name>.amazonaws.com/index.html
  • Create a second s3 bucket in a different region and set it up as a backup s3 bucket (Asia Pacific (Singapore) – ap-southeast-1) so that cross region replication can be setup
  • Create a CloudFront distribution network and set it up with the s3 bucket origin name
  • Once the CloudFront is created, it will be accessible over its domain name
  • [Additional Step – if you can register a domain] Setup a hosted zone (a domain you have registered) and then create record sets to configure your registered domain to point to the domain ID of the Cloudfront. This way, your domain url will always redirect to the Cloudfront url.
  • [Additional Step – setup SNS notification to send email in case objects in s3 bucket are deleted] Please refer to below aws documentation for setting up SNS subscription so that when any object delete related event happens, it sends off an email notification to designated email address. https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/US_SetupSNS.html https://docs.aws.amazon.com/AmazonS3/latest/user-guide/enable-event-notifications.html

For reference on how to setup CloudFront distribution for static website, please refer to AWS documentation: https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-serve-static-website/

Here are the screenshots of what the website looks like when accessed over s3 and over CloudFront.

Static website accessed over s3 bucket:

Static website accessed over CloudFront distribution:

The domain name of CloudFront instance is as below:

Cloudfront1

 

Cloudfront2

The type of testing that you would want to do here are:

  • Configure that the s3 bucket access logs are recored in the backup s3 bucket. Verify that everytime the static website is accessed, logs are recorded and are accessible only by the bucket owner.
  • Use VPN to change your location and then access the website, there should be no discernible difference due to use of Edge server, no matter where your traffic originates
  • The objects in s3 bucket should be encrypted if encryption is enabled
  • Add new content to the static website in s3 bucket and this should be available over CloudFront distribution once the status changed from “In Progress” to “Deployed
  • Change the bucket access policy so that except for index.html and error.html, none of the other bucket objects can be accessed
  • Check that all objects cross region replicated to the backup s3 bucket cannot be accessed over their Object url

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.