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
Related
I purchased a domain (say, example.com) from Google and my Django application (say, mysite.herokuapp.com) runs on Heroku. The CNAME is set on Google to forward the http requests to the Django applicaiton on Heroku. Forwarding requests from http://mysite.example.com to mysite.herokuapp.com works just fine.
Recently, I need to introduce progressive-web-application to my application and it requires the https protocol, instead of http, that is, the URL now has to be https://mysite.example.com and it doesn't work for Google domains. I tried https://mysite.herokuapp.com and it works fine, which means Heroku already supports https. However, I tried (and also googled) for a long time without finding a solution.
So how do I set the Google domain to use https protocol?
The DNS answer from Google cannot contain the port or protocol (http vs. https), it just contains the hostname.
You need to add a redirect from http to https in the Heroku django app, see e.g. here for more instructions.
It's not Google you need to change, it's your Django configuration.
Set SECURE_SSL_REDIRECT to True, and enable the SecurityMiddleware in your app, and any requests should automatically be redirected from HTTP to HTTPS.
When switching to HTTPS you need to add certs to heroku and that process updates the host from "mysite.heroku.com" to something like "tokyo-2121.herokussl.com". You will need to update your DNS to serve HTTPS pages from the new SSL compliant heroku instance for both HTTP and HTTPS.
Here is a tutorial that outlines the process with Godaddy, it should be very similar or all DNS providers.
http://www.joshwright.com/tips/setup-a-godaddy-ssl-certificate-on-heroku
Just got a solution from one of Heroku's engineers:
1) Upgrade the Heroku app to a paid one (e.g., Hobby)
2) On the DNS provider's settings, set the DNS target to <app_name>.<domain>.herokudns.com (e.g., "mysite.example.com.herokudns.com")
3) Run $ heroku certs:auto:refresh -a <app_name> (e.g., $ heroku certs:auto:refresh -a mysite)
I'm not sure if this is the same problem that you ran into, but when forwarding from https://example.com to my wix subdomain https://learn.example.com, I got a "No resource with given identifier found" error in the browser. Forwarding from http://example.com to https://learn.example.com was working just fine.
I had to open Google Domains' advanced forwarding options for my forwarding rule and enable SSL forwarding, like so:
I have an application, let's call it derpshow, that consists of two repositories, one for the frontend and one for the backend.
I would like to deploy these using Heroku, and preferably on the same domain. I would also like to use pipelines for both parts separate, with a staging and production environment for each.
Is it possible to get both apps running on the same domain, so that the frontend can call the backend on /api/*? Another option would be to serve the backend on api.derpshow.com and the frontend on app.derpshow.com but that complicates security somewhat.
What are the best practices for this? The frontend is simply static files, so it could even be served from S3 or similar, but I still need the staging and production environments and automatic testing and so and so forth.
Any advice is greatly appreciated!
For what you are trying to you must use webserver for serving static content and provide access to container(gunicorn, tomcat, etc...) holding your app. Also this is best practice.
Asume your use nginx as webserver, because its easier to setup. nginx config file would look like this
# Server definition for project A
server {
listen 80;
server_name derpshow.com www.derpshow.com;
location / {
# Proxy to gUnicorn.
proxy_pass http://127.0.0.1:<projectA port>;
# etc...
}
}
# Server definition for project B
server {
listen 80;
server_name api.derpshow.com www.api.derpshow.com;
location / {
# Proxy to gUnicorn on a different port.
proxy_pass http://127.0.0.1:<projectBg port>;
allow 127.0.0.1;
deny all;
# etc...
}
}
And thats it.
OLD ANSWER: Try using nginx-buildpack it allows you to run NGINX in front of your app server on Heroku. Then you need to run your apps on different ports and setup one port to api.derpshow.com and other to app.derpshow.com, and then you can restrict calls to api.derpshow.com only from localhost.
Would just like to contribute what I recently did. I had a NodeJS w/ Express backend and a plain old Bootstrap/vanilla frontend (using just XMLHttpRequest to communicate). To connect these two, you can simply tell express to serve static files (i.e. serve requests to /index.html, /img/pic1.png) etc.
For example, to tell express to serve the assets in directory test_site1, simply do:
app.use(express.static('<any-directory>/test_site1'));
Many thanks to this post for the idea: https://www.fullstackreact.com/articles/deploying-a-react-app-with-a-server/
Note that all these answers appear to be variations of merging the code to be served by one monolith server.
Jozef's answer appears to be adding an entire nginx server on top of everything (both the frontend and backend) to reverse proxy requests.
My answer is about letting your backend server serve frontend requests; I am sure there is also a way to let the frontend server serve backend requests.
Currently I'm hosting a client application written in AngularJS on Google Cloud Storage using the configuration described here.
I like this configuration because it acts as a CDN and we don't have to use a dedicated machine to host the frontend files.
The problem is that Google Cloud doesn't support HTTPS for custom domain names, and we want to improve our security standards serving at least the login page on an https domain.
¿Is there anyway we can keep the static files hosted on Google Cloud/some other CDN for fast serving and use an https domain?
Update
For anyone interested, we finally migrated all our CDN with HTTPS requirements to Amazon S3 + CloudFront and it works like a charm.
While Google Cloud Storage does support HTTPS, it does not support HTTPS for custom domain names.
Although you've found a solution not connected with your original question, I'm answering in case someone gets here with the same question like I did.
Google Firebase link is an excellent way to serve websites (and apps) as it is automatically through SSL (https) and Google Edge servers (effectively CDN function). And https will work using your own domain name. You can push your site from your local machine (Node.js needed) or from GitHub, Gitlab, etc. using continuous integration/deploy.
There is a generous free trial plan to try it first, then a reasonable monthly rate to pay as you go as your usage grows. plans
I have a CDN for my website that uses Nginx and Drupal.
In my nginx configuration, I am trying to enable page level caching so requests like "website.com/page1" can be served from the CDN. Currently, I am only able to serve static files from the CDN(GET requests on 'website.com/sites/default/files/abc.png').
All page-level requests always hit the back-end web server.
What nginx config should I add in order for "website.com/page1" requests to also be served from the CDN?
Thanks!
If I understand you correctly, you want to setup another Nginx so that it works as a basic CDN in front of your current webserver (Nginx or Apache??) on which Drupal resides. You need to have a reverse proxy Nginx server to cache both static assets and pages. Since its not super clear to me what you wrote, this is what I assumed.
If you want a setup like this, then you should read the following article on how to setup reverse proxy
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/