前置き
これまでは、とりあえずFirebase 上で動かしたいという思いでEmulator を使用していなかった。
一旦Firebase 上にAngular アプリをデプロイできたので、ちゃんと環境を整えようとして詰まった。
この記事はその時に調べたことをまとめたものです。
本編
とりあえず、storage については以下のように修正すれば動く。
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(
routes,
withInMemoryScrolling({
anchorScrolling: 'enabled',
}),
),
provideHttpClient(),
provideAnimationsAsync(),
provideFirebaseApp(() => initializeApp(FIREBASECONFIG)),
provideAnalytics(() => getAnalytics()),
ScreenTrackingService,
// provideStorage(() => getStorage()),
provideStorage(() => {
const storage = getStorage();
connectStorageEmulator(storage, 'localhost', 9199);
return storage;
}),
],
};
見ればわかるけど、connectStorageEmulatorでEmulator のホスト・ポートを設定する。
他はまだやっていないけど、connectAuthEmulator等あるので、似た感じで行けると思う。
ただ、これだけだと必ずEmulator に行くので、フラグ管理等は必要。
おまけ
ここからは僕用のメモというかそんな感じの。
最初にやったことはemulator の使用例を探した。
けど、compat(後方互換用のやつ)以外に記載がなかった。
この記載によると、USE_EMULATORというInjectionToken を注入していた。
なんでもStorage オブジェクトにuseEmulator()メソッドがあり、それを使っているらしい。
一応、直接呼ぶことも出来はする。
ただし、compat は後方互換用のものなので、必要でなければ使わない方が良いらしい。
一方で、普通(compat でない)のやつのソースを見てもそれっぽいものを見つけられなかった。
困ったので、ChatGPT に聞いてみたら、↑のconnectStorageEmulatorを使うやり方を教えてくれた。
これはFirebase JavaScript SDK を再エクスポートしていた。
こちらのソースを確認すると、Storage の型が二種類(FirebaseStorage,FirebaseStorageImpl)あることが分かった。
加えて、通常触るのはFirebaseStorageだが、実態はFirebaseStorageImplであり、hostを含むいくつものプロパティが隠蔽されていることが分かった。
connectStorageEmulatorを実行すると、hostを指定したオーソリティに書き換え(他にもスキーム等も変えるっぽい)、Emulator へリクエストを送るらしい。
一応、Storage オブジェクトをconsole.logで出力したら、確かに_hostプロパティがあった。
ChatGPT 先生ありがとう！
一旦Emulator への切り替えができたので、落ち着いた気持ちで他に方法がないかソースを見た。
すると、getStorage()でgetDefaultEmulatorHostnameAndPort()を実行していた。
ここでは、グローバル変数(ブラウザのwindow等)、環境変数、cookie を参照し、対応した値があれば適用していた。
なので、connectStorageEmulatorを使わなくても切り替えは可能ではあった。
しかし、今回はconnectStorageEmulatorを使った方がやりやすいと思ったので、使わない。
あと、Emulator に初期データを読み込ませる方法について、一応自分で作成することも出来なくはないはず。
一応試したけど、思ったより大変だったので、--import=./data --export-on-exitオプションを追加した。
これで、最初にUI 上の操作が必要だが、移行は不要になる。
感想
楽しかった。
今回の記事は以上です。
前回記事はこちら
詳細見たい人はこちら