🔑
Firebase HostingでBasic認証をかける ~TypeScript編~
開発中だから見られたくない、特定の人にだけ見せたいなどで簡単に認証かけたいとなるとBasic認証である。
Firebase HostingでもCloud Functionsと連携すれば実現できる。
ググるといっぱい出てくるが...
なぜかCloud FunctionsはJavaScriptベースしか出てこなかった。
TypeScriptでやろうとしてちょっとハマったので共有していく。
手順
とは言え特別にやることはない。
ステップ 1
TypeScriptでも使えるBasic認証のパッケージを入れる。
express-basic-auth - npm
npm i express-basic-auth
ステップ 2
Firebase Hostingデフォルトのpublic/index.htmlを削除して空にする。
ただし、publicディレクトリ自体は必要なので.gitkeep作って消えないようにしておく。
ステップ 3
Basic認証かけたいページの諸々をfunctions/web/に配置する。
名称はwebじゃなくてもなんでもいいが、後述のfunctions/src/index.ts中で参照しているのと同じ名前にしよう。
ステップ 4
次のように、Functionsの/appにリクエストが来たら認証挟んでfunctions/web/index.htmlをレスポンスするように実装する。
functions/src/index.ts
import * as functions from "firebase-functions";
import * as express from "express";
import * as path from "path";
import * as basicAuth from "express-basic-auth";
const app = express();
app.use(
basicAuth({
challenge: true,
users: {
admin: "admin",
},
})
);
app.use(express.static(path.join(__dirname, "../", "web")));
app.use((req, res) => {
res.sendFile(path.join(__dirname, "../", "web", "index.html"));
});
exports.app = functions.https.onRequest(app);
ステップ 5
rewritesを追加する。
firebase.json
"hosting": {
"public": "public",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
+ "rewrites": [
+ {
+ "source": "**",
+ "function": "app"
+ }
]
},
ステップ 6
firebase deploy
最終的にはこのような構成になる
/hoge/
|--firebase.json
|
|-- functions
| |-- web
| | `-- index.html
| `-- src
| `-- index.ts
`-- public
`-- .gitkeep
まとめ
これでめでたくBasic認証かけられた。
静的なページはもちろん、Flutter WebなどのSPAでも問題ない。
が、これって毎回Cloud Functions叩く事になるので遅いし、Cloud Functionsの実行コストもかかるので実用的かと言われると
Discussion