ウェブで Cloud Storage を使ってみる

Cloud Storage for Firebase を使用して画像や動画などのユーザー作成コンテンツをアップロードして共有し、リッチメディア コンテンツをアプリに組み込むことができます。データは Google Cloud Storage バケットに格納されます。これはエクサバイト規模のオブジェクト ストレージ ソリューションで、高い可用性とグローバルな冗長性を備えています。Cloud Storage for Firebase を使うと、モバイル デバイスやウェブブラウザから直接ファイルを安全にアップロードでき、不安定なネットワークでも安心して行えます。

前提条件

まだ行っていない場合は、Firebase JS SDK をインストールして Firebase を初期化します。

デフォルトの Cloud Storage バケットを作成する

  1. Firebase コンソールのナビゲーション パネルで [Storage] を選択し、[始める] をクリックします。

  2. セキュリティ ルールを使用した Cloud Storage データの保護に関するメッセージを確認します。開発時に公開アクセスルールの設定を考慮してください。

  3. デフォルトの Cloud Storage バケットのロケーションを選択します。

    • このロケーション設定が、プロジェクトのデフォルトの Google Cloud Platform（GCP）リソース ロケーションになります。なお、このロケーションは、プロジェクト内のロケーション設定が必要な GCP サービスで使用されます。具体例としては、Cloud Firestore データベースや App Engine アプリ（Cloud Scheduler を使用する場合に必要）などがあります。

    • ロケーションを選択できない場合は、プロジェクトにデフォルトの GCP リソース ロケーションがすでに設定されています。このロケーションは、プロジェクトの作成時か、ロケーション設定を必要とする別のサービスの設定時に設定されたものです。

    Blaze プランをご利用の場合は、それぞれ独自のロケーションを使用する複数のバケットを作成できます。

  4. [完了] をクリックします。

公開アクセスの設定

Cloud Storage for Firebase には宣言型のルール言語が用意されているため、データの構造化、インデックスの作成方法、データの書き込みと読み取りのタイミングを定義できます。認証ユーザーのみがデータの読み取りと書き込みができるように、Cloud Storage への読み取りと書き込みのアクセスはデフォルトでは制限されています。Authentication を設定せずに開始するには、公開アクセスルールを構成します。

この場合、アプリを使用しない人を含むあらゆる人々に Cloud Storage が公開されるため、認証を設定するときに必ず Cloud Storage へのアクセス制限を再設定してください。

バケット URL をアプリに追加する

Cloud Storage バケット URL がまだ追加されていない場合は、Cloud Storage バケット URL を Firebase アプリの構成オブジェクトに追加する必要があります。

  1. Firebase コンソールの Storage ダッシュボードに移動します。

  2. [ファイル] タブをクリックし、ファイル ビューアのヘッダーを調べます。

  3. URL をクリップボードにコピーします。通常は、project-id.appspot.com という形式です。

  4. アプリ内の firebaseConfig オブジェクトに、バケット URL を含めて storageBucket 属性を追加します。

モジュール方式の Web API

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: ''
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = getStorage(app);

ウェブ向けの名前空間 API

import firebase from "firebase/app";
import "firebase/compat/storage";

// TODO: Replace the following with your app's Firebase project configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
  // ...
  storageBucket: '[your-storage-bucket-url]'
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);


// Initialize Cloud Storage and get a reference to the service
const storage = firebase.storage();

これで Cloud Storage が使えるようになりました。

次のステップでは、Cloud Storage 参照を作成する方法を学びます。

高度な設定

次のようないくつかの使用例では、追加の設定が必要です。

最初の使用例は、ユーザーが世界中に存在し、それぞれのユーザーの近くにデータを保存したい場合に最適です。たとえば、レイテンシを短縮するため、米国、ヨーロッパ、アジアの各リージョンでバケットを作成して、各リージョンのユーザーのデータをそこに保存するといったことができます。

2 番目の使用例は、アクセス パターンの異なるデータがある場合に役立ちます。たとえば、写真などの頻繁にアクセスされるコンテンツを格納するためにはマルチリージョンまたはリージョン バケットを、またユーザー バックアップなどのアクセス頻度の低いコンテンツを格納するためには Nearline または Coldline バケットをそれぞれ設定できます。

上述のどちらの場合も、複数の Cloud Storage バケットを使用します。

3 番目の使用例は、Google ドライブのような、ユーザーが複数のログイン アカウント（個人用アカウントや仕事用アカウントなど）を持つことができるアプリを作成する場合に役立ちます。カスタムの Firebase アプリ インスタンスを使用して、追加の各アカウントを認証できます。

複数の Cloud Storage バケットを使用する

上述のデフォルト以外の Cloud Storage バケットを使用する場合、または単一のアプリで複数の Cloud Storage バケットを使用する場合は、カスタム バケットを参照する firebase.storage のインスタンスを作成できます。

ウェブ向けのモジュラー API

import { getApp } from "firebase/app";
import { getStorage } from "firebase/storage";

// Get a non-default Storage bucket
const firebaseApp = getApp();
const storage = getStorage(firebaseApp, "gs://my-custom-bucket");
storage_multiple_buckets.js

ウェブ向けの名前空間付き API

// Get a non-default Storage bucket
var storage = firebase.app().storage("gs://my-custom-bucket");
index.js

インポートされたバケットの操作

既存の Cloud Storage バケットを Firebase にインポートする場合は、Google Cloud SDK に含まれている gsutil ツールを使用して、Firebase からファイルにアクセスできるようにする必要があります。

gsutil -m acl ch -r -u service-<project number>@gcp-sa-firebasestorage.iam.gserviceaccount.com gs://<your-cloud-storage-bucket>

プロジェクト番号を確認する方法については、Firebase プロジェクトの概要をご覧ください。

これは、新しく作成されるバケットには影響しません。新しく作成されるバケットには、Firebase を許可するデフォルトのアクセス制御が設定されます。これは暫定的な措置であり、将来は自動的に行われるようになります。

カスタムの Firebase アプリを使用する

カスタム firebase.app.App を使用してより複雑なアプリを作成するには、このアプリで初期化される firebase.storage.Storage のインスタンスを作成します。

ウェブ向けのモジュラー API

import { getStorage } from "firebase/storage";

// Get the default bucket from a custom firebase.app.App
const storage1 = getStorage(customApp);

// Get a non-default bucket from a custom firebase.app.App
const storage2 = getStorage(customApp, "gs://my-custom-bucket");
storage_custom_app.js

ウェブ向けの名前空間付き API

// Get the default bucket from a custom firebase.app.App
var storage = customApp.storage();

// Get a non-default bucket from a custom firebase.app.App
var storage = customApp.storage("gs://my-custom-bucket");
index.js

次のステップ