日々ろぐ

人に優しく٩( 'ω' )و

Firebase HostingしたページにBasic認証をくみこむ

タイトル通り。

Firebase、いいですよね。
WEBページ作ってサクッとホスティングできるし、ただ公開するだけなら無料で使えるし。

今回は
サンプル的に作ったページだから限られた人にだけ見せたい。
ただ、そんなに面倒なことはしたくない。
そうだ、Basic認証を使おう!
という前フリのもと、Firebase Hositng したページにBasic認証をかける方法をメモがてら残しておきます。

環境

node v10.15.3
vue-cli v3.8.2
firebase-tools v7.0.0

概要

Hostingのディレクトリ(/www)を空にしておいて、rewrite発動!
Basic認証処理を実行させて、認証されれば/functions に出力されたbuild済みのソースを読み込ませる。

Repository

github.com

流れ

  • エントリーポイント用のディレクトリを作る
    今回は /www を作成

  • Firebase.jsonを変更する

{
    "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
    },
    "hosting": {
        "public": "www",
        "ignore": [
            "firebase.json",
            "**/.*",
            "**/node_modules/**"
        ],
        "rewrites": [
            {
                "source": "**",
                "function": "firebaseBasicAuth"
            }
        ]
    },
    "storage": {
        "rules": "storage.rules"
    }
}
  • 必要なライブラリを追加する
    ※Functions用なので、/functions にて実行する
$ cd /functions
$ npm install --save express
$ npm install --save basic-auth-connect
$ cd ../
  • Functions/index.js を変更する
/*
firebase.jsonにて、
デフォルトのホスト先(public)ではなく、firebaseBasicAuthを参照するようrewritesすること
*/
const functions = require('firebase-functions')
const express = require('express')
const basicAuth = require('basic-auth-connect')

// Basic認証のID、PASS設定
const USERNAME = 'user'
const PASSWORD = 'pass'

// Basic Auth
const app = express()
app.use(basicAuth(USERNAME, PASSWORD))

// functions/dist を読み込むよう設定
app.use(express.static(__dirname + '/dist/'))
exports.firebaseBasicAuth = functions.https.onRequest(app)
  • vue.config.js を編集する(なければ作る)
module.exports = {
    // ビルド出力先の変更
    outputDir: 'functions/dist',
}
  • vueをbuild & Firebaseへデプロイ