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.
Related
I'm hosting a static (NextJS) site on a GCP bucket, with my domain CNAME (let's say example.com) pointing to GCP. When Javascript is disabled, NextJS links in my generated content point to URLs like:
Page 1
but the actual file stored in the bucket is:
pages/1.html
which generates a 404 error when Javascript is disabled and <Link> doesn't capture the click.
I'm aware of the specialty page option MainPageSuffix in GCP, but I have it set as index.html and I don't think it can be set to rewrite someaddress to someaddress.html (and even if it could, it would not serve my root index.html corrctly when I point my browser to example.com)
I'm also aware of the as option in NextJS, but if I use it like:
<Link
href={`/pages/1`}
as={`/pages/1.html`}
>
it will not work when Javascript is enabled and I'm serving the site locally with npm run dev (I suppose it confuses <Link>?).
Is there any way to make this work? I'm using Next.js v13.0.7
(Alternatively, is there any other (free tier) option to host my site? I thought I could use Cloudflare Pages, but my static site has a lot of small pages - in the order of 100k - and Pages has a file limit of 20k)
I followed this tutorial on how to host server side generated sites on Google Cloud Buckets. The issue I am having is that the nuxt app works fine when routing internally, but when I reload a route, the site is redirected to whatever route plus a /index.html at the end.
This causes things to break, as it conflicts with Nuxt routing. I set index to be my entry point ala
gsutil web set -m index.html -e 404.html gs://my-static-assets
but it seems to assume that to be the case always. I don't have this problem using Netlify.
According to the tutorial that you're doing, you're redirected to /route/index.html because of your MainPageSuffix index, this means that when you try to access for example https://example.com/route the service look for the target https:// example.com/route/index.html.
To fix this I suggest that you include an index.html file under the subdirectory in the subdirectory of the route.
I recommend, for further info on this to check this post which has a similar issue.
NOTE: I'm providing details of my setup, but really this is a "how is this possible" question, not a "please debug my setup" question.
I have a "singe page application" (ie. an HTML file that uses the History API to simulate URLs). I'm serving this app on AWS S3, behind an AWS Cloudfront ... front.
I had successfully configured things so that if someone went to www.example.com/foo (let's pretend I own example.com), Cloudfront would serve an "error page" of my index.html. My index.html would then see the URL, and use its routing to show the user the correct page.
That all worked great ... until it didn't. Now for some reason when I go to www.example.com/foo, I get redirected to www.example.com. I'm trying to debug things, but what I can't understand is how I'm going from /foo to the main page.
When I look in the Network panel of my developer tools, I can see the request made to the original (/foo). Then I can see the chain of requests (for images, css files, etc.), and they all have a referrer of www.example.com/foo.
Then all of the sudden I see a request for React Developer tools (why it needs to make a request is beyond me) ... and it's from referrer www.example.com. After that I get one last image request from /foo, and then all subsequent requests come from www.example.com.
Can anyone explain how this could be working? I know that if a server returns a redirect (either type) that could change my URL ... but every request has a 200 status (ie. no server redirects).
I know Javascript could "push" a new URL to my browser ... but that would leave a history entry right? When I go "back" (either with my browser or history.back()) I go to the page before; I don't go "back" to /foo.
So somehow I'm not making a history entry, but I am switching my URL, and the URL I make requests from, and this all happens within milliseconds on page load ... without any redirects. How?
P.S. When I use my dev tools to add an beforeunload breakpoint, then try to navigate from example.com to example.com/foo I don't hit that break point (either for going to /foo, or when I'm "redirected" back to example.com).
When I check the box for any Load event, I do see some happen ... after my URL has already switched. In other words, I type example.com/foo, hit enter, and by the time any event fires I'm back on example.com. Whatever mechanism is doing the "redirection" here ... it doesn't trigger any load events.
I figured out my (AWS-specific) problem, thanks to a bit of Gatsby documentation. I'll include the details below in case it helps others, but I won't accept this answer, as I still don't understand how AWS did what it did (and I'd still welcome an answer for that).
What happened was that I had my Cloudfront "Origin Domain Name and Path" pointing to:
example.com.s3.amazonaws.com
However, as explained on https://www.gatsbyjs.com/docs/deploying-to-s3-cloudfront/:
There are two ways that you can connect CloudFront to an S3 origin. The most obvious way, which the AWS Console will suggest, is to type the bucket name in the Origin Domain Name field. This sets up an S3 origin, and allows you to configure CloudFront to use IAM to access your bucket. Unfortunately, it also makes it impossible to perform serverside (301/302) redirects, and it also means that directory indexes (having index.html be served when someone tries to access a directory) will only work in the root directory. You might not initially notice these issues, because Gatsby’s clientside JavaScript compensates for the latter and plugins such as gatsby-plugin-meta-redirect can compensate for the former. But just because you can’t see these issues, doesn’t mean they won’t affect search engines.
In order for all the features of your site to work correctly, you must instead use your S3 bucket’s Static Website Hosting Endpoint as the CloudFront origin. This does (sadly) mean that your bucket will have to be configured for public-read, because when CloudFront is using an S3 Static Website Hosting Endpoint address as the Origin, it’s incapable of authenticating via IAM.
Once I changed my Cloudfront "Origin Domain Name and Path" to the bucket's static hosting URL:
http://example.com.s3-website-us-west-1.amazonaws.com
Everything worked!
But again, I still don't understand how AWS did what it did when I mis-set my "Origin Domain Name and Path". It redirected me to my root domain, seemingly without either a redirect response OR a client-side redirect, and I'd love to hear how that was accomplished.
Let's assume I own the domain:
foobar.com/
I want to use Netlify for my static pages like
foobar.com/features/
foobar.com/pricing/
foobar.com/imprint/
etc.
But I also have a Django application on a seperate server on AWS that has nothing to do with the static sites served by Netlify.
My Django has urls like
foobar.com/login/
foobar.com/dashboard/
etc.
Is it possible to use Netlify for a few static pages and my Django application for other pages?
I don't know how start or if this is event possible.
It will depend on how your Django apps handle the target, but you could use rewrites on Netlify using the HTTP status code 200 with a redirect rule (rewrite).
If the API supports standard HTTP caching mechanisms like Etags or Last-Modified headers, the responses will even get cached by CDN nodes.
Have DNS set foobar.com to the Netlify site.
Decide the domain for the Django site on AWS. (proxy.foobar.com)
Setup _redirects at the root of the Netlify site to use Proxy (rewrites) on Netlify
/login/* https://proxy.foobar.com/login/:splat 200
/dashboard/* https://proxy.foobar.com/dashboard/:splat 200
Note: This is how you can incrementally switch a site over to Netlify without having to refactor a site all at once.
When you set a DNS record (e.g. an A record), you can point foobar.com to your AWS server or netlify, but not both.
Perhaps you can put the sites on different domains, for example dashboard.foobar.com for your Django site.
You could then configure netlify to redirect foobar.com/dashboard/ to dashboard.foobar.com/dashboard/
No, you can't have a foobar.com point to two different servers. You'll have to use subdomains, e.g.:
static.foobar.com -> DNS entry for Netlify
app.foobar.com -> DNS entry for your Django server
or, what you often see, is:
foobar.com and www.foobar.com -> DNS pointing to your main website (Netlify)
api.foobar.com and app.foobar.com -> DNS pointing to your Django app
I'm trying to set a cookieless subdomain to serve static content of my wordpress website. So I've tried self-hosted CDN solutions using WP SuperCache or W3 Total Cache plugin.
My wordpress is on the domain aljazair24.com and my CDN domain is static1.aljazair24.com. The domain and subdomain point to the same apache directory (/home/username/public_html).
Although WP SuperCache and W3TC plugins allow to set cookie domain to aljazair24.com, the subdomain static1.aljazair24.com still sends cookies to browsers...
I've tried to set cookie domain to www.aljazair24.com in order to avoid this but it doesn't work, since all www urls are redirected to non-www ones...
I was desperately looking for any WP plugin allowing to make "real" mirror resources, all this in order to avoid any interference at htaccess level. Unfortunately I didn't find anything ...
What should I do to make subdomain static1.aljazair24.com cookie-free ?
Page speed tests using YSlow
Grade F on Use cookie-free domains
There are 82 components that are not cookie-free
http://static1.aljazair24.com/wp-content/plugins/ajax-load-more/core/js/ajax-load-more.min.js
http://static1.aljazair24.com/wp-content/themes/aljazair/inc/js/flexslider.min.js
http://static1.aljazair24.com/wp-content/plugins/wysija-newsletters/js/validate/languages/jquery.validationEngine-ar.js
http://static1.aljazair24.com/wp-content/plugins/wysija-newsletters/js/front-subscribers.js
...
Have you tried Cloudflare? Most hosting providers have a built in extension and you dont have go through plugins like WP SuperCache or W3 Total Cache.