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

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Firebase Extensions

Functionsを実装する際の参考になる

Cloud FunctionsでFirebase Authenticationの認証情報を取得する

functions.https.onCallを使用している場合はcontextパラメータを受け取ることができる

Firebase HostingでCache-Controlヘッダーを設定する

firebase.jsonに追記する