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.
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 Lambda@Edge.
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 |
Lambda@Edge solution (provided by the template static-website.yaml and lambdaedge-index-document.yaml template!)
To improve the default CloudFront behavior, we developed a Lambda@Edge 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
- Switch to the us-east-1 (N. Virginia) region.
- Click Next to proceed with the next step of the wizard.
- Specify a name and all parameters for the stack.
- Click Next to proceed with the next step of the wizard.
- Click Next to skip the Options step of the wizard.
- Check the I acknowledge that this template might cause AWS CloudFormation to create IAM resources. checkbox.
- Click Create to start the creation of the stack.
- Wait until the stack reaches the state CREATE_COMPLETE
- Copy the
LambdaVersionArn
output of the stack to your clipboard. - Switch to the region where you want to S3 bucket with static files to be created in.
- This templates depends on one of our
zone-*.yaml
templates. - Click Next to proceed with the next step of the wizard.
- Specify a name and all parameters for the stack.
a. Set the
LambdaEdgeSubdirectoriesVersionArn
to the value of theLambdaVersionArn
output. - Click Next to proceed with the next step of the wizard.
- Click Next to skip the Options step of the wizard.
- Check the I acknowledge that this template might cause AWS CloudFormation to create IAM resources. checkbox.
- Click Create to start the creation of the stack.
- Wait until the stack reaches the state CREATE_COMPLETE
Dependencies
static-website/lambdaedge-index-document.yaml
(required)vpc/zone-*.yaml
(required)