Host a website with AWS S3 and CloudFront

S3 for the files, CloudFront for an HTTPS front end (S3 doesn't do HTTPS). Using Namecheap for DNS. Example site for this gist is named "www.example.com".

Create an S3 bucket

Go to S3 and Create bucket.

Name (www.example.com) bucket, choose region, and accept the defaults.

Upload files and folders

Use GUI or AWS CLI to copy files and folders to bucket.

Enable static website hosting

S3... Buckets... bucketname... Properties... Static website hosting: Enabled.

Set Index and Error documents.

Set permissions

S3... Buckets... bucketname... Permissions...

Block public access: Off

Bucket policy:

{
    "Version": "2008-10-17",
    "Id": "Allow everyone read",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*"
        }
    ]
}

This policy allows everyone read access to the bucket contents.

Request an SSL certificate through ACM

Go to AWS Certificate Manager and request SSL certificate. Update DNS for domain with registrar as necessary (ACM will request creation of a new CNAME and value to verify your control over domain).

Create a CloudFront distribution

Go to CloudFront and Create distribution.

Origin domain

Chooose your S3 bucket URL, "www.example.com.s3.us-east-1.amazonaws.com".

Origin path

Leave blank

Name

"www.example.com.s3.us-east-1.amazonaws.com"

S3 bucket access

Don't use OAI (Origin Access Identity)

Add custom header

None.

Enable Origin Shield

No.

Restricting access to the S3 bucket

Often you'll want to prevent visitors from going directly to your S3 bucket URL. To do that you must use OAI (Origin Access Identity).

I usually start out without OAI and reconfigure to use it once everything is working. At that point I'll edit the CloudFront distribution and change to Yes, use OAI, create a new OAI and select it, as well as Yes, update the bucket policy.

If you already have a bucket policy in place, CloudFront will append the new policy to it. To remove access for everyone, go to the S3 bucket Permissions tab and remove the existing Sid 1, renaming the new Policy to Sid 1 and changing the Id to something descriptive, like "Allow only CloudFront". What you have left should look something like this (the Origin Access Identity name will end in a 14 character string corresponding to the CloudFront distribution name):

{
    "Version": "2008-10-17",
    "Id": "Allow only CloudFront",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.example.com/*"
        }
    ]
}

Settings

Price class

Use only North America and Europe

AWS WAF web ACL

Alternate domain name (CNAME)

Custom SSL certificate

Select from ACM.

DNS Configuration

Get the your CloudFront distribution FDQN from AWS. It will be in the column labelled "Domain" and look like:

d3chhvo87ywoz5.cloudfront.net

Go to your domain registrar's configurstion for your domain (example.com), create a CNAME record for www, and add the CloudFront distribution's FDQN as the value (intitially set the TTL to something short for testing, later increase to 30 minutes):

Type	Host	Value	TTL
CNAME	www	d3chhvo87ywoz5.cloudfront.net	5

References

"Hosting a static website using Amazon S3". AWS Simple Storage Service (S3) User Guide, https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html?p=gsrc&c=ho_hsw&refid=gs_card/

"How do I use CloudFront to serve HTTPS requests for my Amazon S3 bucket?". AWS Knowledge Center, Last Updated 25 February 2022, https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-https-requests-s3.

"Restricting access to Amazon S3 content by using an origin access identity (OAI)". AWS CloudFront Developer Guide, https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html.

For the big(ger) picture:

"Getting Started with Amazon CloudFront". AWS CloudFront, https://aws.amazon.com/cloudfront/getting-started/.

plembo/hostwiths3andcloudfront.md