前置き

これまでは、とりあえず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 上の操作が必要だが、移行は不要になる。

感想

楽しかった。

今回の記事は以上です。

前回記事はこちら

詳細見たい人はこちら