Catch up on highlights from Firebase at Google I/O 2023. Learn more

開始使用 Web 上的 Cloud Storage

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

先決條件

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

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

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

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

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

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

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

  4. 對於您應用中的firebaseConfig對象，添加帶有存儲桶 URL 的storageBucket屬性：

Web modular 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 namespaced 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 存儲桶與多個經過身份驗證的用戶一起使用

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

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

在這兩種用例中的任何一種情況下，您都需要使用多個 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

下一步