AWS S3 Static Website Hosting using OAC
Overview
This article explains how to utilize AWS S3 Website Hosting using OAC (Origin Access Control) to host a static website with S3 and Cloudfront. OAC provides additional features and better security compared with the other available options such as OAI.
The process involves:
a. Creating an S3 bucket and uploading the static HTML files.
b. Creating a Cloudfront distribution using OAC.
c. Modifying the S4 bucket policy with the Cloudfront recommended policies.
Instructions
Create a globally unique AWS S3 bucket.
And then click Create bucket.
Then click on the bucket so that you can upload the static web files.
You can simply drop the files and click on Upload. If you would like to test with a sample website, you can download a site from HTML5UP, see the URL in the References section.
Once the upload of the files completes, then navigate to the AWS Cloudfront service, you can simply search for it.
Note: As you may have noticed, there was no need to configure the bucket for Public Access or select the option for Static Web site.
Then select the S3 bucket under Origin domain, select the Origin access control settings and then click on Create control setting.
You can simply leave the defaults as shown, or you may change the name or add a description, then click Create.
You will notice that Cloudfront warns you that the S3 bucket policy will need to be updated, but Cloudfront will provide the complete policy that you can use to edit the S3 bucket policy.
Note: Be advised that if you have customized the S3 bucket policy, you will need to manually edit the existing S3 bucket policy and not just simply overwrite. The Cloudfront provided one, provides only the entries required by Cloudfront.
Scroll to the bottom and enter index.html or the appropriate default object depending on the type of static web file, for example instead of index.html it could be index.htm or some other object. Then click Create distribution.
Cloudfront will start deploying your static web site to the edges and will provide you with the URL.
It will also display the policy to be used on the Permissions of the S3 bucket.
Click on Copy policy, then click on the Go to S3 bucket permissions to update policy.
Click Edit.
Paste the policy and Save Changes.
Back on the Cloudfront, you can copy the URL and try to navigate to it to verify successful deployment, once the deployment has completed. (See the Last modified timestamp).
References
Amazon CloudFront introduces Origin Access Control (OAC)
Sample Static Websites for Testing