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

公開日時

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

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

ということで早速、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.jsonstorage.rules の設定を追記する。

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

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

yarn run firebase emulators:start

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

firebase emulator 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を呼び出すと、ローカル環境の場合はエミュレータ上のバケットでファイル操作が可能になる。


Related #firebase

Firebase Functionsのスケジュール実行はローカルでは動かない

まだサポートされておらず機能リクエストがissueに挙がっている状況

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Firestoreで特定のfieldがnullのドキュメントを取得する

where('field', '==', null)で条件指定できる

Firestoreの複合インデックスを削除する

CLI経由で削除する必要があった