💾 Archived View for wilw.capsule.town › notes › s3_cloudfront.gmi captured on 2024-05-10 at 11:01:57. Gemini links have been rewritten to link to archived content
-=-=-=-=-=-=-
The tempting approach is just to use a publicly accessible bucket in "website mode" for a website (since the website itself will also be public), and then use Cloudfront with the bucket's website URL as the origin, but this feels lazy. Instead, use a private bucket and Cloudfront with OAC [1] to securely access and serve content from the private bucket.
First, set up a bucket policy for the bucket, referencing the AWS account ID and preferred Cloudfront distribution ID (the below comes directly from the link above):
{
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontServicePrincipalReadOnly",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<S3 bucket name>/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::<AWS account ID>:distribution/<CloudFront distribution ID>"
}
}
}
}
(Be sure to replace `<S3 bucket name>`, `<AWS account ID>`, and `<CloudFront distribution ID>` with the appropriate values.)
In the Cloudfront distribution, make sure your origin references the bucket itself, and NOT the website URL (e.g. it'll be of the form `BUCKET_NAME.s3.REGION.amazonaws.com`).
In the "Origin Access" section select "Origin access control settings" and then click the "Create new OAC" button. Accept the defaults (i.e. "Sign requests") and then create it.
If you're hosting an SPA (and want to route all requests through to your `/index.html`), also do the following.
In the Cloudfront distribution, go to the "Error pages" tab and add a new error page with the following settings:
- HTTP error code: 403 (Forbidden)
- Customize error response: Yes
- Response page path: /index.html
- HTTP response code: 200