CloudFront with S3 and Private Rest API as origin

You can do the following

• Create VPC Endpoints for the private APi gateway.
• Update API gateway policy to only allow traffic from VPC Endpoint
• Create an internal NLB and the VPC endpoint's IP addresses as the target
• Create a VPC Origin group in CloudFront and use NLB's ARN as target
• Create CloudFront distribution to target to NLB using VPC origin.

When setting up CloudFront with a private REST API as an origin, there are a few approaches you can take to ensure secure access while maintaining functionality.

For an S3 bucket with CloudFront, the recommended approach is to use a REST API endpoint as the origin with Origin Access Control (OAC). This allows you to keep your S3 bucket private while CloudFront can still access it. With OAC, you would:

1. Create an Origin Access Control in the CloudFront console
2. Configure your CloudFront distribution to use the S3 REST API endpoint (e.g., your-bucket-name.s3.amazonaws.com)
3. Update your S3 bucket policy to only allow access from your CloudFront distribution

For your private REST API with a custom domain, you would need to set it up as a custom origin in CloudFront. Since the API is private, you'll need to establish a secure connection between CloudFront and your API. This typically involves:

1. Setting up a VPC endpoint for your API Gateway
2. Configuring CloudFront to use your custom domain as the origin
3. Implementing proper authentication between CloudFront and your API (such as using custom headers or Lambda@Edge)

For your React application to access this API through CloudFront, you would configure your application to make API calls to the CloudFront distribution domain or your custom domain that points to the CloudFront distribution. CloudFront will then securely forward these requests to your private API.

Remember that CloudFront can work with private origins, but you need to ensure proper authentication and access control between CloudFront and your origin. This way, your React application can access the API through CloudFront while the actual API remains private and secure.
Sources
Use a REST API endpoint as an S3 origin, and restrict access with an OAC | AWS re:Post
Can we use CloudFront with S3 buckets stored in private VPCs? | AWS re:Post
Cloudfront with other provider S3 | AWS re:Post
CloudFront + S3 Static Hosting .. Use Website Endpoint OR REST API with OAC | AWS re:Post