静的なHTMLをFirebase HostingにアップしてBasic認証を掛ける 🔑

普段は静的サイトのホスティングに GitHub Pages か Netlify をつかうことが多いのですが、Basic認証をかけたい場合、GitHub Pagesでは実現できないですし、Netlifyでは有料の機能なので、どうしようかなと思っていました。

一旦は、 Heroku を使おうかなとも思ったのですが、今回は Firebase を使ってみます。

ざっと調べてみたところ、Firebase Hosting 単体では、Basic認証をかけることができないのですが、Cloud Functions と組み合わせることで実現するのがセオリーっぽいです。

Cloud Functionsは無料のSparkプランでは使用できないので、従量課金のBlazeプランでプロジェクトをつくる必要があります。
それなりに無料枠があるので、簡単なテストサイトレベルであれば無料で運用できますが、プランの切り替えが必要となるとちょっぴり緊張します。

実現方法

firebase.json

{
 "hosting": {
   "public": "public",
   "rewrites": [
     {
       "source": "**",
       "function": "app"
     }
   ],
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ]
 }
}

functions/index.js

const functions = require('firebase-functions');
const express = require('express');
const basicAuth = require('basic-auth-connect');

const app = express();

app.all('/*', basicAuth((user, password) => {
 return user === 'user' && password === 'password';
}));

app.use(express.static(__dirname + '/public/'));

exports.app = functions.region('asia-northeast1').https.onRequest(app);