Firebase HostingにBasic認証をかける方法をまとめる

どーも、ぐるたか@guru_takaです。

SPAといった静的アプリをFirebase Hostingにデプロイする際に、Basic認証をかけたかったので、メモしておきます。

以下の記事を参考にしています。
参考 Firebaseでベーシック認証をかけるベストな方法|松井 貴史|note

手順

STEP.1
firebase initでFirebase HostingとFunctionsを導入
STEP.2
functions/index.jsの編集
STEP.3
functionsフォルダに必要なパッケージをインストール
STEP.4
firebase.jsonの編集
STEP.5
functions/staticに静的ファイルを移動
STEP.6
後はデプロイするだけ!

STEP.1:firebase initでFirebase HostingとFunctionsを導入

コマンドライン
# firebase-toolsをインストール
$ npm install -g firebase-tools

# ログイン
$ firebase login

# 初期化
$ firebase init

ここで、Firebase HostingとFunctionsを選択。設定はデフォルトのままでOKです!

STEP2:functions/index.jsの編集

以下のようにすればOKです。

functions/index.js
const functions = require('firebase-functions')
const express = require('express')
const basicAuth = require('basic-auth-connect')
const app = express()

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

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

exports.app = functions.https.onRequest(app)

userとpasswordがBasic認証で必要な項目になります。

Basic認証がうまくいくと、ミドルウェア関数であるexpress.staticを通じて、staticフォルダ内の静的ファイルが表示されます!

STEP3:functionsフォルダに必要なパッケージをインストール

functions内のフォルダに、必要なパッケージをインストールします。

/functions
$ npm install --save express basic-auth-connect

STEP4:firebase.jsonの編集

以下のようにfirebase.jsonを編集します。

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

STEP5:publicフォルダの中身をfunctions/staticに移動

後はpublicフォルダの中身をfunctions/staticに移動すればOKです!

コマンドライン
mv public/* functions/static/

ここでは、publicの中身が空にすると初めて、rewrite処理でbasic認証がかかる処理へ移行します。

STEP6:後でデプロイのみ!

最後に、おなじみのコマンドでデプロイするだけです!

$firebase deploy

コメントを残す