今回はFirebase CLIを使って、Storageのセキュリティルールを変更します。当記事は、2022年5月時点での動作確認内容です(随時更新予定)

下記の初期設定が既に完了している前提で、解説を進めていきます。

  • Firebaseのプロジェクトを作成している
  • Node.jsがインストールされている

手順解説

1. Firebase CLI をインストールする

npm(Node Package Manager)でFirebase CLIをインストールを行います。

$ npm install -g firebase-tools

2. Firebase CLI にログインする

firebase login:ciを実行してFirebase CLI にログインします。コマンド実行後に「FirebaseがCLIの使用状況とエラーレポートを収集しますか?」と質問されるので、yを入力してenterを押します。

ブラウザが起動してログイン許可をすると、Firebase CLIへのログインが成功した旨を教えてくれます。

$ firebase login:ci

? Allow Firebase to collect CLI usage and error reporting in
formation? (y/n)

✔  Success! Logged in as waibandl321@gmail.com

3. プロジェクトリストを確認する

ログイン後、$ firebase projects:list を実行すると、既存のFirebaseプロジェクト一覧を確認できます。この一覧に自分が作成しているプロジェクトが表示されていればOKです。

$ firebase projects:list
┌──────────────────────┬─────────────────────────┬────────────────┬──────────────────────┐
│ Project Display Name │ Project ID              │ Project Number │ Resource Location ID │
├──────────────────────┼─────────────────────────┼────────────────┼──────────────────────┤
│ ************         │ ************            │ ************   │ us-central           │
├──────────────────────┼─────────────────────────┼────────────────┼──────────────────────┤
│ ************         │ ************            │ ************   │ asia-east2           │
├──────────────────────┼─────────────────────────┼────────────────┼──────────────────────┤
│ ************         │ ************            │ ************   │ asia-east2           │
├──────────────────────┼─────────────────────────┼────────────────┼──────────────────────┤
│ ************         │ ************            │ ************   │ us-central           │
├──────────────────────┼─────────────────────────┼────────────────┼──────────────────────

4. Firebase プロジェクトを初期化する

CLIを使う = デプロイが必要になりますが、$ firebase init で、デプロイに必要なプロジェクトディレクトリを作成します。ディレクトリの作成場所については、ソース管理のルートと同じディレクトリが適切です。

例えば、taskappというディレクトリで開発を行なっているのであれば、taskappディレクトリでコマンドを実行します。

$ firebase init

firebase init の実行後、Hosting、Storage、Realtime Databaseなどの各機能を選択するように促されます。ルールを設定したいプロジェクト(今回ならStorage)まで移動し、space→enterを押して選択完了です。

? Which Firebase features do you want to set up for this directory? Press Space to select features, the
n Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection, 
and <enter> to proceed)
 ◯ Hosting: Set up GitHub Action deploys
 ◯ Storage: Configure a security rules file for Cloud Storage
 ◯ Emulators: Set up local emulators for Firebase products
❯◯ Remote Config: Configure a template file for Remote Config
 ◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision 
default instance
 ◯ Firestore: Configure security rules and indexes files for Firestore

5. ルールを設定するプロジェクトを選択する

ルールを設定する機能(今回ならStorage)を選択したら、Firebaseのプロジェクトを選択します。プロジェクトを選択してenterを押すと、セットアップが完了します。

? Select a default Firebase project for this directory: 

=== Storage Setup

セットアップが完了したら、作業ディレクトリ直下に設定ファイルが自動で作成されます。

└ firebase.json : firebase CLIの設定内容
└ storage.rules : firebase Storageのルールを記述

6. ルールを編集する

今回はStorageのルールを変更するので、storage.rulesを編集します。ファイルへのアクセス制御などの設定内容を記述しましょう。

7. デプロイ

ルールを編集したら、以下のコマンドを使用してソースを本番環境にデプロイします。今回はStorageのルールのみを変更しているので、$ firebase deploy –only storageとします。Storageと同様の手順で、Realtime DatabaseやFireStore Databaseのルール変更も行えます。

$ firebase deploy --only storage

i  deploying storage
i  firebase.storage: checking storage.rules for compilation errors...
✔  firebase.storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage

✔  Deploy complete!

デプロイが成功したら、✔ Deploy complete!とメッセージが表示されるので、コンソールで変更内容を確認し、無事に変更が反映されていれば完了となります。

カテゴリー: firebase