awslabs / awslabs/aws-solutions-constructs
aws-cloudfront-s3 - support for s3 websites
- 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
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