トップ > 作業ログ > Firebase HostingとCloud Functionsを使ってHonKitで生成した静的ページをBasic認証付きでホスティングする

Firebase HostingとCloud Functionsを使ってHonKitで生成した静的ページをBasic認証付きでホスティングする

作業ログ Firebase Cloud Functions

ひょんなことからタイトルにあるようなことをやってみたので、その作業ログを残しておきます。 *作業ログを残すのは途中でなにか煮詰まったときに思考を客観視できたり、後々役に立つことがあるので習慣にしています。

やりたいこと

- Markdownで書いているドキュメント（GitHubで管理している）をWebで見れるようにしたい
- 不特定多数に公開するものではないので、簡易的な認証も欲しい
- 無料で試したい

Markdownで書いているドキュメントをWebで見れるようにするためにHonKitを使うことはすぐに決められたのですが、認証をかけるためにどこにホスティングするかちょっと迷いました。

はじめはHerokuかなぁと思っていたのですが、作業ログにあるように少し躓いてしまい、調べていくと最近はFirebaseがモダンなようだったので試してみることにしました。 （本当はNetlifyが一番よさそうだったのですが、認証をかけようとすると有料プランにしないといけなさそうだったので今回は見送りました）

HonKitのセットアップ

Ref. https://honkit.netlify.app/setup.html

  • package.jsonを用意する
{
  "dependencies": {},
  "devDependencies": {
    "honkit": "^3.6.16"
  }
}

*3.6.16 がインストールされた

  • HonKitインストール
npm install honkit --save-dev
  • ボイラープレート作成
npx honkit init
  • サーバ起動
npx honkit serve

=> 失敗
=> node_modulesとpackage-lock.jsonを一度削除し、npm install と npm install honkit --save-devを再度実行すると解決！

Herokuへのデプロイ

- heroku CLIのインストール

brew tap heroku/brew && brew install heroku

Herokuだと、masterブランチでないとデプロイできないのが面倒そう（Review Appsのセットアップに不慣れなのもある）なので、S3やGitHub Page、Netlifyなど見つつ、静的ファイルのホスティングの仕方を調べていたらFirebaseが大分楽そうだったので一旦Firebaseへ

Firebase

Ref. Firebase Hosting を使った静的サイトのホスティング方法

  • Firebase CLIのインストール
npm install -g firebase-tools

なんか、以下のようなエラーが出たので、エラーメッセージに従ってchownした。

% npm install -g firebase-tools
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/keita/.npm/_cacache/index-v5/76/f7
npm ERR! errno -13
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/ojimac/.npm"

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/ojimac/.npm/_logs/2021-01-05T08_58_24_458Z-debug.log
% sudo chown -R 501:20 "/Users/ojimac/.npm"
Password:

再度Firebase CLIのインストールを試す

% npm install -g firebase-tools

今度はうまくいった。

  • Firebaseへのログイン
firebase login
  • 初期設定
firebase init

ホスティングのみ、既存プロジェクトを選ぶ

公開ディレクトリは _book を入力

SPAはNo

GitHub連携もとりあえずNo

index.htmlはオーバーライドしない No

  • デプロイ
firebase deploy

完了
https://XXX.web.app/ で見れるようになった

firebase-debug.log*
firebase-debug.*.log*
.firebase/

HonKitの設定続き

  • SUMMARY.md の編集をしていき、目次を作る

Basic認証の設定

firebase init functions
  • 自動生成された functions/index.js のコメントを外してデプロイ
npx honkit build
firebase deploy
  • basic認証用のnpmパッケージをインストールする
npm install basic-auth-connect
npm install express
  • index.jsを書き換える
const functions = require('firebase-functions')
const express = require('express')
const path = reqruire('path')
const basicAuth = require('basic-auth-connect')

const app = express()

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

exports.app = functions.https.onRequest(app)
  • デプロイするもエラーになる
⚠  functions[app(us-central1)]: Deployment error.
Function failed on loading user code. This is likely due to a bug in the user code. Error message: Error: please examine your function logs to see the error cause: https://cloud.google.com/functions/docs/monitoring/logging#viewing_logs. Additional troubleshooting documentation can be found at https://cloud.google.com/functions/docs/troubleshooting#logging. Please visit https://cloud.google.com/functions/docs/troubleshooting for in-depth troubleshooting documentation.


Functions deploy had errors with the following functions:
        app


To try redeploying those functions, run:
    firebase deploy --only "functions:app"


To continue deploying other features (such as database), run:
    firebase deploy --except functions

Error: Functions did not deploy properly.
  • エラーログをWebコンソールで覗く
    • 気になるエラーを見つける
5:34:09.465 pm
app
Provided module can't be loaded. 
5:34:09.465 pm
app
Did you list all required modules in the package.json dependencies?
5:34:09.465 pm
app
Detailed stack trace: Error: Cannot find module 'basic-auth-connect'

あれ、basic-auth-connect はインストールしているはずなのに。 functionsフォルダ以下を見ると、ここにもpackage.jsonがあることに気づく。 あ、本来こっちに追加しないといけなさそう。

cd functions
npm isntall --save basic-auth-connect
npm isntall --save express

改めて

firebase deploy

デプロイは通るようになった！

が、https://XXX.web.app にアクセスするとまだエラー

Cannot GET /

またWebコンソールでエラーログを見てみる。 ふと firebase deploy でコマンドされるデプロイされるファイルはどれだ？と思い至る。honkit buildで作られる_bookはデプロイ対象外なのでは？

honkit build の生成先をfunctions以下にしないといけない。 honkit build --help と試しに打ってみると、 どうもoutput先を指定できそう。

npx honkit build . functions/static

で意図した先にビルドファイルを置くことができた。

再度デプロイ

firebase deploy

こんどはデプロイ前にバーっとエラーが出る。よく見ると、ESLintに引っかかっている模様。

gitbookのプラグインなどのjsが通っていないみたいなので、一旦ESLintはオフにする。（firebase.jsonのprebuildのフックを削除）

firebase deploy

できた。

後からHonKitの生成物だと思い出せるように、静的ファイルの置き場所を static から honkit/build に変更しておく。

独自ドメイン設定

FirebaseコンソールのHostingから、Add custom domainするだけ。

更新する時

npx honkit build . functions/honkit/build
firebase deploy