Not working: 2 static websites, 2 origins, 1 CloudFront distribution


I have a CloudFront distribution that works fine with a single (primary) origin pointed to a static website hosted in S3. I then added a secondary origin with the same characteristics (static website hosted in S3) via a sub-path, and specified the precedence via the Behaviors to come first. In other words, I'd like requests to "/path" to go to my secondary static website and requests to "/" to go to the primary static website.

No matter what I do it doesn't seem to work. It's going directly to the secondary website even if my path is "/".

  • Precedence rule 0: Path pattern /path/* - origin is secondary
  • Precedence rule 1: Default (*) - origin is primary
asked 9 months ago257 views
2 Answers

Try changing the path pattern to "path/*".
Perhaps the "/" at the beginning of the "/" is used to route to secondary when accessing with "/".
Also, the secondary S3 directory structure should be such that the contents are placed under "path/".
CloudFront does not ignore paths that match the path set in the Path Pattern when they are sent to Origin, but includes the path in the Path Pattern.
Therefore, if there is no content under "path/" in the secondary S3, an error will occur.

profile picture
answered 9 months ago

Thanks. I didn't need to remove the "/" in front of "/path/*".

Instead, there were 2 things I had to do:

  1. The secondary website had to have the website deployed to a "/path" subfolder inside the bucket. In my case, my website was a React app. To use the new path and ensure all referencing paths were set properly, I had to add this to my package.json: "homepage": ""
  2. When referencing the secondary website, I had to add the trailing slash This didn't work:
answered 9 months ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions