開始使用 Web 上的雲端存儲

Cloud Storage for Firebase 允許您上傳和共享用戶生成的內容，例如圖像和視頻，從而允許您在應用中構建富媒體內容。您的數據存儲在Google Cloud Storage 存儲桶中，這是一種具有高可用性和全局冗餘的 EB 級對象存儲解決方案。 Cloud Storage for Firebase 可讓您直接從移動設備和 Web 瀏覽器安全地上傳這些文件，輕鬆處理不穩定的網絡。

先決條件

如果您尚未安裝 Firebase JS SDK 並初始化 Firebase 。

創建默認 Cloud Storage 存儲分區

  1. 從Firebase 控制台的導航窗格中，選擇“存儲” ，然後單擊“開始” 。

  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 的讀寫訪問受到限制，因此只有經過身份驗證的用戶才能讀取或寫入數據。要在不設置身份驗證的情況下開始，您可以配置公共訪問規則。

這確實使雲存儲向任何人開放，甚至是不使用您的應用程序的人，因此請務必在設置身份驗證時再次限制您的雲存儲。

將您的存儲桶 URL 添加到您的應用程序

如果尚未包含，您需要將 Cloud Storage 存儲分區 URL 添加到Firebase 應用的配置對象。

  1. 轉到Firebase 控制台中的存儲儀表板。

  2. 單擊“文件”選項卡，然後查看文件查看器的標題。

  3. 將 URL 複製到剪貼板。它通常採用project-id .appspot.com形式。

  4. 在應用程序中的firebaseConfig對像中，添加storageBucket屬性和您的存儲桶 URL：

網絡模塊化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);

Web 命名空間 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 存儲分區
  • 在不同存儲類別中使用 Cloud Storage 存儲分區
  • 在同一應用中對多個經過身份驗證的用戶使用 Cloud Storage 存儲桶

如果您的用戶遍布世界各地，並且希望將他們的數據存儲在他們附近，那麼第一個用例是完美的。例如，您可以在美國、歐洲和亞洲創建存儲桶來存儲這些地區用戶的數據，以減少延遲。

如果您的數據具有不同的訪問模式，第二個用例會很有幫助。例如：您可以設置一個多區域或區域存儲桶來存儲圖片或其他經常訪問的內容，以及一個近線或冷線存儲桶來存儲用戶備份或其他不經常訪問的內容。

在這兩種用例中，您都需要使用多個 Cloud Storage 存儲分區。

如果您正在構建一個應用程序（例如 Google Drive），第三個用例非常有用，它允許用戶擁有多個登錄帳戶（例如，個人帳戶和工作帳戶）。您可以使用自定義 Firebase 應用實例對每個附加帳戶進行身份驗證。

使用多個 Cloud Storage 存儲桶

如果您想要使用上面提供的默認存儲桶以外的 Cloud Storage 存儲桶，或者在單個應用中使用多個 Cloud Storage 存儲桶，您可以創建一個引用您的自定義存儲桶的firebase.storage實例：

Web modular 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

Web namespaced API

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

使用導入的存儲桶

將現有 Cloud Storage 存儲桶導入 Firebase 時，您必須授予 Firebase 使用gsutil工具（包含在Google Cloud SDK中）訪問這些文件的能力：

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

Web namespaced 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

下一步