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

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

やりたいこと

- 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 installnpm 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

ATND.orgの終了に伴ってATND検索を終了します

2009年頃に開発していた ATND検索 というサービスがあるのですが、2020年4月2日(予定)を持ってサービスを終了します。

このサービスは、自分が最初に作ったWebサービスということで、ドメインをずっと更新し続けてきたのですが、今年も更新のタイミングがやってきてきたぞということでふと 本家ATND を見てみたところ、2020年4月14日をもってサービスを終了するというお知らせが。

ATND検索は、ATNDのWeb APIを利用しているので、ATND自体が終了するということでAPIも利用できなくなるためサービス継続が難しくなりました。

このサービスの開発を通じて、サービスを0から作ってみるという経験ができたり、転職をしたり、インターネットを通じてフィードバックをもらったりと様々なことがありました。これまでありがとう。

今年は何か小さくてもいいので、久しぶりにサービス開発をしてみようかな。

使っているツール棚卸し2017年5月版

CTOの仕事とは (1)

2016年ふりかえり のエントリでも書いたが、AGRIBUDDY というスタートアップのCTOをしている。

CTOの役割というか、どういう仕事をしているのか、この約10ヶ月で自分のやってきたことをふり返りながらまとめてみる。

前提

会社・開発チームの規模感

  • アーリーステージ(シリーズAAが終わったところ)
  • ビジネスサイドはカンボジアにいる
  • 小さな開発チーム(自分を含めて4人... サーバーサイドが2人、モバイルアプリのエンジニアが1人) 
  • 自分はシンガポール居住でリモートで参加
  • 開発チームもメンバーの半数以上がリモート(ベトナムから1名、カンボジアから2名)

やってきたことを列挙してみる

  • 開発チームのマネジメント
  • 開発フロー策定
  • タスクの優先度決め
  • コードレビュー
  • モバイルアプリのリリース前チェック
  • プロダクトマネジメント
  • プロダクトオーナー(CEO)と毎日の定例ミーティング
  • アプリ、Webのプロトタイピング
  • マーケティング、オペレーションからのフィードバック対応
  • データ分析
  • KPIダッシュボード作成(Redashにだいぶ助けられた)
  • アライアンス先とのやり取り
  • デモアカウント作成
  • フィードバック対応
  • 技術の窓口になる
  • 資金調達まわりの数字まとめ
  • 今後の計画をCEOと議論

多岐にわたっているなと。

所感

コードを書く時間はほとんどなかった。(データ分析、可視化まわりでSQLに関してはかなり書いたw)

今までの自分のキャリアでコードを全然書かなくなったことが無いのと、自分はコードを書くことも好きなので、コードが書けなくなるストレスを懸念していたがそうでもなかった。 自分はプロダクトを成長させる事自体にやりがい・楽しさを感じるタイプだと再認識することができた。

ただ、コードを書いてプロダクトを作ることももちろん好きなので、仕事とは関係なくコードを書く時間を意識的に確保していきたい。 仕事でコードを書くと、自分がボトルネックになってしまうので...

How I Work(2017年版)

ライフハッカーHow I Workという連載が好きで定期的に見ています。生産性が高そうな人の持ち物、ツール、考え方が参考になるので。

では自分はどうなのか?をまとめておきます。

居住地:シンガポール
現在の職業:ソフトウェアエンジニア
仕事の仕方を一言で言うと:几帳面に
現在の携帯端末:OnePlus One, iPad Mini
現在のPC:MacBook Pro Retina 2015 late

1. 「これがないと生きられない」アプリ/ソフト/道具は何ですか?

PC、インターネットが無いと生きていけません。

2. 仕事場はどのような環境ですか?

リモートワークをしているので、カフェが主です。

3. お気に入りの時間節約術は何ですか?

N/A

4. 愛用している、仕事をうまく進行させるためのツール(ToDoリスト、アプリ、道具など)はありますか?

N/A

5. 携帯電話とPC以外で「これは必須」のガジェットはありますか?

N/A

6. 仕事中、どんな音楽を聞いていますか?

Spotifyで歌詞の無い曲を適当に選びます。

7. 仕事において役に立った本、効果的だった本は何ですか?

Inspired: 顧客の心をとらえる製品の創り方 シリコンバレーのプロダクトがどのようにして生み出されているかを知ることができたので。

8. 現在、どんな本を読んでいますか?

マネジメント系の本が多いです。

9. 睡眠習慣はどのようなものですか?

眠くなったら寝る(平均して1時くらい〜7, 8時くらいまで寝ていることが多いです)

10. 仕事をよりよく進めるために「習慣」にしていることはありますか?

人に動いてもらわないといけないところを優先的に。

11. いまお答えいただいている質問を、あなたがしてみたい相手はいますか?(なぜ、その人ですか?

スティーブ・ジョブズMaciPhoneを生み出した人の働く環境の一端を見てみたいから。

12. これまでにもらったアドバイスの中でベストなものを教えてください。

N/A

13. 最近購入したものの中から、特に気に入っているものがあれば教えてください。

Ergodox EZというエルゴノミクスキーボード。使い始めてから肩、背中周りが楽になりました。

2016年ふりかえり

仕事も収めたので、今年のふりかえりをしておく。

2016年は仕事・プライベート共に、大きな変化のある年だった。

居住地は引き続きシンガポール

仕事

今年の2月から AGRIBUDDY というスタートアップに参画した。

カンボジアをベースにオンライン農協を作ろうとしている Agritech/Fintech なスタートアップ。

CEOは日本人だが、他のメンバーは外国人。国籍もカンボジアベトナムリトアニア、アメリカと様々。

普段はリモートで開発に参加。 2~3ヶ月に一度1〜2週間くらい出張として現地に行って、対面でのコミュニケーションを取るようにしている。

開発チームは自分含めて4人(自分、サーバーサイドエンジニア2人、モバイルアプリエンジニア1人)。

役割としてはCTOで、開発全般に関わっている。 * CTOとしての仕事の内容については、長くなりそうなので別エントリで。

英語

シンガポールに来てから約3年半が経った。 最初の2年半くらいは日本の仕事をしていたこともあり、現地に住んでいても英語を使う機会は少なかったが、今の仕事をはじめてからは使う機会が格段に増えた。(使わないと仕事にならない…)

結果、この約10ヵ月で読み書きはかなり上達した実感がある。 一方、テキストでのやりとりが多いので話す、聞くはまだ苦手。

買ったもの

運動不足がたたったのか、背中痛が気になるようになったので、エルゴノミクス系のものに興味が出てきた。 とはいえ根本解決には運動が一番だと思うので、後半は意識して走ったり、プールで泳いだりをしていた。

  • Ergodox EZ

    • 流行りモノだが、使い始めてから肩、背中周りが楽になった。中々場所をとるのと、打ち慣れるまでが大変だった。たまにHHKBに浮気したりしている。
  • Ergotron WorkFit-A

    • スタンディングデスク的に使える作業場所付きモニタアーム(リンク先見てもらった方がわかりやすそう)

読んだ本

悩みごとがあると本に解を求めがちなのもあり、仕事で役に立ちそうだと思って読んだ本が多い。 マネジメント系が多く、あまり技術書は読めなかった。。 今年前半にやっていたプロジェクトのために買ったRailsの本、今やっている仕事用にLaravelのリファレンス本くらいか。

プライベート

  • 結婚
  • おじさんになった。(甥っ子かわいい・・・)

2017年にやりたいこととかは別エントリにする。

AWS LambdaのデプロイツールKappaを試す

AWS Lambdaを使っていて気になるのがデプロイ周り。

何かないかと思って調べていると見つかったのが、Kappa。(アルファ α、 ラムダ λ、カッパ κ でKappaか...)

Qiitaとかで調べても情報が出てこないので、日本ではマイナー!?

ともかく使ってみることにする。

インストール

github から clone してきて、リポジトリのあるディレクトリで、

$ python setup.py install

するだけ。

*最初、error: jmespath 0.9.0 is installed but jmespath==0.7.1 is required by set(['botocore'] というエラーでインストールが止まってしまったが、この辺 とか、 この辺 を参考に、pip install botocore boto3 してから再度 setup.py を実行したらインストールできた。