Configuring static website using CloudFront Origin access Control (OAC)

If you ever deployed static web hosting using S3 and CloudFront, you were limited to Origin access identity. By creating an S3 origin you were limited to either make your bucket publicly available or use Origin access identity (OAI) which was more secure by adding a bucket policy with your CloudFront OAI origin. By Using OAI users could access the bucket only through CloudFront. in other words OAI was the only option to use authentication for accessing the bucket.

With the new feature of the CloudFront AWS recommends using Origin Access Control (OAC) because of three new features:

• All Amazon S3 buckets in all AWS Regions
• Amazon S3 server-side encryption with AWS KMS (SSE-KMS)
• Dynamic requests (POST, PUT, etc.) to Amazon S3

If you compare OAI with OAC from policy perspective, what you might see is that using OAI we didn’t have the CloudFront as the service. It was the OAI as principal which was allowed using it’s ARN.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipalReadOnly",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::111122223333:distribution/EDFDVBD6EXAMPLE"
                }
            }
        },
        {
            "Sid": "AllowLegacyOAIReadOnly",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EH1HDMB1FH2TC"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::DOC-EXAMPLE-BUCKET/*"
        }
    ]
}

Let’s configure static web hosting using AWS S3 and CloudFront OAC. There are two phases crating S3 bucket and configuring the policy and creating cloudfront distribution and configuring OAC.

1. Creating S3 bucket :
   Create a bucket with your preferred name and make the ACL enabled. Upload an index.html file to root of your bucket.

2. Create a CloudFront distribution:

use your s3 bucket name as origin domain and select origin access control settings.

Then create a control settings with sign requests.

In the bucket policy section you might see this error ignore it and create your distribution.

Go to the origin tab and edit the origin you created. here you see the copy policy button. copy that and from the s3bucket permission link go to your bucket policy.

paste the policy and save your changes.

There is one step left get back to your CloudFront distribution and go to error pages tab. hit on create a custom error page and add the following changes. this is a little bit challenging. because the CloudFront doesn’t know about the file it should be looking for.

You must wait until the deploying part goes away. you can use distribution name to access your static website.