Firebase Local EmulatorでCloud Storageが使えるようになった

先日公開されたFirebase CLI v9.11.0で、ついにFirebase emulatorがCloud Storageに対応してくれた。

日本語ドキュメントの方はまだ更新されていないが、英語版に切り替えるとローカルでのCloud Storage起動方法が追加されている。

• Install, configure and integrate Local Emulator Suite  |  Firebase
• Connect your app to the Cloud Storage Emulator  |  Firebase

ということで早速、Cloud Storageを使っていたNext.jsアプリでローカルエミュレータを使うように切り替えた。

初期設定

• cliを最新版にアップデート

yarn add -D firebase-tools

• EmulatorにCloudStorageを追加

yarn run firebase init emulators

を実行し、Cloud Storageにチェックを入れる。

完了すると firebase.json にStorageのポート設定が追加される。

{
  "emulators": {
    "storage": {
      "port": 9199
    }
  }
}

• storage.rules

アクセス権限を制御する storage.rules が存在しないためエミュレータを起動しようとするとエラーになってしまう。

そこで、 firestore.rules と同様にルートディレクトリに storage.rules を追加し、Firebase Consoleから既存のClou Storageルールを持ってきて保存する。

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if true
      allow write: if false 
    }
  }
}

↑今回の用途だとStorageに保存しているファイルはpublicアクセス可能なものだったのでread allowにしている。

続いて firebase.json に storage.rules の設定を追記する。

{
  "storage": {
    "rules": "storage.rules"
  }
}

これでエミュレータを起動して、 localhost:4000 にアクセスすると

yarn run firebase emulators:start

Storageエミュレータも起動しているのが確認できる。

Next.jsアプリからの接続方法

• SDKを最新版にアップデート

yarn add firebase

• firebaseHelpersに追記

以前作成した firebaseHelpers にStorageエミュレータの設定を追加する。

import 'firebase/firestore'
import 'firebase/storage'

import firebase from 'firebase/app'

export function getApp() {
  if (!firebase.apps.length) {
    const app = firebase.initializeApp(firebaseConfig)

    if (isEmulator()) {
      firebase.firestore().useEmulator('localhost', 8080)
      firebase.storage().useEmulator('localhost', 9199) // 追加
    }
    return app
  }

  return firebase.app()
}

Functionsからの接続方法

• SDKを最新版にアップデート

yarn add firebase-admin

• 環境変数の設定

Firebase Functions上でCloud Storageを呼び出す場合、firebase-admin経由で呼び出すになるのでNext.jsとは異なる設定が必要になる。

firebase-adminの場合は FIRESTORE_STORAGE_EMULATOR_HOST 環境変数を設定する。

export FIRESTORE_STORAGE_EMULATOR_HOST=localhost:9199

これであとは今まで通りCloud StorageのSDKを呼び出すと、ローカル環境の場合はエミュレータ上のバケットでファイル操作が可能になる。