New: Manage Free Templates for AWS CloudFormation with the widdix CLI

Static website with CDN

This template describes the infrastructure for hosting a static website over HTTPS behind a CDN.

Architecture

Index Document / Default Root Object

S3 and CloudFront behave differently when it comes to index document support in subdirectories. You might expect that if you have a subdirectory (e.g. folder) with a index.html file inside, that you get the file if you make q HTTP request to /folder/. Unfortunately, that's not the default behavior of CloudFront but there is a workaround using [email protected]

S3 Website Hosting behavior with Index Document (not provided by the template!)

Resource Response Comment
/ 200 Content of index.html
/index.html 200 Content of index.html Not SEO friendly because of duplicate content on /, should redirect to /
/folder 302 Redirect to /folder/
/folder/ 200 Content of index.html
/folder/index.html 200 Content of index.html Not SEO friendly because of duplicate content on /folder/, should redirect to /folder/

CloudFront with Default Root Object (provided by the template static-website.yaml template!)

Resource Response Comment
/ 200 Content of index.html
/index.html 200 Content of index.html Not SEO friendly because of duplicate content on /, should redirect to /
/folder 403 Error Not user friendly
/folder/ 403 Error Not user friendly
/folder/index.html 200 Content of index.html Not user friendly

[email protected] solution (provided by the template static-website.yaml and lambdaedge-index-document.yaml template!)

To improve the default CloudFront behavior, we developed a [email protected] solution that gives you the following search engine optimized result.

Resource Response
/ 200 Content of index.html
/index.html 302 Redirect to /
/folder 302 Redirect to /folder/
/folder/ 200 Content of index.html
/folder/index.html 302 Redirect to /folder/

Installation Guide

  1. Switch to the us-east-1 (N. Virginia) region.
  2. Launch Stack
  3. Click Next to proceed with the next step of the wizard.
  4. Specify a name and all parameters for the stack.
  5. Click Next to proceed with the next step of the wizard.
  6. Click Next to skip the Options step of the wizard.
  7. Check the I acknowledge that this template might cause AWS CloudFormation to create IAM resources. checkbox.
  8. Click Create to start the creation of the stack.
  9. Wait until the stack reaches the state CREATE_COMPLETE
  10. Copy the LambdaVersionArn output of the stack to your clipboard.
  11. Switch to the region where you want to S3 bucket with static files to be created in.
  12. Launch Stack
  13. Click Next to proceed with the next step of the wizard.
  14. Specify a name and all parameters for the stack. a. Set the LambdaEdgeSubdirectoriesVersionArn to the value of the LambdaVersionArn output.
  15. Click Next to proceed with the next step of the wizard.
  16. Click Next to skip the Options step of the wizard.
  17. Check the I acknowledge that this template might cause AWS CloudFormation to create IAM resources. checkbox.
  18. Click Create to start the creation of the stack.
  19. Wait until the stack reaches the state CREATE_COMPLETE

Dependencies

  • static-website/lambdaedge-index-document.yaml (required)
  • vpc/zone-*.yaml