開始在網頁版 Cloud Storage 中使用

Cloud Storage for Firebase 可讓您上傳及分享使用者原創內容，例如圖片和影片，在應用程式中建構多媒體內容。您的資料會儲存在 Google Cloud Storage 值區中，這是具備高可用性和全域備援機制的 Exabyte 級物件儲存空間解決方案。Cloud Storage for Firebase 可讓您直接從行動裝置和網路瀏覽器安全上傳這些檔案，輕鬆處理網路不穩定的情況。

事前準備

  1. 如果尚未完成，請務必先參閱網頁應用程式入門指南。包括：

    • 建立 Firebase 專案。

    • 向專案註冊網頁應用程式，並將 Firebase JS SDK 和 Firebase 設定物件新增至應用程式，將應用程式連結至 Firebase。

  2. 確認 Firebase 專案採用即付即用 Blaze 定價方案。如果您剛開始使用 Firebase 和 Google Cloud，請確認是否符合 $300 美元抵免額的資格。

建立預設 Cloud Storage bucket

  1. 在 Firebase 控制台的導覽窗格中，選取「儲存空間」。

    如果專案尚未採用即付即用 Blaze 定價方案，系統會提示您升級專案。

  2. 按一下「開始使用」。

  3. 選取預設值區的位置。

  4. 為預設 bucket 設定 Firebase Security Rules。開發期間，請考慮設定公開存取規則。

  5. 按一下「完成」。

您現在可以在 Firebase 控制台的Cloud Storage「Files」(檔案) 分頁中查看 bucket。預設值區名稱格式為 PROJECT_ID.firebasestorage.app。

設定公開存取權

Cloud Storage for Firebase 提供宣告式規則語言，可讓您定義資料的結構、索引方式，以及資料的讀取和寫入時間。根據預設，系統會限制 Cloud Storage 的讀取和寫入權限，只有通過身分驗證的使用者才能讀取或寫入資料。如要開始使用，但不想設定 Authentication，可以設定公開存取規則。

這會讓任何人都能存取 Cloud Storage，即使對方未使用您的應用程式也一樣，因此請務必在設定驗證時再次限制 Cloud Storage。

新增 Cloud Storage JavaScript SDK 並初始化 Cloud Storage

初始化 JavaScript SDK 時，您必須指定 Cloud Storage 值區名稱。

您可以在 Firebase 控制台的「檔案」Cloud Storage分頁中找到 bucket 名稱。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 參考資料。

進階設定

以下幾個應用情境需要額外設定：

如果您有遍布全球的使用者，並希望將資料儲存在靠近他們的位置，第一個用途就非常適合。舉例來說，您可以在美國、歐洲和亞洲建立值區，儲存這些地區使用者的資料，以減少延遲。

如果您有存取模式不同的資料，第二個用途就很有幫助。舉例來說，您可以設定多區域或區域型值區，儲存圖片或其他經常存取的內容；也可以設定 Nearline 或 Coldline 值區，儲存使用者備份或其他不常存取的內容。

在上述任一使用案例中，您都會使用多個 Cloud Storage 值區。

如果您要建構的應用程式 (例如 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 bucket 匯入 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 專案簡介。

這不會影響新建立的 bucket，因為這些 bucket 的預設存取權控制項已設為允許 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

後續步驟