Why You Should Put a CDN Like Cloudflare in Front of Firebase

October 22, 2021

There are three good reasons you should consider putting a CDN like Cloudflare in front of Firebase

Firebase is an amazing comprehensive platform that takes care of a lot of your infrastructure needs without you needing to lift a finger. It even comes with its own CDN (content delivery network) that servers up your static content from edge servers. This means your content will theoretically load nice and fast for your users since it is on servers closer to them.

However, I’m a big fan of putting Cloudflare (or another CDN provider of your choice like Fastly) in front of Firebase, especially because most the functionality you need is free.

Note: I have no association with Cloudflare, just a user.

Why use Cloudflare with Firebase?

At first glance you might think, “why make things more complicated, especially since Firebase already comes with a CDN?” Fair point, but there are three reasons why I think it makes sense to insert Cloudflare in front of Firebase:

  1. Security & Protection
  2. Cost Savings & Prevention
  3. Speed

Security & Protection

While Firebase does have a CDN, it doesn’t offer you distributed denial of service attacks (DDoS) prevention, web application firewall (WAF), or rate-limiting. All of these are incredibly important to prevent malicious actors from breaking your system or stealing your data.

And if you don’t stop someone at your CDN, your Firebase costs could skyrocket.

Cost Savings & Prevention

Have your heard about the infamous 7000% increase in Firebase costs? If you are on the Blaze Plan, you will pay-as-you-go. If you don’t carefully monitor your costs, you might get an unwelcome bill at the end of the month.

For example, you will pay $0.15 per GB transferred from hosting over your free 10 GB monthly limit. By having a CDN like Cloudflare in front of Firebase, you’ll rarely hit your Firebase hosting server, thus reducing your potential charges.

And going back to Security & Protection, if a bad actor does a DDoS attack, you’ll stop them at Cloudflare and not start racking up charges.

Speed

This one might surprise you since why would Cloudflare be any after than Firebase’s CDN. Truth is, they are probably equivalent. However, Cloudflare offers several speed enhancements I’ve found valuable.

  1. Brotli Compression: Speed up page load times for your user’s HTTPS traffic by applying Brotli compression (a slightly better compression technique).
  2. Optimize Delivery: Rocket Loader — free and improves paint time especially for pages with Javascript, Railgun — requires paid business plan and gives faster dynamic content delivery, Control of Caching — free and you can set how long your content will be cached for.
  3. Argo Routing: Argo is a service that uses optimized routes across the Cloudflare network to deliver responses to your users more quickly, reliably, and securely. It costs me about $5/month and my test have shown a 25% load time improvement.

Overall, it takes about 10 minutes to set up a CDN in front of Firebase and I’ve found it well worth the effort.

How to Setup Firebase Hosting with Cloudflare

Setting up Firebase hosting to use Cloudflare is pretty simple.

  1. Go to Cloudflare and add your website. You’ll need to update your domain registrar to point to Cloudflare so the DNS entries can be managed.
  2. In the Firebase console go to Hosting and click the “Add Custom Domain” button. You’ll enter your domain or subdomain and be given an IP address to add as a DNS entry in Cloudflare.
  3. Head back to Cloudflare and under the DNS section add the DNS A record with the IP address Firebase provided: “Add these A records to your domain by visiting your DNS provider or registrar. Your site will show a security certificate warning for a few hours, until the certificate has been provisioned.” You can leave the Cloudflare “Proxy” on so traffic routes through Cloudflare.
  4. Wait a few hours for all the changes to propagate.

Note: The Firebase console will always show the status as “Needs setup”, but don’t worry…everything will still work.

Update on Cloudflare with Cloud Storage

Since publishing the article several questions have been asked about putting Cloudflare or a CDN in front of Firebase Cloud Storage. Unfortunately, Firebase doesn’t allow custom domains, so there is no easy way to add a CDN.

In fact, Firebase itself doesn’t put a CDN in front of Cloud Storage:

Cloud Storage has no built-in CDN; the less short answer is: when your Cloud Storage is “multi-regional”, it means that “hot content” (frequently accessed content) is available on different locations, but that is limited to multi-regional locations, and it applies only to the “jurisdiction” of the location, so, for example, if your project is in “us-central”, then your multi-regional Storage will be stored only in the US data centers, so when accessed from Toronto, it will be served from the nearest US datacenter.

But all is not lost. There is a way to add to have both a custom domain and a CDN.