Difference between Cloudflare CDN and NGINX

Question

I am reading but having hard time understand difference between the two. I am using Heroku for my apps and until now I was using NGINX to serve my content. I precompressed my static files to gzip and served them like that, turning off dynamic compression in NGINX config file.

Now I am learning about Cloudflare CDN. As I see it is also serving static content. Is there any point in using both NGINX and Cloudflare, what would be the benefits?

How does a flow of that goes when user visits the website?

Would it be:

End User -> Cloudflare DNS -> CDN -> NGINX -> Heroku

End User <- Cloudflare DNS <- CDN <- NGINX <- Heroku

Answer 1

Cloudflare does not serve static content itself. It only caches content originally served by some other server. You still need that other server -- known as your "origin server". You might still use nginx as your origin server. By putting Cloudflare in front of it, you can make your site faster and more secure, but Cloudflare does not replace your server.

Answer 2

From, How does Cloudflare work?:

The Short Answer, Cloudflare protects and accelerates any website online. Once your website is a part of the Cloudflare community, its web traffic is routed through our intelligent global network.

In terms of differences, you can't directly compare Nginx with a CDN (a group of services including Nginx), you can create a CDN using Nginx.