開始使用 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

下一步