Firebase Summit で発表されたすべての情報をご覧ください。Firebase を使用してアプリ開発を加速し、自信を持ってアプリを実行する方法を紹介しています。詳細

Cloud Storage onWebを使い始める

コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

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

前提条件

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

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

  1. Firebase コンソールのナビゲーション ペインから [ Storage ] を選択し、[ Get started ] をクリックします。

  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 への読み取りおよび書き込みアクセスは制限されているため、認証されたユーザーのみがデータの読み取りまたは書き込みを行うことができます。認証をセットアップせずに開始するには、パブリック アクセスのルールを構成できます。

これにより、アプリを使用していない人も含めて、誰でも Cloud Storage を使用できるようになるため、認証を設定するときに Cloud Storage を再度制限してください。

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

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

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

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

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

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

Web version 9

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);

Web version 8

import firebase from "firebase/app";
import "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: '[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 番目の使用例は、アクセス パターンが異なるデータがある場合に役立ちます。たとえば、写真やその他の頻繁にアクセスされるコンテンツを格納するマルチリージョンまたはリージョン バケットと、ユーザー バックアップまたはその他のアクセス頻度の低いコンテンツを格納するニアラインまたはコールドライン バケットをセットアップできます。

これらのいずれのユース ケースでも、複数の Cloud Storage バケットを使用する必要があります。

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

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

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

Web version 9

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 version 8

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

Web version 9

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 version 8

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

次のステップ