Simple, Extensible, Performant, Low Cost Web Serving using Firebase Hosting

We just rebuilt the Corepox website to improve performance and to extend our functionality with custom pages generated from game data. The website scores 99/100 on a page speed test, and cost less than $5 to host and can be extended and scaled horizontally We think the architecture might be of interest to other indie developers who are looking for highly customizable, high performance but low cost serving technology.

First, for the blog, we used a cheap shared wordpress host on a domain we don’t really care about (corepoxblog.com).

Next we used Firebase Hosting rewrite rules to forward traffic our main domain (corepox.net) traffic to a Google Cloud Function “proxy”.

The proxy function is an Express application that, depending on the request URL, forwards either to out blog, or our bespoke functionality hosted on other Serverless functions. We build this using off-the-shelf Express middleware. The proxy allows us to serve custom web endpoints on the same domain (for SEO).

Finally, the wordpress site URL should be changed to corepox.net, and then the blog pages should work. However, there are a few issues because wordpress will rewrite try to rewrite root requests to the canonical URL, even the ones coming from our proxy causing a redirect loop. So we have apply wordpress adjustments to turn off canonical redirects.

As canonical redirects are a useful feature, we reimplement the functionality in Firebase Hosting rewrite rules. Because its done earlier in the serving path, we don’t have a redirection loop problem.

Now the site should work, but you may be annoyed by the performance of your wordpress hosting. If you look closely the site’s html, the image links are served from your wordpress host (corepoxblog.com in our case).

To offload image serving, we uses WP-stateless plugin. This will host your images on Google Cloud Storage. Note your Firebase project already is a Google Cloud project and hence is integrated with Google Cloud Storage. So you don’t need a new Google Cloud project and the billing will be combined as it should be.

The final performance step is to unlock the power of the Firebase Hosting CDN. To do this you set the cache-control headers on responses. The proxy should *not* do this, rather the proxy should just be forwarding the headers the backend set.

For the wordpress backend we use Cache-Control plugin. For our bespoke functionality we set it in Express using

res.set('Cache-Control', 'public, max-age=300, s-maxage=6000');

These numbers tell Firebase Hosting’s CDN how long to cache documents in its intermediate cache, and to avoid resending to Google Cloud Functions. Even a short cache expiry has a huge impact on scalability and cost, because now when you publish a post, many of your readers will be fetching documents already warmed by previous readers, without costing your a Google Cloud Function execution or bothering your slow WordPress backend!

With this setup, we are now scoring 99/100 on Google Page Speed test! Furthermore we can extend the system with custom sharable game content (like this) on the common domain by adding additional Google Cloud Functions backends to the proxy.

So, HTML and Javascript are served from Firebase Hosting’s CDN at a cost of $0.15/GB transferred. Large images are served from GCS at a cost of around $0.12 per GB. All of these charges are currently paid for by the 
$300 free credit you get when starting a new project. My projected monthly costs if we exclude the free credits is $1.63 for Cloud/Firebase usage, making the $2.99 wordpress hosting costs the dominant!

So there you have it, our flexible, performant low cost web hosting that delivers corepox.net at <$5 per month.


Originally published at corepox.net on January 17, 2019.