firebaseでbasic認証サイトを公開する


ポートフォリオを作成するにあたり、
なるべく安く(出来れば無料で)サイトを公開したかったので手順を自分用にメモ。

Github pageはbasic認証がかけられなそうだったので今回は見送り(出来たらすみません)

環境
windows 10
Git Bash

firebaseにアカウントを登録

node.js & NPM をインストール

インストール済み想定なので割愛

firebase-tools

globalにfirebase-toolsをインストール

npm install -g firebase-tools

firebaseへログイン

firebase login

firebase初期化

firebase init

・Functions
・Hosting

にチェックを入れる(spaceキー)
※basic認証不要ならfunctionsのチェックは不要。ディレクトリの移動やファイルの書き換えも不要

他基本的にデフォルトのまま設定をしていけばok

public以下のファイルはすべて削除

functions/index.js を以下の通り書き換える

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 === 'username' && password === 'password';
}));

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

exports.app = functions.https.onRequest(app)
firebase.json
{
  "hosting": {
    "public": "public",
    "rewrites": [
      {
        "source": "**",
        "function": "app"
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
> cd functions
> npm install --save express
> npm install --save basic-auth-connect

以下もnpm installしないとエラーを吐いたのでインストール

> npm install firebase-functions
> npm install firebase-admin

/functions/static/ 配下に作業ファイルを追加

デプロイしたい時は

firebase deploy

何事もなければ

Deploy complete!

でデプロイ完了

※以下を参考にさせて頂きました。

・FirebaseでBasic認証をかけてサイトを作る(Hostingする)
https://qiita.com/567000/items/65f55eda8d7c6df09138