Unable to point s3 bucket to Cloudfront Error Page

Question

We have an SPA(Single page app) deployed in s3 bucket. Currently every route except the base route returns 404 from cloudfront. To solve this, we tried tweaking the error page configuration in Cloudfront distribution by setting the error page as "index.html" and returning 200 OK response status. 
But the "index.html" it gets pointed to is that of the ALB (the base bucket) and not to the desired s3 bucket. We want to point to "my-s3-bucket/index.html".
Our application is designed in a way that each Cloudfront behavior points to a separate app in s3 bucket. Our Cloudfront behaviour is /logistics/* which points to my-s3-bucket

Is there a way we can point the index.html to the desired s3 bucket?

Answer

Try this:
    -Go to the CloudFront distribution.
   - Navigate to the ‘Origins’ tab and create a new origin pointing to `my-s3-bucket`.
   -Go to the ‘Behaviors’ tab and create a new behavior (or modify the existing one for `/logistics/*`) to point to the origin you created for `my-s3-bucket`.
- Navigate to the ‘Error Pages’ tab.
   - Click on ‘Create Custom Error Response’.
   - For HTTP error code, choose 404.
   - For Customize Error Response, choose Yes.
   - For Response Page Path, input `/index.html`.
   - For HTTP Response Code, choose 200: OK.
   - Make sure this custom error response is associated with the `/logistics/*` behavior.
By setting it up this way, when CloudFront encounters a 404 for a path under `/logistics/*`, it should serve the `index.html` from `my-s3-bucket`, and the SPA's router can then handle the route client-side.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html

Unable to point s3 bucket to Cloudfront Error Page

관련 콘텐츠