Serve multiple buckets via a single CloudFront Distribution

Question

I have a bucket called mymainapp-content that hosts a static frontend app content.  It is distributed via Cloud Front with a custom domain name mymainapp.example.org.  I have created another app and let's call it app1 and the app is hosted in another s3 bucket called app1-content.  I have added a new origin to point to the app1-content s3 bucket and a cached behavior with the path pattern "/app1/*" with the origin.

I have a cloud front distribution A1B2C3DEFGH1JK. It is mapped to mymainapp.example.com. Origin source is s3 bucket "mymainapp-content."  Error pages are configured to redirect them to index.html.

I would like to serve another small app off of mymainapp.example.com/app1 coming from another bucket app1-content.
I performed the following steps:

1) Added a New Origin to the CloudFront Distribution with new Origin Access Control (OAC) for secure access.
2) Added a New Behavior with the path pattern, "/app1/*" using the New Origin from above step.
3) Update the s3 bucket policy to give access to the CloudFront Distribution.

When I go to https://mymainapp.example.com/app1/index.html and/or https://mymainapp.example.com/app1/home.html,  it serves the index.html from the original bucket, i.e. "mymainapp-content."
I believe it is because for some reason I was getting access denied and since the Error pages are configured to serve the index.html from the original origin.

Riku_Kobayashi · Accepted Answer

Hello.

What is the folder structure of S3?  
When you access "https://mymainapp.example.com/app1/index.html", a request is sent to "app1/index.html" in S3.  
In other words, if the file is not located in "app1/index.html" of app1-content, an error will occur and you will not be able to access it.  
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesOriginPath  
> If you want CloudFront to request your content from a directory in your origin, enter the directory path, beginning with a slash (/). CloudFront appends the directory path to the value of Origin domain, for example, cf-origin.example.com/production/images. Do not add a slash (/) at the end of the path.  
> For example, suppose you’ve specified the following values for your distribution:  
> * Origin domain – An Amazon S3 bucket named amzn-s3-demo-bucket  
> * Origin path – /production  
> * Alternate domain names (CNAME) – example.com
> 
> When a user enters example.com/index.html in a browser, CloudFront sends a request to Amazon S3 for amzn-s3-demo-bucket/production/index.html.  
> 
> When a user enters example.com/acme/index.html in a browser, CloudFront sends a request to Amazon S3 for amzn-s3-demo-bucket/production/acme/index.html.

re:Post Agent · Answer

The issue you're experiencing is likely due to a combination of factors, including the error page configuration and potentially the order of your cache behaviors. Here are some steps to troubleshoot and resolve the problem:

1. Check the order of your cache behaviors: Ensure that the new behavior for "/app1/*" is listed before the default (*) behavior in your CloudFront distribution settings. CloudFront evaluates behaviors in order, so if a more general pattern comes first, it may override your specific "/app1/*" behavior.

2. Verify the Origin Access Control (OAC) settings: Make sure the OAC for the new origin (app1-content bucket) is correctly configured and associated with the distribution.

3. Double-check the S3 bucket policy: Ensure that the policy for the app1-content bucket correctly grants access to the CloudFront distribution. The policy should include the specific ARN of your CloudFront distribution.

4. Review the error page configuration: While redirecting errors to index.html can be useful for single-page applications, it may interfere with serving content from multiple origins. Consider modifying the error page configuration to be more specific or removing it temporarily for testing.

5. Check CloudFront logs: Enable logging for your CloudFront distribution if not already done, and review the logs to see if there are any access denied errors or other issues when accessing the /app1/* path.

6. Verify the path pattern: Ensure that the path pattern "/app1/*" is correctly entered in the behavior settings and matches the structure of your app1-content bucket.

7. Clear CloudFront cache: After making changes, you may need to invalidate the CloudFront cache to ensure the new settings take effect immediately.

If after checking these points the issue persists, you might want to consider using Lambda@Edge or CloudFront Functions to have more granular control over request routing between your origins.

Remember that changes to CloudFront distributions can take some time to propagate, so allow some time after making changes before testing again.
      
**Sources**  
[How can I connect multiple s3 static apps to one Cloudfront and direct traffic to the different s3 based on path | AWS re:Post](https://repost.aws/questions/QUa1KLMUHFSUijX0jyMtoH3Q/how-can-i-connect-multiple-s3-static-apps-to-one-cloudfront-and-direct-traffic-to-the-different-s3-based-on-path)  
[Add, remove, or replace content that CloudFront distributes - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/AddRemoveReplaceObjects.html)  
[cloudfront distribution with several origins | AWS re:Post](https://repost.aws/questions/QUI8aHBR4cSB6PtVUpmJSLnw/cloudfront-distribution-with-several-origins)

Serve multiple buckets via a single CloudFront Distribution

Add your answer

Relevant content