awslabs / awslabs/aws-solutions-constructs

aws-cloudfront-s3 - support for s3 websites

Open
#90 6 comments 2 reactions 0 assignees View on GitHub
feature-request needs-triage
Dominant language
TypeScript
Stars
1.4k
Forks
268
Avg merge
5h 18m
Merged PRs (30d)
5

Description

When using your CloudFrontToS3 construct it creates an S3 bucket and CloudFront very easily.
https://docs.aws.amazon.com/solutions/latest/constructs/aws-cloudfront-s3.html

This configuration works really well for hosting individual files. However when you want to host a static site on s3 the it requires a lot of manual overrides.

S3 Bucket props for switching on website hosting seems simple:
```
const construct = new CloudFrontToS3(this, 'my-website', {
bucketProps: {
websiteErrorDocument: '/404/index.html',
websiteIndexDocument: 'index.html'
}
});
```
But then when deployed, the url defined in the CloudFront Origin is the S3 bucket REST url not the Website url:

REST API endpoints use this format:
DOC-EXAMPLE-BUCKET.s3.amazonaws.com

Website endpoints use this format:
DOC-EXAMPLE-BUCKET.s3-website-us-east-1.amazonaws.com

Then there are further requirements for s3 bucket website hosting:

- Objects in the bucket must be publicly accessible.
- Objects in the bucket can't be encrypted by AWS Key Management Service (AWS KMS).
- The bucket policy must allow access to s3:GetObject.
- If the bucket policy grants public read access, then the AWS account that owns the bucket must also own the object.
- The requested objects must exist in the bucket.
- Amazon S3 Block Public Access must be disabled on the bucket.
- If Requester Pays is enabled, then the request must include the request-payer parameter.
- If you're using a Referrer header to restrict access from CloudFront to your S3 origin, then review the custom header.

https://aws.amazon.com/premiumsupport/knowledge-center/s3-website-cloudfront-error-403/

All this adds up to hours of work per developer to find the correct configuration overrides, to get static hosting working with CloudFront.

### Use Case

It's a common use-case to host static sites on S3, not just hosting static files. So let's make it even easier to use CDK to deploy a static site, and also give developers an AWS opinionated way to securely deploy static sites!

### Proposed Solution

Set a type, to automatically configure the settings between file hosting and website hosting:
```
const construct = new CloudFrontToS3(this, 'my-website', {
type: 'website'
});
```

### Other

Related issues others have faced trying to implement these settings themselves:
https://stackoverflow.com/questions/34060394/cloudfront-s3-website-the-specified-key-does-not-exist-when-an-implicit-ind/64397720

Contributor guide

Open the contributing guide

Research direction

Start at the CloudFrontToS3 construct and trace how bucket properties and the CloudFront origin are configured. Compare the existing file-hosting behavior with the proposed type: "website" should configure the S3 website endpoint and the required hosting settings. Done means a static site can be deployed through the construct without manual configuration overrides.

Written by the indexing model from the issue text.

Assessment

Tech stack
aws, typescript
Domain
cloud, infrastructure
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.