Host a static website with Google Cloud Storage using Firebase Cloud Function as a proxy to secure the access with HTTP basic authentication

That is a fucking long title.

I wanted a cheap hosting for a static website. So I though “Hey let’s use Google Cloud Storage”! It can be used easily to host a static website.

But my website has to be protected by username/password authentication. A HTTP basic Authentication is enough for my use case. The thing is: it is super hard to achieve this with Google Cloud Storage… I can restrict the access to my bucket with IAM, that’s for sure. But when my users access my static website hosted on GCS, no one is going to include a nice “Authorization” header or whatever. So it is “Access denied”.

So I wanted to create a Proxy to access my bucket. By creating a service account, I can provide READ access to any server to my bucket. But I still want a cheap solution. So I will definitely not run a VM 24/7 just to provide a proxy to a website rarely used.

Firebase proposes some cheap plan (pay as you go) and allow us to run Cloud Function with basically any NPM module I want, including Express, which provide Proxy middleware.

So I started to build a proxy to access my GCS hosted website. But I never achieve the expected result because of this

fail_google.png

There is a Github issue about a similar error but damn, there is no solution for this; It looks like Google will just not allow Firebase to access GCS via HTTP.

So after a lot of struggles and try-but-failed workaround, I ended up downloading locally the requested file from GCS and stream it as a request.

All is left to do is create a nice CNAME for my firebase project.

See this gist to access the final code I used.

Karma – 0 tests completed

Running unit testing with Karma on Google Chrome browser on a Angular 2 application.

No tests were running 😥

SUMMARY:
√ 0 tests completed

In the Chrome window, the console said

Refused to execute script from 'http://localhost:9876/base/src/tests/test.ts?b58784c03c82bb3f722dcb6d25bd26cdf145b12b' because its MIME type ('video/mp2t') is not executable

I found a solution here saying that I just need to add the following line to karma.conf.js

mime: {
'text/x-typescript': ['ts','tsx']
},

JavaScript – Stats.js

JavaScipt library that shows the Frame per Second on top of web page. Just copy-paste the following code.

function startStatsJS(){var script=document.createElement('script');script.src='http://github.com/mrdoob/stats.js/raw/master/build/stats.min.js';document.body.appendChild(script);script=document.createElement('script');script.innerHTML='var interval=setInterval(function(){if(typeof Stats==\'function\'){clearInterval(interval);var stats=new Stats();stats.domElement.style.position=\'fixed\';stats.domElement.style.left=\'0px\';stats.domElement.style.top=\'0px\';stats.domElement.style.zIndex=\'10000\';document.body.appendChild(stats.domElement);setInterval(function(){stats.update();},1000/60);}},100);';document.body.appendChild(script);};
 
startStatsJS();