背景
Firebase Authで認証をするときに、いちいちステージングで確認するのがめんどくさいときにローカルでテストしたくなります。
が、Dev Containersで開発しているとブラウザ経由で別のコンテナに対して繋げられないときがあります。
これって困りますよね、では解決方法を考えましょう。
解決方法
services:
app:
build:
context: .
dockerfile: Dockerfile
volumes:
- node_modules_cached:/home/vscode/app/node_modules
- ../:/home/vscode/app:cached
tty: true
stdin_open: true
firebase:
image: andreysenov/firebase-tools:14.17.0
environment:
FIREBASE_TOKEN: $FIREBASE_TOKEN
command: firebase emulators:start --only auth --import=auth --export-on-exit=auth
volumes:
- ./auth:/home/node/auth
- ./firebase.json:/home/node/firebase.json
- ./.firebaserc:/home/node/.firebaserc
volumes:
node_modules:というわけでこういう感じで.devcontainer/compose.yamlを作成します。
{
"forwardPorts": [5173, 9099, 4000],
}更に.devcontainer/devcontainer.jsonに上のようにポートフォワードを明記します。
こうするとFirebase -> App -> Browserという感じで接続ができるようになり、ブラウザから正常にlocalhost:9099などに繋げられるようになります。
構成
.
├── auth
│ ├── auth_export
│ │ ├── accounts.json
│ │ └── config.json
│ └── firebase-export-metadata.json
├── compose.yaml
├── devcontainer.json
├── Dockerfile
├── firebase.json
├── postAttachCommand.sh
└── postCreateCommand.shこういう感じでダミーのアカウントを予めファイルとして出力しておけばローカル環境でログインができます。
連携系のOAuthは機能しないっぽいので、ローカルアカウントを使うとよいです。
まとめ
Firebase Authは何も考えなくていいから楽ですね。
記事は以上。