Slow TTFB at Cloudflare with Heroku server - heroku

I'm hosting my site at Heroku SaaS and something weird is happening with the Waterfall, to be specific the TTFB number.
When accessing the site through the Heroku dns, I get a excellent TTFB, ~200ms. But, accessing using the Cloudflare DNS, the TTFB is ~750ms, almost 4x the Heroku DNS.
My actual configuration, is just a redirect CNAME to heroku app (app.herokuapp.com) throughing the Cloudfare servers and a page rule to uses the Cloudflare SSL.
Ok, the problem can be at the heroku, or at the redirect CNAME. But is there a way to improve it or do some test to identify the real problem?

Related

Cloudflare file caches won’t be cleared even in ‘ON’ Development mode in DNS

I use Cloudflare as a DNS server for my website.
for example, I defined www.mydomain.com, landing.mydomain.com to point to a Google Cloud CDN storage bucket IP in which I serve my static landing files.
the problem is when I deploy a new version of my code on that bucket, even after time passes more than the cache TTL of that bucket, I see my old landing on my domains, specifically on my www subdomain.
when I use another DNS server like DNSimple, the problem resolves.
I think the problem is with the Cloudflare caching system.
I went to the Caching part of my domain’s configurations in the Cloudflare panel, purged entire caches, and set the Development mode “ON” and also set the “Always Online” part “OFF”.
but the problem remains.
I’d be very delighted If anybody could tell me what should I do to get rid of the cache!

How to implenent NameCheap DNS with Netlify and Heroku

So I want to host my front-end React app on Netlify and I want it to be at www.mydomainname.com.
I also want to host my back-end on Heroku and I want it to be at api.mydomainname.com.
The problem is that if I set NameCheap DNS settings to use NamCheapDNS I can point it to Heroku, but I can't find a way to point it to Netlify as well since Netlify tells me to set NameCheap DNS to Custom DNS and I should point it to Netlify DNS with dns1.p07.nsone.net from 1 to 4.
Is there a way to have front-end on Netlify and back-end on Heroku, or at the end I have to transfer my React front-end to Heroku as well? And would that use the extra dyno or not?
Thanks!
In the end, I added dns1.p04.nsone.net. as the NS Record for "www" host in the Advanced DNS tab under my domain name.
Belatedly,
You can add a CNAME in Netlify's DNS records that points to Heroku's DNS. It looks like this
Record Type=CNAME
Name=api
Value=asdfasfd.herokudns.com
TTL=(blank)

Is there a way to redirect CNAME www.mywebsite.com to https://www.mywebsite.com with ovh and heroku

I am hosting my nodejs app in heroku and my domain name is in OVH.
I managed to create a subdomain www and a CNAME record that points to my heroku app. It is working fine and SSL is also working fine from heroku.
I added a redirection from all subdomains to https://www.mywebsite.com and everything is working fine.
My problem is when i type www.mywebsite.com, there is no redirection and no SSL.
How can i redirect www.mywebsite.com to https://www.mywebsite.com ?
Thanks !
Unfortunately, No.
DNS maps domain names onto IP addresses, that is, it tells the client that example.com points to 12.34.56.78. HTTP vs. HTTPS is a matter of picking a port, and using the right protocol, and this is negotiated directly between client and server; DNS lookup has already happened before that.
If you want to redirect all plain-http traffic to https, you have to do it on the web server, not the DNS server.
In your situation, you could do this in node.js.
There tons of examples online for node's built-in http server or for frameworks like express. I'd recommend this solution.
But there are also solutions like Cloudflare.
They offer you a DNS Service and a proxy, which can handle such HTTP to HTTPS redirection and they even let you use their own SSL Certificate, so you don't need to buy (or let's encrypt) a SSL Certificate on your own, for example.

Reverse proxy same naked domain to different hosts

I'm managing the DNS of my domain with Cloudflare.
The marketing pages for are hosted with Netlify.
The main application is hosted with Heroku.
Is it possible with cloudflare + a naked domain (my-example.com) to have some paths being served by Netlify and other paths by Heroku?
Or am I forced to put one of the hosting services on a subdomain?
Disclaimer: I work for Netlify.
You can definitely do this without running your own server or paying anything extra.
Since Netlify already has a CDN, it's suboptimal to put cloudflare's CDN (activated with the 'orange cloud' in their settings) in front of Netlify's. Besides being inefficient, doing so breaks Netlify's atomic deploys and rollbacks and also slows down page service from our observations. It may work, but is not recommended. However, CloudFlare's DNS is quite performant and can be used without their CDN (turn off the 'orange cloud'). Their DNS works well with content hosted on Netlify's CDN.
Here's how to set things up to accomplish this via Netlify.
Deploy your static assets to a Netlify site at your main custom domain, let's say it's my-example.com. For testing purposes you can use the built-in sitename at Netlify (something-something-1234.netlify.com) instead of my-example.com. The below example redirects are "host agnostic" so will work with the Netlify hostname, Netlify deploy previews, AND the production hostname.
Find all the paths for your dynamic content - for this example, let's say it's /main/* and /app/* that are dynamic and your backend is hosted on Heroku.
Create proxy redirect rules to point to those paths. They could be hosted via CloudFlare's CDN to protect your API if you wanted to - Netlify proxying to CloudFlare-fronted sites on Heroku works fine. You could also choose just to proxy straight to Heroku which would be less complicated. Netlify has some DDoS protection built-in and is still "in front of" your Heroku app. Up to you.
Deploy those proxy rules and test.
Netlify's proxying (technically reverse proxying) can connect to whatever backend you'd like and does NOT show the URL to the visitor - it looks to them (URL bar in the browser, HTTPS connection) as though they are connected to my-example.com the whole time, but the content is returned from your backend (including HTTP status codes. This response is cached on Netlify's CDN if indicated by your Cache-Control: HTTP Header directives which the Heroku app sends. Note that CloudFlare WILL CHANGE your Cache-Control header in case you set it on content they proxy to! Netlify won't.)
Here's a common setup:
/main/* https://yourapp.herokuapp.com/main/:splat 200!
/app/* https://yourapp.herokuapp.com/main/:splat 200!
Note that if you deploy ANY assets under /main or /app to Netlify, they will be ignored due to the trailing ! on those rules. See https://www.netlify.com/docs/redirects/#note-on-shadowing for some more details about how that works and the alternatives (TL;DR: deploying some things like /main/logo.png on Netlify but nothing that Heroku should serve vs deploying ALL needed content for /main/* on Heroku).
Note that I suggest using identical paths on Netlify and Heroku (/main/*) rather than proxying to /somethingelse/* since it is easier to debug asset loading when paths match up. This isn't a requirement, though.
As mentioned in the comment, its possible using cloudflare enterprise service.
But you can do it with a simple nginx reverse proxy setup.
Have DNS resolve to nginx reverse proxy and based on the path, appropriately call the upstreams.
eg. example.com, and then direct queries for /path1 to 100.100.100.100 and for /path2 to 200.200.200.200

Heroku Cedar and nginx (gzip)

According to the comments in the accepted answer here Rails how to Gzip Javascript? (Heroku) and the official cedar documentation (http://devcenter.heroku.com/articles/http-routing#the_herokuappcom_http_stack):
Since requests to Cedar apps are made directly to the application server – not proxied through an HTTP server like nginx – any compression of responses must be done within your application. For Rack apps, this can be accomplished with the Rack::Deflater middleware. For gzipped static assets, make sure that Rack::Deflater is loaded before ActionDispatch::Static in your middleware stack.
However, as far as I can tell, my app is running on herokuapp.com (cedar) and, according to the heroku logs, is using nginx to serve data (which is great). I've also confirmed via the Content-Encoding HTTP header that it is gzipping data to the browser. According to the documentation, that is NOT supposed to happen on cedar. Am I missing something here?
You must be accessing these apps through a domain pointing to these IPs:
75.101.163.44
75.101.145.87
174.129.212.2
These are the apex faces and they are in front of both bamboo and cedar apps. Varnish is there for bamboo, but any request that goes through them ends up going through varnish too.
These faces are only for apex domains. If your app is under a subdomain such as www, it should be setup as a CNAME pointing to appname.herokuapp.com. When setup like that, requests will not go through varnish.
For more on Apex's and Heroku, see here: http://neilmiddleton.com/the-dangers-of-a-records-and-heroku/

Resources