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のCLIが使えない人は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/**"
   ]
 }
}