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
流れ
{ "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へデプロイ