I have multiple netlify static sites that I want to serve in their entirety under a path of a cloudfront domain. However, resources that don't reside at the root of the netlify app are not being served (raise a 404)
i.e.
https://netlify1-abcd123.netlify.app/
- /
- /page1
- /page1/subpage1
- /page2
- /images/logo.png
- /stylesheets/styles.css
https://netlify2-defg456.netlify.app/
- /
- /netlify2-page1
- /netlify2-page1/subpage1
- /netlify2-page2
- /netlify2-images/logo.png
- /netlify2-stylesheets/styles.css
and I want these to be served under www.mydomain.com/netflify1 and www.mydomain.com/netlify2. The root of www.mydomain.com is currently served via an S3 static site.
I have configured rewrite rules in netlify.toml for each site (changing as appropriate to netlify2) as below:
[[redirects]]
from = "/netlify1/*"
to = "https://netlify1-abcd123.netlify.app/:splat"
status = 200
force = true
...and then added an Origin to Cloudfront which has the Origin Domain Name of https://netlify1-abcd123.netlify.app/ - all other Origin settings are the defaults.
I've then configured a Behaviour with a Path Pattern netlify1 that points to the netlify1 origin. Note that I cannot use the Default behaviour as the main index of www.mydomain.com is served via a static site hosted on S3.
This all works perfectly fine when serving the root / of my netlify app. I can navigate to www.mydomain.com/netlify1 and see the home page of my netlify app. However, anything that is not on the / of netlify doesn't get served.
I can see from the developer tools that a request is being made to www.mydomain.com/images/logo.png and www.mydomain.com/stylesheets/styles.css when trying to load the images and the styles. This returns a 404 because (I presume) they are not getting picked up by any Cloudfront Behaviour or Netlify rewrite rules.
So my question is. How can I make images, stylesheets and any page not on the root of the netlify apps work correctly? I can make it work by manually added every single potential path as a Behaviour on Cloudfront (i.e. configure a Behaviour with a Path Pattern of /images/* to point to the netlify1 Origin) - but that doesn't seem scalable or even correct.
I don't know whether I need to somehow rewrite all my URLs on the netlify app during building so that they become /netlify1/images and /netlify/page1 rather than /images and /page1 (the netlify apps are docs built with Sphinx docs), or whether this is something that needs to be handled via a Rewrite Rule in Lambda@Edge. I'm completely stumped.
