Yes best practice is to use OAI with CloudFront with origin 'S3 Static Bucket website'. If you are using CloudFront/Distribution API you must disable s3 bucket/Properties/Static Website Hosting. And configure CloudFront/Default Root object e.g. index.html to make it work.
You can also use CloudFront/CloudFrontWebDistribution API which allows you to use OAI for CloudFront which accesses an S3 bucket website with static website hosting enabled. An old API for CloudFront Distribution.
With Distribution API if you configure OAI and also have your s3 bucket enabled with 'Static Website Hosting', it will not work (meaning CloudFront will not be able to access origin).
Distribution is new & has easy Interface as compare to CloudFrontWebDistribution. Also Distribution receives new features faster. That's why it is recommended to use Distribution class.
Hope this helps.
The short answer is, if you want to use OAI, you can't have "static hosting" enabled on your bucket.
That second link you posted is confusing, but pay attention to the differences in the two setups. One bucket has static hosting enabled but not OAI in Cloudfront. The other one has OAI enabled in Cloudfront but it's just re-directing to the other bucket (no static hosting enabled).
It is advised to use OAI to secure your bucket content behind CloudFront, however, there is some confusion that arises, when going from an S3 static website to CloudFront with OAI.
Firstly, there are 2 different types of S3 endpoints.
- Static website endpoints - bucketname.s3-website-region.amazonaws.com
- S3 bucket endpoints - bucketname.s3-region.amazonaws.com
When using a Static Website endpoint with CloudFront, you still need to have the open bucket policy, as CloudFront needs access to your objects. When configuring CloudFront origin, and you use the S3 static website URL in the Origin, it will show as a Custom Origin.
When using the S3 bucket endpoint, this will be an S3 Origin type. This is the recommended way, and then use OAI and allow CloudFront to update your bucket policy. Please note that CloudFront will not delete your existing policy, simply add access for the OAI. I would recommend to remove your current bucket policy before you configure CloudFront OAI.
You can also use this template to setup CloudFront+S3+SSL. https://gist.github.com/jonoirwinrsa/ceb2cba3d104720320f30e06b8c821f8
Adding OAI to CloudFront after the distribution is createdasked 9 months ago
Serve web static pages stored in S3 bucket from Eks clusterasked 2 months ago
Cloudfront X S3 website + secondary bucket for specific mediaAccepted Answerasked 2 months ago
OAI or not OAI for serving a static website in S3 using CloudFrontasked 6 months ago
Is it correct that the original domain doesn't use OAI on the cloud front?Accepted Answer
Static website in S3 not working with HTTPSasked 2 years ago
S3 static website domain not workingasked 2 months ago
Serving static site through CloudFrontAccepted Answerasked 3 months ago
Why doesn't react's BrowserRouter work on cloudfront when s3 oai settings are applied?
S3 Static Website RoutingRules when using Cloudfront and a domain nameasked 3 years ago