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

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

始める前に

  1. ウェブアプリのスタートガイドをまだ完了していない場合は、必ず完了してください。以下に例を示します。

    • Firebase プロジェクトの作成。

    • ウェブアプリをプロジェクトに登録し、Firebase JS SDK と Firebase 構成オブジェクトをアプリに追加して、アプリを Firebase に接続します。

  2. Firebase プロジェクトで 従量課金制の Blaze 料金プランを利用していることを確認します。Firebase と Google Cloud を初めて使用する場合は、$300 のクレジットを利用できるかどうかご確認ください。

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

  1. Firebase コンソールのナビゲーション パネルで [ストレージ] を選択します。

    プロジェクトが従量課金制の Blaze の料金プランにまだ登録されていない場合は、プロジェクトをアップグレードするよう求められます。

  2. [開始] をクリックします。

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

  4. デフォルト バケットの Firebase Security Rules を構成します。開発時に公開アクセスルールの設定を考慮してください。

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

バケットは、Firebase コンソールの [Cloud Storage ファイル] タブで確認できます。デフォルトのバケット名の形式は PROJECT_ID.firebasestorage.app です。

公開アクセスを設定する

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

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

Cloud Storage JS SDK を追加して Cloud Storage を初期化する

JavaScript SDK を初期化するときに、Cloud Storage バケット名を指定する必要があります。

Cloud Storage バケット名は、Firebase コンソールの [Cloud Storage ファイル] タブで確認できます。デフォルト バケットの作成日時によって、バケット名は次のいずれかの形式になります。

  • PROJECT_ID.firebasestorage.app （2024 年 10 月 30 日以降に作成されたデフォルト バケット）
  • PROJECT_ID.appspot.com （2024 年 10 月 30 日より前に作成されたデフォルト バケット）

次のコード スニペットを使用して SDK を初期化します。

Web 

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: 'BUCKET_NAME'
};

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


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

Web 

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: 'BUCKET_NAME'
};

// 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 のインスタンスを作成できます。

Web

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

Web

// 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://BUCKET_NAME

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

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

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

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

Web

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

Web

// 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

次のステップ